盒模型

Posted 2020-09-26

一。什么是盒模型
　　padding(内边距，一个盒子里的边距离内容的距离，上下左右)
　　margin(外边距，两个盒子之间的距离)
　　border（盒子的边框）
　　内填充，外边距，边框都有四个方向：如padding-top,padding-right，padding-bottom和padding-left，
　　　　　　　　　　　　　　　　　　　盒子模型里面的元素实际的高度加上padding-top,padding-bottom，
　　　　　　　　　　　　　　　　　　　实际宽度是元素宽度加上padding-right和padding-left。

二。盒模型-边框

　　盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
　　div{
    　　border:2px  solid  red;
　　}
　　上面是 border 代码的缩写形式，可以分开写：
　　div{
    　　border-width:2px;
   　　 border-style:solid;
    　　border-color:red;
　　}
　　注意：
　　1、border-style（边框样式）常见样式有：
　　dashed（虚线）| dotted（点线）| solid（实线）。

　　2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
　　border-color:#888;//前面的井号不要忘掉。

　　3、border-width（边框宽度）中的宽度也可以设置为：
　　thin | medium | thick（但不是很常用），最常还是用象素（px）。
　　

　　4.如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式，css 样式中允许只为一个方向的边框设置样式：
　　div{border-bottom:1px solid red;}
　　同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
　　border-top:1px solid red;
　　border-right:1px solid red; 
　　border-left:1px solid red;