盒模型
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的方式不同,造成边宽边窄不同。