3选择器2盒模型

• 选择器

  1. 伪类选择器（见01-link.html）
     :link
     :visited
     :hover
     :active
     :focus
     注意：
     如果需要给超链接设置四种状态下的样式，必须按照以下顺序书写 :link :visited :hover :active
  2. 选择器优先级
     选择器的优先级看权重，值越大，优先级越高
     标签选择器 1
     类/伪类选择器 10
     id选择器 100
     特殊：
     1）后代选择器和子代选择器的权重由各个选择器权重累加得到
     例：
     span{}
     div h1 span{}
     2）群组选择器的权重分别计算，不进行累加
  3. 标签分类及嵌套
     1）块元素
     独占一行，不与其他元素共行；可以手动调整宽高,默认宽度跟父元素保持一致，默认高度由内容决定。例：body,h1,h2,h3,h4,h5,h6,p,div,ul,ol,li,table,form（table尺寸由内容决定）
     2）行内元素
     可以与其他元素共行，不能手动调整宽高，元素尺寸由内容决定。例：span,b,strong,lable,a
     3）行内块元素
     可以与其他元素共行显示；可以手动调宽高。例：img,input,button
     属性：vertical-align
     取值：top/middle/bottom
     作用：调整左右其他元素跟当前行内块元素的垂直对齐方式
     4）转换元素类型
     属性：display
     取值：block(块)/inline(行内)/inline-block(行内块)/none(隐藏)
     5）标签嵌套
     1. 块元素中可以嵌套添加任意类型的元素
     注意：p元素只能嵌套行内或行内块元素
     2. 行内元素中尽量只嵌套行内或行内块元素

• 盒模型

  1. 尺寸单位和颜色表示
     1）尺寸
     px : 像素单位
     % : 百分比单位，默认参照父元素相关属性值进行计算
     em : 参照父元素的字体大小计算，默认1em=16px
     2）颜色表示
     1. 英文单词
     2. rgb(r,g,b)通过三原色设置颜色，每一种颜色取值0~255
        例：
        red rgb(255,0,0)
        black rgb(0,0,0)
        white rgb(255,255,255)
     3. rgba(r,g,b,alpha)三原色取值0~255，alpha表示透明度，取值0(透明)~1(不透明)
     4. 十六进制
        以#为前缀
        1）每两位为一组，代表一种三原色，需6位，每一位取值0~9,a~f
        例：
        red #ff0000 rgb(255,0,0)
        2）使用三位字符表示三原色，取值0~9，a~f,浏览器会自动对每一位重复，扩充为长十六进制
        例：
        #000 #000000
        #fff #ffffff
        #f00
  2. 内容尺寸及溢出处理
     1）盒模型由内容框，边框，内边距，外边距组成，关系到元素在文档中的实际占位，影响页面布局。
     2）内容尺寸
     width/height:一般用于设置内容框的尺寸
     3）溢出
     元素的内容超出元素的尺寸时，称为溢出。默认溢出部分仍然可见，但是会影响文档中正常元素的显示。
     属性：overflow
     取值：
     visible(默认可见)
     hidden(隐藏)
     scroll(强制添加水平和垂直的滚动条)
     auto(自动在发生溢出的方向添加可用的滚动条)
  3. 边框
     1. 边框实现
        属性:border
        取值:width style color;
        使用:
        1. 边框样式必填
        2. 样式分为：
           solid 实线边框（重点）
           dashed 虚线边框
           dotted 点线边框
           double 双线边框
     2. 单边框实现
        属性：
        border-top 上边框
        border-bottom 下边框
        border-left 左边框
        border-right 右边框
        取值：width style color;
     3. 网页三角标制作
        1. 设置元素尺寸为0
        2. 统一设置四个方向透明边框
        3. 单独调整可见色