CSS学习笔记（三）

颜色
表示方式：red ；#f00 ；rgb(255,0,0) ；rgba(255,0,0,0.5) 带透明度的色彩值
0是透明，1是不透明
opacity: 50%;透明度
圆角

• border-radius:圆角
• border-radius：值
  值：a 表示四角都为相同的圆角状态
  值：a b 表示 左上，右下都为a，右上，左下都为b
  值：a b c 表示左上为a 右上和左下为b 右下为c
  值：a b c d 依次表示 左上 右上 右下 左下

值：50% 表示圆或椭圆
鼠标手状

 cursor: pointer; /*鼠标图标成手状*/

定位
所有的定位和top right bottom left 联和一起起作用

• position: relative/absolute/fixed;
  relative 相对定位，以默认位置为参考点进行移动，
  absolute 绝对定位，以最近定位元素为参考点进行移动
  fixed 固定定位
• 水平居中
  position: absolute;
  right:0;
  left:0;

margin:auto;

盒子模型
宽：内容宽+border+margin+padding

box-sizing: border-box;

宽：width+margin (宽＝内容宽+border+padding)

图片格式： gif jpg png webp
雪碧图
对于一张图进行各自分开为独立小图
left 从左往右是正值，从右往左是负值
top 从上往下是正值，从下往上是负值
字体图标

<link rel="stylesheet" href="iconfont.css">

字体图标可用和文字类似的方式修改颜色等

常见书写技巧

• overflow:hidden; 溢出隐藏
• z-index=-1; 图层隐藏
• :first-of-type 第一个同类型对象
  :nth-of-type(n) 第n个同类型对象 n=数字 odd（奇数行） even（偶数行）
• 去外边框线
  input{
  outline:none;
  }