一. 浮动
1. 什么是浮动
浮动是指设置了浮动属性的标签会脱离标准流控制(脱标) 移动到指定位置 (脱标后的元素不在保留原来的位置)
作用: 图文环绕 页面布局
2. 浮动属性 float
float 属性定义在那个方向浮动
属性值:
Ⅰ. left 向左浮动
Ⅱ. right 向右浮动
Ⅲ. none 不浮动(默认值)
3. 浮动带来的影响
元素浮动后 脱离标准流 导致父元素高度塌陷 影响后续布局
4. 清浮动方法
❶. 给浮动元素的父元素固定高度 (不够灵活)
❷. 给浮动元素的最后加一个空 div 且标签不浮动 添加样式 clear : both; (代码冗余)
❸. 给浮动元素的父元素加 overflow 属性
❹. 给浮动元素的父元素添加 ::after 伪元素
.clearfix::after{
content: " "; // 必须有content属性
display: block; // 转换为块级
clear: both; // 清除浮动
}
.clearfix{
*zoom: 1; // 兼容 IE7-
}
5. 伪元素 ::表示
伪元素可以利用Css创建新的标签元素 从而简化HTML代码
选择符:
❶. ::before 在元素内部内容前面插入内容
❷. ::after 在元素内部内容后面插入内容
语法: 元素 ::before{ }
注意:
Ⅰ. before 和 after 创建的元素属于行内元素
Ⅱ. 新创建的元素在结构里找不到 所以称为伪元素
Ⅲ. before 和 after 必须有content 属性
Ⅳ. 伪元素选择器和标签选择一样 权重为1
二. Css三大特性
1. Css层叠性
❶. 样式冲突 遵循就近原则
❷. 样式不冲突 不会叠加
2. Css继承性
子元素会继承父元素的部分样式
如 text- font- line- color等
3. Css优先级
选择器的权重越大 样式优先级越高
权重:
❶. ! important 无穷大
❷. 行内样式 1000
❸. id选择器 100
❹. 类/伪类选择器 10
❺. 标签选择器 1
❻. 通配符/继承性 0
注意:
Ⅰ. ! important > 行内 > id > 类/伪类 > 标签 > 通配符 > 浏览器默认 > 继承
Ⅱ. 继承权重是0 如该元素没有选中 不管父元素权重有多高 其权重都是0
Ⅲ. 权重会叠加 但不会进位
Ⅳ. 权重相同时 遵循就近原则
三. Css元素显示模式
元素显示模式: 以什么方式进行显示
元素(标签)的分类:
Ⅰ. 块级元素
Ⅱ. 行内元素
Ⅲ. 行内块元素
1. 块级元素
div h1~h6 ul ol dl form dt dd table tr
特点:
Ⅰ. 独占一行
Ⅱ. 可以设置宽 高 内外边距
Ⅲ. 默认宽度是父级宽度100%
注意: p h1~h6 放文字或行内元素 不能放其他块级元素
2. 行内元素
a strong b em i del s ins u span
特点:
Ⅰ. 一行可以有多个
Ⅱ. 设置宽 高无效
Ⅲ. 默认宽度是内容本身宽度
注意: a链接里可以放块级元素 链接里不能再放链接
3. 行内块元素
img input
特点:
Ⅰ. 一行可以有多个
Ⅱ. 可以设置宽 高
Ⅲ. 默认宽度是内容本身宽度
Ⅳ. 中间有间隙 可以设置上下左右内外边距
4. 元素显示模式转换 display
Ⅰ. 块转行内 display: inline;
Ⅱ. 行内转块 display: block;
Ⅲ. 块 行内转行内块 display: inline - block;
5. 外边距塌陷
Ⅰ. 给父级元素设置边框或内边距
Ⅱ. 给父元素添加 overflow: hidden; 属性 触发BFC
