CSS盒子

2016/10/16
CSS引用：⑴内联样式
         ⑵行内样
         ⑶链接，导入，外部样式：<link type="text/css" rel="stylesheet" hrdf="(css地址)css/style.css">
         引用的顺序：就近原则，样式具有继承性；行内>内联>外部
CSS盒子模型：见图；
             1.padding（内边距）：默认：上右下左；
             2.border（边框）：（border：border-width || border-style || border-color；）
                      常用属性：①border-width：2px（边框宽度）
                                ②border-color：#fff（边框颜色）
                                ③border-radius：5px（圆角边框）
                                ④border-shadow：（边框阴影）
                                ⑤border-image：（边框图片）
             3.margin（外边距）：围绕在边框的区域的空白区域
CSS布局：
1.CSS重置①在工作中尽量不要使用，影响页面性能；
              *{ margin 0px；
                padding：0px；/*清除浏览器默认padding和margin*/ 
               }
             一般使用
          body{ margin 0px；
                padding：0px；/*清除浏览器默认padding和margin*/
                font-size：12px；             
               }

         ②ul和ol：设置无小圆点： ul，ol{
                                           list-style：none；
                                          }
         ③a的下划线消失：a{
                            text-decoration：none； 
                            }
         ④图片没有边框：img{
                             border：none；
                             }
2.块元素和内嵌元素
       块元素：
            特性：（1）默认占领一行
                  （2）没有宽度时，也是占领一行；
            常用：div，p，h1-h6，ol，ul，dl
       内嵌元素（行内元素，内联元素）：
            特性：（1）同行显示
                  （2）代码换行，会被解析；不支持宽高，padding和margin的上下；
       块元素和内嵌元素转化问题：（1）"display：block"使内嵌元素拥有块元素的特性
                                （2）"display：inline"使块元素拥有内嵌元素的特性

转载于:https://my.oschina.net/suon/blog/761194