认识达内从这里开始

２新知识学习
２.1 浏览器默认文字大小
   ◆浏览器默认文字大小为16px
   ◆浏览器默认文字行高值为18px
   ◆行高=文字大小+2倍间距（文字上间距+文字下间距）
２.2行高作用
◆可以文字垂直居中
◆设置行高值为盒子高度即可

２.3行高单位
     ◆px, em，% ，不带单位

☞当给一个子元素单独设置行高的时候，最后子元素的行高值：
行高单位        行高值        最后行高值
px        Line-height:20px        行高值=设置的行高值
em        Line-height:2em        行高值=设置的行高值*文字大小
%        Line-height:20%        行高值=设置的行高值*文字大小
不带单位        Line-height:2        行高值=设置的行高值*文字大小

☞给父元素设置行高值，子元素的行高为：
行高单位        行高值        最后行高值
px        Line-height:20px        行高值=父元素设置的行高值（行高可继承）
em        Line-height:2em        行高值=父元素设置的行高值*父元素文字大小
%        Line-height:200%        行高值=父元素设置的行高值*父元素文字大小
不带单位        Line-height:2        行高值=父元素设置的行高值*子元素文字大小

注意：以后凡是涉及到有关行高或者文字大小，单位都设置为px最好。
３盒子模型（box）
３.1 盒子的组成
◆border    盒子的边框
◆padding   内边距（内容距离边框之间的距离）
◆margin    外边距（盒子与盒子之间的距离）
   
        
３.2 盒子模型的作用
      ◆用来进行网页布局
      ◆网页布局其实就是在页面中画盒子
３.3 Border 边框
      ☞border-width:  边框的宽度
☞border-color:   边框的颜色
☞border-style:         边框的样式
◆border-style: solid;    实线边框
◆border-style:dotted;    点线
◆border-style:dashed;    虚线
   ☞border的其他几种写法
◆border-top-color
◆border-left-color
   ◆border-right-color
   ◆border-bottom-color:

   ☞border属性联写
       border:red 2px solid;
      
◆border属性联写中可以没有border-color 和border-width
◆属性之间的顺序可以调换
             
   ３.5边框补充
☞取消表单控件中默认的边框
border: 0  none;

      ☞去掉表单控件的轮廓线
           outline-style: none;
        
点击文字获取到对应的输入框
<lable for="username">用户名：</lable>
<input type="text" class="username" id="username"></input>

☞表格边框的合并
border-collapse:collapse ;
table{
width:300px;
height:300px;
}
table,td{
border :1px solid red;

border-collapse:collapse;
}
３.6内边距（padding）


☞padding属性联写：
Padding: 10px    内容距离盒子上，右，下，左四个边框的距离分别为10px;
Padding: 10px  20px ;   内容距离盒子上，下10px  左右20px;
Padding: 10px  20px  30px     内容距离盒子上10px,左右20px, 下30px
                 Padding: 10px  20px  30px  40px   上 10px  右 20px   下30px  左40px

３.7盒子大小问题
   ☞border会影响盒子大小
   ☞padding值也会影响盒子大小
   ☞页面中盒子真正大小计算公式：
       以宽度为例：
页面盒子宽度=设置的宽度值+左右边框+左右内边距

     注意：
    如果一个盒子有宽度或者高度，并且设置了边框或者内边距。一定要在原来设置的宽度或者高度的基础上减去相应的值。

*{
    padding:0;
    margin:0;

}
ul{
    padding:0;
}
注意：
  当两个块级元素发生嵌套关系的时候，如果子盒子没有设置宽度，那么在父元素宽度范围内，给子盒子设置padding值，不会影响子盒子大小。
  
  .one{
    width:300px;
    height:100px;
    background-color:pink;
  
  }
  .two{
    height:50px;
    background-color:green;
    padding-left:10px;
  
  }


３.8外边距(margin)  
     ☞用来设置盒子与盒子之间的距离
     margin-top:  上外边距
     margin-bottom:  下外边距
     margin-left:   左外边距
     margin-right:   右外边距

☞属性联写
margin: 10px;     上  ，  右  ，下， 左为 10px
margin: 10px  20px;  上下10px   左右  20px
margin: 10px   20px   30px    上10px   左右  20px   
下 30px
margin: 10px   20px   30px  40px   上，右，下，左


       ☞外边距问题
◆垂直外边距合并（特点），以最大值为准。
注释：当两个盒子垂直显示的时候，如果都设置margin值。那么垂直方向以最大值为准。

  ◆外边距塌陷
       ☞首先盒子与盒子之间属于嵌套关系
       ☞解决方式
  ■给父盒子添加border值
  ■给父盒子添加 overflow: hidden;
   overflow:hidden:  触发元素的bfc(格式化上下文)