1.1 CSS
1.1.1 选择器
1.常用选择器
- id选择器（#box）——选择id为box的元素
- 类选择器（.one） ——选择类名为one的所有元素
- 标签选择器（div）——选择标签为div的所有元素
- 后代选择器（#box div）——选择id为box元素内部所有的div元素 // 包括儿子孙子等所有后代
- 子选择器（.one > one_1）——选择父元素为.one的所有.one_1的元素 // 只包括儿子
2.伪类选择器
- :link——选择未访问的链接
- :visited——选取已被访问的链接
- :active——选择活动链接
- :hover——鼠标指针浮动上面的元素
- :focus——选择具有焦点的
- :first-child——父元素的首个子元素
在元素选择器上加入伪类改变元素状态，它是在已有元素上加的，不会产生新的元素，如鼠标悬浮点击样式。
3.伪元素选择器
- ::before——选择器在被选元素的内容前面插入内容
- ::after——选择器在被选元素的内容后面插入内容
在内容元素的前后插入额外的元素或样式，但这些元素并不在Dom文档中，只在外部显示可见
优先级规则：
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
如果优先级相同，则最后出现的样式生效
1.1.2 隐藏元素的方法
-
display:none——直接彻底消失，不会占用空间，无继承性；元素本身占有的空间就会被其他元素替代，会导致浏览器的回流和重绘。
-
visibility:hidden——仅仅是隐藏该元素，还占据页面空间且样式都在，但无法响应点击事件，会产生重绘但不会回流。
-
opacity:0——让元素透明度为0使其不可见，占据页面空间，可以响应点击事件。
-
overflow:hidden——该元素的内容若超出了给定的宽度和高度属性，那超出的部分将会被隐藏不占有位置。
-
position:absolute——通过使用绝对定位，设置足够大的偏移量将元素移除可视区域外
1.1.3 居中
行内元素: text-align: center
flex布局: display:flex;justify-content:center;align-items:center;
1.1.4 布局
1.两栏布局
概念：左边一栏宽度固定，右边一栏宽度自适应，且左右两边不能重叠
- 使用float左浮左边栏
- 右边模块使用margin-left撑出块做内容展示
- 为父级元素添加BFC,防止元素飞到上方内容左右两栏宽度固定，中间自适应的布局
2.三栏布局
概念：左右两栏宽度固定，中间自适应的布局
- 利用浮动，左右两栏设置固定大小，并分别设置左右浮动。中间一栏设置左右两个方向的margin值
- 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值
- 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1
3.flex布局
定义：灵活高效地实现居中、对齐等有规律的弹性布局，采用flex布局的元素称为flex容器，容器内的子元素称为项目。
容器属性
- flex-direction——决定主轴的方向
- flex-warp——决定容器内项目是否可换行
- justify-content——定义了项目在主轴上的对齐方式
- align-items——定义项目在侧轴上的如何对齐
- align-content——定义了多根轴线的对齐方式
项目属性
- flex-grow——定义项目的放大比例，默认为0
- flex-shrink——定义了项目的缩小比例，默认为1
- flex-basis——定义了元素在主轴上的初始尺寸
- flex——为以上三个的简写，默认0 1 auto
flex: 1表示自动填充剩余空间，布局最后一个盒子时使用flex:1便可得到整个剩余宽度
1.1.5 BFC
概念：块级格式化上下文，实现一个独立的容器，里面的子元素与外面的元素不会相互影响。
哪些元素会生成bfc：
- 对父元素设置overflow:hidden
- 元素设置绝对定位或固定定位
- 元素设置浮动
- flex或行内元素布局
特点
- BFC是一个块级元素，一行只能有一个
- BFC是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
- 垂直方向的距离由margin控制， bfc内部的元素外边距会发生重叠，实际距离取值更大的
解决的问题
- ⾼度塌陷的问题：如对⼦元素设置浮动后，⽗元素的⾼度变为0。只需对⽗元素触发BFC，如设置溢出隐藏
- 决margin的重叠问题：BFC是⼀个独⽴的区域，内部的元素不受外部影响，将两个元素都设为BFC，就解决了margin重叠的问题，如两个p标签之间的margin有重叠：在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC
- 创建⾃适应两栏布局：左侧设置 float:left ，右侧设置 overflow: hidden 。这样右边就触发了BFC，BFC的区域不会与浮动元素发⽣重叠，所以两侧就不会发⽣重叠