CSS3注意事项

 

CSS3注意事项

• 选择器：

  1. img：nth-child（数字）{ }；

  2. img：first-child{}/last-child{}

• 背景图片滚动background-attachment：

  1. fixed //背景图片固定

  2. scroll //背景图片滚动

• 鼠标样式设计cursor：

  1. crosshair //十字架形状

  2. pointer //小手形状

  3. text //文本形状（默认）

  4. wait //等待形状

  5. default //默认形状（不改变）

  6. help //帮助形状（带问号）

• 无序列表样式：

  1. ul{list-style-type:none/disc/circle/square/decime/lower-roman/upper-alpha; }

  2. 图片样式：

  3. 列表浮动clear：left/right/both（无东西）；

     //清除浮动，加在父div的最后一个子div

• 表单：

  1. 文本域固定大小：textarea{resize:none;}

• 边框：

  1. 边框合并：table{border-collapse:collapse;}

  2. 表格缝隙：border-spacing

• 定位：

  1. position：absolute/relative；

  2. 不同点：绝对定位释放原位置，相对定位不释放原位置

     绝对定位的坐标原点在页面左上角，相对定位在自己左上角

  相同点：都脱离文档流

  1. z-index：从0开始，文档流无Z轴

• div居中：

  1. 父div：position：（relative）

     子div：position：absolute

      

• 滚动条：

  1. overflow：scroll //xy轴都出现滚动条

     overflow：auto //自动

     overflow：hidden //超出部分隐藏

  2. display：

• 显示隐藏：

  1. display：none； //消失不占位

  2. visibility：visible/hidden； //消失占位

  3. display：block； //显示块标签

  4. display：inline //显示行标签

• 边框样式：

  1. 圆角border-radius： //值可为一个两个三个四个（左上角起逆时针旋转）

  2. 阴影box-shadow：右移 下移 模糊值 阴影延申值 阴影颜色 内阴影（inset）

  3. 图形border-image：来源路径

  4. 透明边框：border:1px solid #999 transprarent;

• 背景样式：

  1. 设置背景大小background-size:100% 100%; //100px *

  2. 设置边框位置background-origin：padding-box/border-box/content-box

• 文本样式：

  1. text-shadow：h-shadow v-shadow blur color

  2. word-break:break-all //换行（不考虑英文单词）

  3. word-wrap:break-word //单词换行

• 2D样式：

  1. 角度transform：rotate（70deg）； //坐标系根据本图的左上角

  2. 移动transform：translate（300px 300px）；

  3. 比例transform：scale（2，3）：

• 3D样式：

  1. 过渡动画：trasition：trsnsform/width/height 2s

  2. rotateX(30deg) rotateY(30deg)

• 分栏：

  1. 分栏数列：column-count：3

  2. 间隔距离：column-gap：30px

  3. 栏的宽度：column-rule：4px solid #ddd

  4. 注：浏览器不兼容，火狐：-moz- 谷歌：-webkit-

      

• 轮廓样式：

  1. 轮廓outline：2px solid red //不属于div

  2. 间距outline：offeset

• 字体：

  1. @font-face

     {

     ​ font-family：fzm；

     src：url（’fzm.otf‘）

     }

     *{font-family:fzm}