盒子模型

Posted 2020-09-22

CSS+DIV

将数据封装到div中，页面中都是有很多div组成的，通过css布局(通过css属性布局)完成这些div位置的存放，一个div就是一个盒子。

边框 　　border:{

　　　　　　--left

　　　　　　--right

　　　　　　--top

　　　　　　--bottom

　　　　};

#div_1{

　　　　border-top:1px solid #ccc;

　　　　border-bottom:1px dashed #ccc;

　　　　border-right:1px dotted #ccc;

　　　　border-left:1px double #ccc;

};

solid:实线

dashed:虚线

dotted:点线

double:双线

 

内边距/内填充

属性：padding{

　　　　　　--top

　　　　　　--bottom

　　　　　　--right

　　　　　　--left

};

padding:20px 20px 20px 20px;

 

外边距

margin 属性{

　　　　　　--top

　　　　　　--bottom

　　　　　　--right

　　　　　　--left

};

margin:20px 20px 20px 20px

在div中，如果margin是0,px，为什么还要空白?那空白就是body本身距离浏览器边框的距离。

所以要设置body{margin:0px};

浏览器解析body的方式不同，造成边宽边窄不同。