盒模型（一）

比眉伴天荒 2021-10-01 01:48 302阅读 0赞

一。什么是盒模型
    　　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;

转载于:https://www.cnblogs.com/provenceH-H/p/7106733.html