3. CSS-选择器 行高 盒模型

1. 选择器 

选择器优先级 : (权重)  !importan >  行内式 > ID选择器 > 类选择器 > 标签选择器  >  浏览器默认值

标签选择器  div  {样式:值;}

类选择器    .类名 {样式:值;}

ID选择器    #ID  {样式:值}

子代选择器  div > span  {样式:值;} 会改变直接子元素的样式

后代选择器  div span {样式:值;} 标签之间是嵌套关系

通配符选择器  *{样式:值;}

交集选择器  div.p{样式:值;}

并集选择器   div1,div2,div3 {样式:值;}

属性选择器   [title="name"]{样式:值;}

兄弟选择器:  div1+div2{样式:值;}

伪类选择器:   a:link{ }  未访问的效果

a:visited{ }   访问过的效果

a:hover{ }  鼠标移动到元素上

a:active{ }  选中的元素

a:focus { }  获取焦点

li:first-child{}

li:last-child{}

li:nth-child(2){}

2. css样式类型

外联式 

内嵌式

行内式（内联式）

3. 行高 line-height

   行高 = 文字大小+上间距+下间距 

行高单位  px   em   1 em = 16px

特点一 、 给单独的一个标签设置行高

           px:  设置的行高与文字字体大小无关

          em:  行高 =  设置的行高 * 文字大小

           百分比 :  行高 = 设置的行高 * 文字大小

            不带单位 :   行高 = 设置的行高 * 文字大小

特点二 、 给父元素设置行高 看子元素的行高情况

父 px:    子元素行高 = 父元素设置的行高值 (继承)

父 em :   子元素行高  = 父元素设置的行高值* 父元素的文字大小

父 百分比 : 子元素行高 = 父元素设置行高值 * 父元素文字大小

父不带单位 :  子元素行高 =  父元素设置行高值 * 子元素文字大小

---

4. 盒模型

margin :  移动盒子的位置(盒子整体)  |   外边距不会改变盒子大小

   margin-left       margin-right     margin-top    margin-bottom

  垂直外边距塌陷 解决:  给父元素设置边框  

                               给父元素设置: overflow:hidden;( 设置overflow:hidden，该属性值触发了元素的bfc(格式化上下文)

垂直外边距合并:  垂直方向上的外边距会以最大值为准

padding:  特点:  移动盒子中内容的位置   |  可以改变盒子大小  | 边框也可以改变盒子大小

属性连写:      padding :10px;   上下左右内边距都为10px  

                     padding: 10px  20px ;  上下为10px   左右为20px

                     padding :  10px  10px 10px 10px;   上 右 下 左 

---

border :  border-color 边框颜色   

               border-width: 10px ;

               border-radius  边框圆角

               border-style :    solid 实线  dashed 虚线    none 没有边框  dotted 边框为点

   属性连写:  border: 1px solid red ; 

                    border-top : 5px dashed yellow ;

去掉边框:  border:0 ;   border-style:0 none;

去掉表单中的 轮廓线:  outline-style: none ;

边框合并:  border-collapse:collapse; ( 该属性只适用于表格标签 )