一：关于position
- position属性的取值有：static | relative | absolute | fixed | sticky
- static（静态定位）：
- 无特殊定位，对象遵循正常文档流。top, right, left, bottom等属性不会被应用 - relative（相对定位）：
- 对象遵循正常文档流，但将依据top, right, left, bottom等属性在正常文档流中偏移位置； - 其后元素是依照top/left等生效之前的位置进行定位的； - 而其叠层通过z-index定义 - absolute（绝对定位）：
- 对象脱离正常文档流，使用top, right, left, bottom等属性进行绝对定位【依次向上级寻找，以找到的第一个position 非 static 的进行绝对定位】， - 其叠层通过z-index属性定义 - fixed（固定定位）：
- 对象脱离正常文档流，使用top, right, left, bottom等属性以****为参考点进行定位 - 当出现滚动条时，对象不会随之滚动， - 其叠层通过 z-index 属性定义
二: z-index
- 对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面
- 两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的
- 父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下
- 仅能在定位的元素（position为非static的）上生效
z-index失效的一些情况：
- 父标签position 属性为relative---->改为 position:absolute
- 问题标签无非static的position取值------>为其添加非static的position属性
- 问题标签含有浮动（float）属性----->去除浮动
三：浮动（float）
1：浮动产生的效果 参考链接：css 浮动
- 浮动 可以理解为让某个div 元素脱离标准流，漂浮于标准流之上
- 设置了float的div模型会脱离标准流，余下的div会按照HTML代码中的div顺序重新组成一个新的标准流（故可能出现覆盖的现象）
- 设置有float属性的div元素，会依照HTML代码中div的顺序找，如果它上一个元素也是浮动的话，那么会跟随在上一个元素的后边(放不下的话被挤去下一行)；如果上一个元素是标准流中元素，那么它的相对垂直位置不会发生改变，也就是说它的顶部总是和上一个的元素底部对齐
2：浮动产生的副作用
- 背景无法显示
- border边框不能撑开
- margin,padding无法应用
3：清除浮动的方式（父子嵌套div 的应用）
- 添加新的元素 、应用 clear：both；
- 父级div定义 overflow: auto
- 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）
.clearfix:after{
content:"";/*设置内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*将文本转为块级元素*/
visibility:hidden;/*将元素隐藏*/
clear:both;/*清除浮动*/
}
.clearfix{
zoom:1;/*为了兼容IE*/
}
- 使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
四：盒子模型
1：什么是盒子模型？
- 它包括 content，padding，border，margin四个属性
- 然后各自模型可分为两种，一种是IE盒子模型（怪异盒模型），一种是W3C盒子模型（标准盒子模型）
- 在标准盒子模型中，width和height指的是内容区域的宽度和高度，增加内边距，边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
- 在IE盒子模型（怪异盒模型）中，width 和 height 指的是content + border + padding 的宽度和高度
2：W3C盒子模型（标准盒子模型）和 IE盒子模型（怪异盒模型）这两种模式下如何解决样式的兼容问题？
- 尽量别给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素或者子元素
3：CSS3指定的盒子模型种类
- box-sizing 属性允许使用者以特定的方式匹配某个区域的特定内容
- box-sizing:content-box；宽高分别应用于元素的内容框，在宽度和高度之外绘制元素的内边距和边框
- box-sizing:border-box；为元素设定的宽，高 = content + padding + border；即为元素指定的任何内边距即边框都将在已设定的宽高内进行绘制
- box-sizing: inherit；// 规定应从父元素继承 box-sizing 属性的值
上述css3中关于box-sizing的使用可以发现：
- 该属性可以指定盒子模型的种类
- content-box 指定 W3C模型（标准盒模型）
- border-box 指定IE盒子模型（怪异盒模型）
五：水平 / 垂直 / 水平垂直居中
1：水平居中
文本水平居中:
text-align: center
块级元素水平居中
- margin: auto
- .parent {position: relative}
.child {position: absolute; left: 50%; transform: translateX(-50%) }
- .parent {display: flex; justify-content: center}
2：垂直居中
- 文本垂直居中----->line-height和height一致（只适合单文本的情况下）
- .parent{position: relative}
.child{position: absolute; top: 50%; transform: translateY(-50%) }
- .parent {display: flex; align-items: center} (align-items定义在交叉轴上的对齐方式)
3：水平垂直居中
- 文本元素----->text-align:center + line-gheight
- 不知父子宽高
1：.parent{
display:flex;
justify-content: cneter;
align-items:center
}
2：.parent {
position: relative;
}
.child{
position: absolute
top: 50%;
left: 50%
transform: translate(-50%,-50%);
}
- 已知父，子元素宽高
1：.parent {
width+height
position: relative;
}
.child {
width+height
position: absolute;
top: 0; left: 0; right: 0; bottom: 0
margin: auto
}
2: .parent {
width+height
position: relative;
}
.child {
width+height
position: absolute;
left: 50% ;
top: 50%
/* 子元素指定上，左的外边距为自己高，宽的一半即可 */
margin-left: -50px;
margin-top: -50px;
}
关于布局更详细可戳：CSS实现水平垂直居中的10种方式
六：伪类和伪元素
- 伪类：伪类对元素的分类是基于特征，而不是基于元素名或内容；特征无法通过DOM树直接获取【伪类选择器不存在于HTML文档，但是可以用CSS语法选择他们，并对其可以进行渲染和修饰】
- 伪元素：伪元素创造文档语言能够指定文档树意外的抽象；例如first-child访问第一个子元素【CSS伪元素用于向某些选择器设置特殊效果】
- 常见伪类：
- : hover 鼠标放上去悬浮的状态 - : focus 选择元素输入后具有焦点 - : first-child 选择第一个子元素 - : last-child 选择最后一个子元素 - ........等等等 - 常见伪元素：
- : ：firset-letter 将特殊样式添加至文本首字母 - : ：first-line 将特殊样式添加至文本首行 - :：bofore 在某元素之前插入内容 - :： last-child 在某元素之后插入内容 - ........等等等
![CSS预处理器——sass & less[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)