CSS基础学习——盒子模型

一.盒子模型

    1》网页布局的本质

    CSS基础学习——盒子模型_第1张图片

   2》盒子的组成

      

  3》边框  Border

       组成:宽度,样式,颜色,其实也可以简写,且没有顺序

       

       

       边框也可以简写,同时也可以同时设置四条边框的样式

      

4》表格细线边框

     boder-collapse:collapse      //相邻单元格合并

5》盒子模型之内边框

     CSS基础学习——盒子模型_第2张图片

     padding简写

     CSS基础学习——盒子模型_第3张图片

     注意:他会撑大盒子,如果不想影响盒子大小,盒子大小减去内边距设置盒子大小

6》盒子外边距

    CSS基础学习——盒子模型_第4张图片

    应用

     CSS基础学习——盒子模型_第5张图片

               

 7》外边距合并

     CSS基础学习——盒子模型_第6张图片

 8》清除内外边距

     CSS基础学习——盒子模型_第7张图片

 二. 盒子圆角边框

      在CSS3中新增了圆角边框特性,可以将盒子边框变为圆角,盒子内切

     CSS基础学习——盒子模型_第8张图片

      length可为像素,也可为百分比,顺时针设置与margin方法一样

三. 盒子阴影

      box-shadow属性添加阴影

       CSS基础学习——盒子模型_第9张图片    

 

你可能感兴趣的:(CSS基础学习——盒子模型)