CSS—框模型

不念不忘少年蓝@ 2022-06-17 09:20 172阅读 0赞

# css样式—–框模型 #

DIV盒子模型：< div >

div主要用来装其他元素，单独对div进行css样式或布局，默认占据一行，没有给宽度会撑开这一行，与p标签相同

span标签：<span>   </span>
    
            一般用于文字上的样式                ps：应用样式来添加效果。

#### 边距（补白） ####

外边距：margin:0           设置外面的4条外边距【外边距，空白或空边白】     
    内边距：padding：0         设置内部的4个方向的内边距【内边距也叫填充（内补白）】
    
    值：接受百分比值 绝对值像素（长度） 禁止负数值
    值：可接受四个值，上右下左       margin-top：顶边距      margin-right：右边距        
    
    
    内边距、边框、和外边距都是可选的、默认为0
    margin - padding每个浏览器初始不一，设为0 来解决兼容性问题
    *{margin：0；padding：0；}

#### border边框 ####

边框：border：5px;      给内边距的边缘添加边框【边框会把盒子撑大】
    
    border-top-width:   顶端边框宽度
    border-right-width: 右端边框宽度
    width：  图文混排的宽度
    height:  图文混排的高度
    
    border-color：设置边框的颜色（必须有边框）
    border-style：边框风格:dashed虚线、dotted点状、solid实线、double双线
    border-top：上边框              border-right：右边框
    border-bottom：下边框           border-left：左边框
    
    简写：border：1px solid red；

#### 边距重合和折叠 ####

外边距重合：【垂直并列重合】
    外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    
    边距折叠：
    当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），
    它们的上和/或下外边距也会发生合并。
    
    1.父盒子装子盒子,子盒子会与父盒子的上下边距重合，在父盒子添加溢出隐藏样式
    或者以1像素透明边框隔断他们
    2.当父盒子没有給【宽高】（width、height）的时候会被子元素撑开
    3.父元素始终包裹着子元素
    
    
    例一：外边距垂直方向重合：
    
    解决办法：外部再套用一个div块，然后进行设置
              .box {
                  /*解决边距重合*/
                  overflow:hidden;
              } 
            或者在该级进行添加一个透明（transparent）边框
            border:1px solid transparent;
    
    
    例二：子元素使用垂直方向的外边距：
    解决办法：
    <style >
                .box1 {
                    width:100px;
                    height: 100px;
                    background-color: skyblue;
                    /*在父级进行添加*/
                    （方法1）overflow:hidden;
                }
                .box2 {
                    width: 50px;
                    height: 50px;
                    background:green;
                    margin-top:20px;
                    /*或者在该级进行添加一个透明（transparent）边框*/
                    border:1px solid transparent;
                }
            </style>
        </head>
    <body>
        <div class="box1">
            <div class="box2"></div>    
        </div>

**边距合并**

![边距合并][SouthEast]

#### 项目符号、编号属性、层属性 ####

![项目符号、编号属性、层属性][SouthEast 1]

[SouthEast]: /images/20220617/d3b8b2ebf95d4447b1e571f131fd5200.png
[SouthEast 1]: /images/20220617/deaa6268446640528b9a8008f3576042.png