Basic knowledge points
1 语义化
-------------------------------------------------------------------------------
1 作用
1 让浏览器更好的理解网页结构 (结构明了)
2 搜索引擎优化(SEO)
2 常见语义化标签
header -- nav -- article 内容 > section 区域 -- footer
-------------------------------------------------------------------------------
2 CSS 三角形
-------------------------------------------------------------------------------
1 HTML 结构
<div class="hh"></div>
2 CSS 样式
.hh {width: 0; height: 0; border: 10px solid transparent; border-bottom-color: #008c8c;}
-------------------------------------------------------------------------------
3 图片底部白边问题
-------------------------------------------------------------------------------
1 描述 -> div高度自动, 子元素img, 撑开div的时候底部会出现空白间隙的情况
2 解决方案
1 img 转为 block 元素
2 设置 div -> font-size: 0; //空白缝隙是预备和字母基线对齐造成的
3 设置图片的对齐方式: vertical-align: middle;
-------------------------------------------------------------------------------
4 常见元素分类
-------------------------------------------------------------------------------
1 行盒 -- (加粗: strong / b) (倾斜: em / i) (删除线: del / s) (下划线: ins / u)
2 块盒 -- (h1-h6) -- p -- div -- ul -- li -- header -- footer -- nav ...
3 行块盒 -- img -- input -- button -- textarea -- select -- label -- video -- audio
-------------------------------------------------------------------------------
5 CSS 书写规范
-------------------------------------------------------------------------------
1 布局定位属性: display / position / float / clear / visibility / overflow (display 最好第一个写)
2 自身属性: width / height / margin / padding / border / background
3 文本属性: color / font / text-decoration / text-align / vertical-align / white-space / break-word
4 其他属性: content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient...
-------------------------------------------------------------------------------
Attribute assignment process
1 确定声明值: 没有冲突的声明, 作为css属性值
2 层叠过程: 解决声明冲突, 确定css属性值 ---> '层叠上下文的过程'
3 属性值继承: 赋值可以继承的属性值
4 默认值: 还没有属性值的元素, 使用CSS属性默认值
'层叠上下文的过程'
1 比较重要性:
1 作者样式表中的：!important
2 作者样式表中普通样式
3 浏览器默认样式表中的样式
2 比较特殊性: (作者样式表)
1 行内样式表
2 id 选择器雷同, 就比数量多的获胜
3 class类 / 属性 / 伪类 选择器; 雷同, 就比数量多的获胜
4 元素 / 伪元素 选择器
3 比较书写顺序--靠后的胜出:
Layout related
1 BFC -> 块级格式化上下文
-------------------------------------------------------------------------------
1 理解:
1 一块独立的渲染区域 //隔绝了内部渲染和外部的联系
2 它规定了常规流块盒的布局方式
3 只有在这个区域里面, 常规流块盒的排列规则才是有效的
2 创建-BFC-的条件:
1 html 元素内部 == BFC 区域
2 浮动和绝对定位元素内部 == BFC 区域
3 overflow 的属性值不等于默认值 visible 的元素内部 == BFC 区域;
4 display: inline-block, table-cell, table-caption, flex, inline-flex; 的元素内部 == BFC 区域
3 BFC的特性:
1 创建了BFC的元素, 它的自动高度需要计算浮动元素; 可解决高度塌陷
2 创建了BFC的元素, 排列布局不会再无视浮动盒子了
3 处在不同的BFC中的元素, 它们的外边距是不可能合并的; 所以可创建BFC的元素, 外边距不会与子元素外边距合并
-------------------------------------------------------------------------------
2 浮动 -> float: left;
-------------------------------------------------------------------------------
1 作用:
1 在元素需要, 左右排列的情况使用
2 特点:
1 让多个块元素在一行内排列显示, 且会默认把元素转为块元素
2 宽高自适应, margin == 0
3 浮动元素的顶边不得高于上一个浮动盒子的顶边; (浮动趋势, 上左/上右)
4 排列: 浮动盒子会避开常规流盒子
5 排列: 常规流块盒会无视浮动盒子, 但在显示上会在浮动盒子下面;
6 排列: 行盒在排列时, 会避开浮动盒子
3 注意事项: 高度塌陷问题
1 触发条件: 父元素不设高, 子元素浮动;
2 理解: 常规流盒子在计算自动高度时, 不会考虑脱离了常规流的盒子, 就撑不开父元素的高度了
3 解决高度塌陷问题: 给父元素加类名 class="clear";
.clear:after{
content: ""; display: block; clear: both; height: 0; visibility: hidden;}
-------------------------------------------------------------------------------
3 定位 -> position: relative;
-------------------------------------------------------------------------------
1 作用:
1 让某个元素可以自由的在一个盒子内移动位置, 并压住其它盒子
2 会默认把定位的元素转为块元素 //相对定位除外
2 特点:
1 相对定位: relative
1 基于自身的位置进行视觉上的偏移, 不脱离文档流, 不改变实际位置
2 常用于, 给绝对定位提供包含块, 堆叠上下文+1
2 绝对定位: absolute
1 宽高适应内容, 堆叠上下文+1
2 包含块为祖先元素中最近的一个带定位元素内容盒, 找不到则为整个网页;
3 固定定位: fixed
1 包含块为视口, 不占位
2 堆叠上下文+1
3 堆叠上下文:
1 多个定位元素, 位置重合的时候, 会发生上下位置的冲突问题 -- 堆叠
2 z-index: num; 控制定位元素的上下问题, num值越大越在上面
3 父元素永远不会盖住子元素
4 利用定位实现元素居中:
1 水平居中: 定宽 左右定位距离设为0 左右margin为 auto
2 垂直居中: 定高 上下定位距离设为0 上下margin为 auto
3 水平垂直居中: 定宽定高 左右上下定位距离设为0 左右上下margin为 auto
5 利用定位实现元素居中:
1 水平垂直居中: 上左定位50%, 向左移动自身宽度的一半, 向上移动自身高度的一半;
2 水平垂直居中: 上左定位50%-自身高宽的一半;
-------------------------------------------------------------------------------
4 flex
-------------------------------------------------------------------------------
1 理解:
1 当我们为父盒子设为 flex布局以后 -- 子元素的其它布局属性将失效 -- 子元素也叫 Flex项
2 父元素: display: flex; 也会将 Flex项转为块盒
3 如不设置换行 -- flex项会默认不换行 -- 但会自动缩小我们盒子
2 常用父项属性
1 设置主轴方向: 默认左右--右左--上下--下上
flex-direction: row /row-reverse /column /column-reverse;
2 设置 Flex项在主轴上的排列方式 -- justify-content: ;
1 flex-start 默认值 -- Flex项 -- 从主轴头到主轴尾对齐
2 flex-end Flex项 -- 主轴尾部对齐 -- 盒子排列顺序不变 -- 类似右对齐
3 center Flex项 -- 在主轴上居中对齐
4 space-around Flex项 -- 平分空间
5 space-between Flex项 -- 先俩边贴边, 再平分剩余空间 -- 常用
3 设置 Flex项是否换行: 默认不换行--换行
flex-wrap: nowrap / wrap;
4 设置侧轴的排列方式 -- align-items: ;
1 flex-start 默认值, 主轴默认情况, 侧轴从上到下
2 flex-end 主轴默认情况, 侧轴从下到上
3 center 挤在一起居中 (垂直居中)
4 stretch 拉伸, 但是子盒子不要给高度
3 常用子项属性
1 定义子项如何分配空间 -- flex: 1, 2, 1;
2 灵活控制子项自身在侧轴上的排列方式 -- align-self: ;
3 定义子项的排列顺序 -- order: 1; -- 默认为0, 数字值越小排列越靠前
-------------------------------------------------------------------------------
Common operation extension
1 字体图标
-------------------------------------------------------------------------------
1 优点: 使用方便, 不占内存
2 具体操作:
1 https://www.iconfont.cn/ -> 添加图标到我的项目
2 资源管理 --> 我的项目 --> Font class --> 查看复制在线连接 xx.css > --- <link ... href="粘贴">
3 复制图标代码 --> 加到 i元素的class类名上 --> 例: <i class="iconfont 图标代码"></i>;
4 离线使用: 浏览器打开 xx.css 在线链接, 复制代码保存在本地, 引入到文件中
-------------------------------------------------------------------------------
2 精灵图
-------------------------------------------------------------------------------
作用: 有效减少了服务器接收和发送请求的次数, 提高页面的加载速度
理解: 就是把需要的小图标弄在一张图片上, 通过设置背景图的位置来展示需要的图标
使用: background: url('路径') -200px 0;
-------------------------------------------------------------------------------
3 单行文本溢出显示省略号
-------------------------------------------------------------------------------
在文本父元素上设置如下样式代码
1 white-space: nowrap; //强制文本不换行显示
2 overflow: hidden; //超出部分隐藏
3 text-overflow: ellipsis; //用省略号代替超出的部分
-------------------------------------------------------------------------------
4 多行文本溢出显示省略号
-------------------------------------------------------------------------------
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //弹性伸缩盒子模型显示
-webkit-line-clamp: 10; //限制在一个块元素内显示的文本的行数
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
-------------------------------------------------------------------------------
5 怎么让网页滚动条消失还可以用
-------------------------------------------------------------------------------
方式 1;
::-webkit-scrollbar{
display: none;
width: 0;
}
方式 2;
html, body{
overflow-y: hidden}
最大的容器盒子 -- div{
right: -15px}
-------------------------------------------------------------------------------