伪元素 伪类 背景图片 图片精灵 边框 盒模型 浮动布局 长度单位

伪类
1.hover 当鼠标悬停时触发
2.visited a标签专用 表示访问过的元素
3.focus 当元素成为焦点时触发
4.active 当元素被鼠标按下时触发
5.first-letter 元素内容的第一个字
6.first-line 元素内容的第一行
伪元素
1.before 前缀伪元素 为元素内容添加一个前缀
2.after 后缀伪元素 为元素内容添加一个后缀

background-image 设置元素的背景图片
background-repeat 设置背景图片是否重复显示 no-repeat 不重复显示
background-size:cover 较短的一边平铺 另一边等比例缩放
background-size:contain 较长的一边平铺 另一边等比例缩放

图片精灵:可以将很多小图片整合成一张大图片,
图片精灵的作用
采用图片精灵可以减少页面资源的请求次数,提高页面的加载速度

边框 圆角

复合样式 boder : 颜色 线宽 什么线
solid 实线 dashed虚线 dotted 点线 double 双实线
boder-radius 设置边框的圆角半径 50% 圆体

盒模型

标签元素从里到外分为四个部分：内容盒子(content-box) , 内间距盒子(padding-box), 边框盒子(border-box), 外边距盒子(margin)*/

外边距重叠 优先保留最大值

浮动布局

float 设置元素使用浮动布局
脱离原有的文档流 参与浮动文档流
cursor:pointer 鼠标样式 悬停时候为拇指状态
使用浮动布局 必须要在最后一个元素的地方清除浮动
clear:both 或者再去其父元素后缀元素添加为空 添加clear:both清楚浮动
*

长度单位

px 表示像素 1px相当于屏幕上一个最小的显示单元
em表示当前元素的父元素的大小
rem表示跟元素的字体大小
vw 1vw表示浏览器窗口宽度的1%
vh 1vh表示浏览器窗口高度的1%