CSS的三大特性：

• 层叠性：
  样式不冲突，不会层叠
  样式冲突，遵循就近原则，哪个样式离结构近执行哪个
• 继承性：
  恰当的使用继承可以简化代码，降低CSS样式复杂性
  子元素可以继承父元素的样式（text-、font-、line-这些元素开头的可以继承，以及color属性
• 优先级：
  选择器相同，执行层叠性
  选择器不同，则根据选择器权重执行
  选择器权重：!important > 行内样式 > ID选择器 > 类选择器，伪类选择器 > 元素选择器 > 继承或者 *
  权重叠加：如果是复合选择器，则会有权重叠加，需要重新计算

CSS盒子阴影：

语法：box-shadow:h-shadow v-shadow blur spread color inset;

CSS清除浮动：

• 为什么要清除浮动：
  父级没有高度
  子盒子浮动了
  影响下面的布局
  清除的方式：
  

CSS属性书写顺序：

1. 布局定位属性:display / position / float / clear / visibility / overflow (建议display第一个写，毕竟关系到模式)
2. 自身属性: width / height / margin / padding / border / background
3. 文本属性:color / font / text-decoration / text-align / vertical-align/
   white-space / break-word
4. 其他属性(CSS3 ) : content / cursor / border-radius / box-shadow /
   text-shadow / background:linear-gradient...

页面布局思路：

1. 必须确定页面的版心(可视区），我们测量可得知
2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置.页面布局第二准则
4. 制作HTML结构，遵循先有结构，后有样式的原则。结构永远最重要
5. 所以，先理清楚布局结构，再写代码尤为重要

CSS定位：

• 定位 = 定位模式 + 位偏移
• 定位模式：用于指定一个元素在文档中的定位方式
• 位偏移：决定该元素的最终位置
• 定位叠放次序：z-index
• 定位：position
  static：静态定位
  relative：相对定位
  absolute：绝对定位
  fixed：固定定位
  sticky：粘性定位
• 位偏移：
  top：顶端偏移量，定义元素相对于父元素上边线的距离
  bottom：底部偏移量，定义元素相对于父元素下边线的距离
  left：左侧偏移量，定义元素相对于父元素左边线的距离
  right：右侧底部量，定义元素相对于父元素右边线的距离
• 总结：

CSS显示/隐藏：

• display：隐藏元素后，不占有原来的位置
  display:none 隐藏
  dispaly:block 显示
• visibility：隐藏元素后，继续占有原来的位置
  visibility:visible 显示
  visibility:hidden 隐藏
• overflow：溢出部分做处理
  overflow:visible 不剪切内容也不显示滚动条
  overflow:hidden 不显示超出对象尺寸的内容，超出的部分隐藏掉
  overflow:scroll 不管是否超出对象尺寸，都显示滚动条
  overflow:auto 超出自动显示滚动条，不超出不显示滚动条

鼠标样式：

• a { cursor:pointer; }
  default：默认
  pointer：小手
  move：移动
  text：文本
  not-allowed：禁止

CSS用户界面样式：

• 轮廓线：outline
  input { outline : none; }
• 防止拖拽：resize
  textarea { resize: none; }
• 图片文字垂直居中：vertical-alige
  vertical-alige: baseline | top | middle | bottom
  baseline：默认，元素放置在父元素的基线上
  top：把元素的顶端与行中最高元素的顶端对齐
  middle：把此元素放置在父元素的中部
  bottom：把元素的底端与行中最低元素的底端对齐

• 单行溢出文字显示省略号

  • white-space：nowrap；强制一行显示
  • overflow：hidden；溢出隐藏
  • text-overflow：ellipsis；文字溢出用省略号显示

CSS清除浮动：

.clearfix:after{
    visibility:hidden;
    clear:both;
    display:block;
    content:".";
    height:0;
}
.clearfix{
    *zoom:1;
}

伪元素清除浮动：

.clearfix: before ,.clearfix:after {
    content : "";
    display:table;
 }
 .clearfix:after {
    clear :both;
 }