1.伪元素选择器 1.:before 或 ::before 匹配某元素的内容之前 2.:after 或者 ::after 匹配某元素的内容区域之后 3.内容生成的属性 属性：content 取值： 1.字符串：纯文本 使用的话，要用""引起来 content:“插入文本” 2.图像：url() content:url(xxx.jpg) 2.解决的问题 1.浮动元素的父元素高度
.clear:after{ content:""; display:bolck; clear:both; }2.外边距溢出
#d2:before{ content:""; display:table; }1.转换 转换就是改变元素在页面中大小，位置，形状，角度的一种方式 转换分为 2d转换 和 3d转换 2d转换：使元素在x轴和y轴进行转换 3d转换：增加了z轴进行转换 1.转换的属性 1.转换属性 属性:transform 取值 1.transform-functions 一组转换函数，表示一个或多个转换函数，多个的话用空格隔开 2.转换的原点 属性 transparent-origin 默认：在元素的中心处 取值： 最少两个值，最多三个值 两个值： 值1x 值2y 三个值： 值1x 值2y 值3z 2.2D转换 1.2D位移 2D位移就是改变元素在x轴和 y轴上的位置 1.语法 属性 transform 函数： translate(x) 取值为正右移 为负左移 translate(y) 取值为正下移 为负上移 translateX 改变在x轴上的位置 translateY 改变在y轴上的位置 2.2D缩放 属性：transform 函数 scale(value) value为等比缩放倍数，如果只给一个值，x和y轴是等比缩放 取值： 默认值为1，即原始大小 缩小：0-1间的小数 放大：大于1的数值 负值：以旋转180度效果显示 scale(x,y) 3.2D旋转 属性：transform 函数：rotate(旋转角度deg) 取值为正顺时针 负值为逆时针
注意： 1.旋转 原点 转换原点位置不同，转换效果也不同 2.旋转时连同坐标轴也跟着改变4.2D的倾斜 改变元素在页面中的形状，以原点为中心，沿x轴或者y轴产生的倾斜角度 1.语法 属性：transform 函数： skew(xdeg) 像横向产生倾斜效果，实际改变的是y轴的倾斜角度 值为正，y轴按逆时针旋转 为负则顺时针旋转 slew(xdeg,ydeg) x：横向倾斜 y:纵向倾斜 值为正，x轴顺时针角度倾斜 值为负按逆时针角度倾斜 3.3D转换 1.3D 转换属性 属性 perspective 模拟 人眼 到 3D变换物体 之间的距离 属性添加在 3D 转换元素的父元素上 2.3D旋转 属性 transform 取值 1.rotatex(ndeg); 2.rotatey(ndeg); 3.rotatez(ndeg); 4.rotate3D(x,y,z,ndeg); x,y,z取值为零说明该轴不参加旋转 1为参加旋转 先旋转再位移 3.3D位移 3d位移就是 改变元素在页面中的上中下左右 1.语法 1. transform-style 属性 取值： 1.flat 默认值，不保留元素的3d位置 只能上下左右的改动位置 2.preserve-3d 保留子元素的3d位置 2.transform属性 取值： translateZ(z); translate3D(x,y,z);
