1、选择器
id选择器 #
class选择器 .
标签选择器
通配符 *
属性选择器 []
父子选择器/派生选择器
直接子元素选择器 >
并列选择器(多个选择器同时修饰,并且不加空格)
分组选择器
2、权重
权重值(256进制)
!important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
权重计算:权重值相加
Infinity+1>Infinity
3、盒模型:
4、层模型
position: absolute、relative、fixed、sticky
absolute特点:
1、脱离原来位置进行定位;
2、相对于最近的父级定位元素进行定位,如果没有则相对于文档边框进行定位。
relative特点:
1、保留原来位置进行定位;
2、相对于父级元素进行定位,无论是否时定位元素。
使用原则:relative作为标杆基准,用absolute进行元素定位。
5、浮动模型:
1.浮动元素产生了浮动流
1)所有产生了浮动流的元素,块级元素看不到他们
2)产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素
触发bfc(Block Formatting Content)块级格式化上下文条件:
满足下面任一条件即可
浮动元素 float属性值为除了none以外的值
绝对定位元素 position 为 absolute、fixed
display 为inline-blocks,table-cells,table-captions
overflow 为 hidden,auto,scroll
注意:能清楚浮动的必须是块级元素
6、伪元素:
特点:
1)任何一个标签在创建时就产生伪元素,可以通过css样式将其选中
2)默认就是行级元素,必须有一个content属性
利用伪元素清除浮动。
注意:
1、凡是设置position;absolute、float:left/right,系统内部自动将元素转换成inline-block,行级块元素不设置宽高,则有内容撑开。
2、字体在容器的垂直中间,设置行高line-height等于容器高度即可。
3、凡是有inline的都可以叫文本元素,符合文本元素的特性,能被文字分隔符进行分割。
4、一个行级块元素中如果没有文字,元素外边有文字,则与行级块元素底对齐,如果行级块元素里边有文本,则与里边文本底对齐。