【day05】css

一.盒模型(BoxModel)
 1.width 宽度
 2.height 高度
  说明: 块元素和有宽高属性的标记(img,input)
            能设置宽度和高度，而行元素不能设置宽高
 3.padding ：内边距,内容到边框的距离
   
   padding-top:上内边距
   padding-right:右内边距
   padding-bottom:下内边距
   padding-left:左内边距
  缩写形式:
   padding:value; 四个方位相同值
   padding:value value; 上下值  左右值
   padding:value value value;  
                        上值  左右值  下值
   padding:value value value value;
                       上值  右值  下值  左值
    说明: padding只有正值， 并且设置padding
              可以撑大背景盒子
    
 4.margin ：外边距,盒子外围的距离
   margin-top:上外边距
   margin-right:右外边距
   margin-bottom:下外边距
   margin-left:左外边距
  缩写形式:
   margin:value; 四个方位相同值
   margin:value value; 上下值  左右值
   margin:value value value;  
                        上值  左右值  下值
   margin:value value value value;
                       上值  右值  下值  左值
   说明:
    a.margin有  正值，负值,auto
    b.margin:0 auto;盒子的水平居中
    c.清除块元素空隙(全局样式)
      margin:0;
      padding:0;
    d.margin冲突,上下取大值，左右相加
    e.嵌套元素，给子元素添加上下margin
             会将上下margin值传递给父元素
             
  5.border 边框
    
    border-top-上边框宽度
    border-top-style:上边框样式
      (值:solid 实线,dashed虚线
         dotted 点线,double双线)
    border-top-color:上边框颜色
    
    border-right-右边框宽度
    border-right-style:右边框样式
    border-right-color:右边框颜色
    
    border-bottom-下边框宽度
    border-bottom-style:下边框样式
    border-bottom-color:下边框颜色
    
    border-left-左边框宽度
    border-left-style:左边框样式
    border-left-color:左边框颜色
    
   缩写形式1
    border-top:width style color;
    border-right:width style color;
    border-bottom:width style color;
    border-left:width style color;
 缩写形式2
    border-value;四个方向宽度
       border-value value;
              上下值  左右值
       border-value value value;
               上值  左右值 下值
       border-value value value value;
               上值  右值  下值  左值  
    border-style:value;四个方向样式
    border-color:value;四个方向颜色
   
      缩写形式3
    border:width style color;
        例如: border:1px solid #00f;
        
  6.盒模型总宽度计算:
    总宽度=左margin +左border+左padding
       + 盒子宽度 + 右padding +右border
       + 右margin
       
二.布局(Layout)
  (1)文档流布局(默认)
  (2)浮动布局
  (3)定位布局
三.浮动布局(Float)
  1.格式  float:left左浮动|
              right右浮动|
              none不浮动             
  2.浮动布局特性
    (1)浮动元素脱离文档流(不占位)
    (2)原理:无论是左浮动还是右浮动
       会靠在有边界的边框或会靠在另一个
       浮动盒子的后面才停止编辑。
    (3)浮动的块元素，如果没设置宽高,
            那跟文本一致的宽高（文档流块元
            素宽是父级的100%）
    (4)浮动的行元素能设置宽高(文档流行
           元素不能设置宽高)
    (5)浮动的元素对后面元素的影响是实现
               文本环绕
               
四.清除浮动（Clear）
  1. 格式: clear:both清除两边浮动|
                left清除左边浮动|
                right清除右边浮动
  2.高度塌陷
    (1)原理:子元素都浮动，而父元素没有设置高度
              那父元素的高度是零
    (2)解决方法
      a.
       .clear1{ clear:both;}
    
      b.万能清除(写在父元素上)
       .clear{
          zoom:1;  
       }
       .clear:after{
         content:".";
         display:block;
         clear:both;
         height:0;
         visiiblity:hidden;
       }
           说明:
        a.万能清除写在父元素上
        b.解决高度塌陷
        c.让版块间划分界限
      
   3.布局显示
      (1) display:none|
                  block块|
                  inline内联|
                  inline-block内联块
              说明:
          a. inline-block内联块:是块元素(能设宽高)
                             但是有行元素不折行的特性
          b.display:none 不占位隐藏
      (2) visibility:visible默认值|
                     hidden 隐藏
                  说明: visibility:hidden 占位隐藏