测牛学堂：软件测试学习入门知识之了解前端css布局css盒子模型一个网站的布局就是用多个盒子排列，嵌套组合而成的。盒子

一个网站的布局就是用多个盒子排列，嵌套组合而成的。盒子有自己的宽高，内外边距，边框。
网页中最常用的布局盒子标签就是div。

margin就是盒子的外边距。 margin的写法：

    #box{
      width:100px;
      height: 200px;
      border:1px solid #ccc;
      margin:10px 20px 30px 40px;
    }

如果是写4个像素，分别表示上，右，下，左四个方向的外边距。
如果是写两个 margin：10px 10px 则第一个表示上下，第二个表示左右
margin还可以用百分比或者auto，auto表示自动分配。 margin也可以单独设置：

marign-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;

盒子中文本和边框之间的距离就是padding内边距。
内边距是影响宽高的。如果你一个盒子设置的width是100px，padding给10px，因为也是上下左右都加了10px，所以在width上，是左右各增加了10px；整体div的宽度是120px
padding的语法跟margin是一模一样的。

所谓的浮动布局，就是利用css中的float属性，进行网页布局。
float一共有两个属性值，一个是left左浮动，一个是right右浮动。 div是块便签，就是它会独占一行，所以盒子的默认排列就是上下排列。
浮动可以让div脱离正常的文档流，左右排列。

    .one{
      width:100px;
      height: 200px;
      background-color: red;
      float: left;
    }