CSS盒模型

blog.csdn.net/qq_37899792…

盒模型有哪几部分构成盒模型Box Model：描述网页元素布局。由四个部分构成： 1.内容区域content：盒子的内容 2.内边距padding：清除内容周围的区域，内边距是透明的 3.边框border：围绕在内边距和内容外的边框 4.外边距margin：清除边框外的区域，外边框是透明的

margin与padding设置不同个数的值，分别代表着什么意思 blog.csdn.net/u013245591/… margin和padding可以带1～4个参数，顺序为上右下左，顺时针。

margin:20px;/*上下左右各20px */
margin:20px 40px;/*上下20px 左右40px */
margin:20px 40px 60px;/*上20px 左右40px 下60px*/
margin:20px 40px 60px 80px;/*上20px 右40px 下60px 左80px*/

标准盒模型和怪异盒模型是什么意思，两者之间有什么区别，怎样相互转换标准盒模型（W3C标准盒模型）：content部分不包含其他部分，width、height指content的宽度高度。怪异盒模型（IE盒模型）：content部分包括border和padding，width、height指content+border+padding的宽度高度。

转换：
```
box-sizing:content-box/*W3C*/
box-sizing:border-box/*IE*/
```

什么是外边距塌陷，如何解决外边距塌陷外边距塌陷/外边距重叠：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。不同块元素的上下边距重叠到一起了。 三种情况 1.同一层相邻元素：会选择最大的边界范围

<style>
#box1{
    width: 200px;
    height: 200px;
    background: lemonchiffon;
    margin-bottom: 50px;
}
#box2{
    width: 200px;
    height: 200px;
    background: lightcoral;
    margin-top:100px ;
}
</style>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

解决方法：给后一个元素添加float

2.没有内容将父元素和子元素分开

<style>
#box1{
    width: 200px;
    height:200px;
    background:lightseagreen;
}
#box2{
    width: 100px;
    height:100px;
    background:darkgoldenrod;
    margin-top:50px ;
}
</style>
<body>
    <div id="box1">
        <p id="box2"></p>
    </div>
</body>

解决方法：方法一给父元素添加overflow:hidden 只适用于子元素高度➕外边框小于父元素高度，否则子元素会被隐藏。

<style>
#box1{
   width: 200px;
   height:200px;
   background:lightseagreen;
   /* 添加 */
   overflow:hidden;
}
#box2{
   width: 100px;
   height:100px;
   background:darkgoldenrod;
   margin-top:50px ;
}
</style>
<body>
   <div id="box1">
       <p id="box2"></p>
   </div>
</body>

方法二给父元素添加边框border 外边框有了边框的间距，但多出来没有必要的边框

<style>
#box1{
   width: 200px;
   height:200px;
   background:lightseagreen;
   /* 添加 */
   border:1px solid lightseagreen;
}
#box2{
   width: 100px;
   height:100px;
   background:darkgoldenrod;
   margin-top:50px ;
}
</style>
<body>
   <div id="box1">
       <p id="box2"></p>
   </div>
</body>

方法三给父元素或子级设置display:inline-block 行内块元素不会外边距塌陷

<style>
#box1{
   width: 200px;
   height:200px;
   background:lightseagreen;
   /* 添加 */
   display:inline-block;
}
#box2{
   width: 100px;
   height:100px;
   background:darkgoldenrod;
   margin-top:50px ;
   /* display:inline-block; */
}
</style>
<body>
   <div id="box1">
       <p id="box2"></p>
   </div>
</body>

方法四给父级或子级设置float

<style>
#box1{
   width: 200px;
   height:200px;
   background:lightseagreen;
   /* 添加 */
   float:left;
}
#box2{
   width: 100px;
   height:100px;
   background:darkgoldenrod;
   margin-top:50px ;
   /* float:left; */
}
</style>
<body>
   <div id="box1">
       <p id="box2"></p>
   </div>
</body>

方法五给父级或子级设置position:absolute

<style>
#box1{
   width: 200px;
   height:200px;
   background:lightseagreen;
   /* 添加 */
   position:absolute;
}
#box2{
   width: 100px;
   height:100px;
   background:darkgoldenrod;
   margin-top:50px ;
   /* position:absolute; */
}
</style>
<body>
   <div id="box1">
       <p id="box2"></p>
   </div>
</body>

方法六给父级元素添加padding

<style>
#box1{
   width: 200px;
   height:200px;
   background:lightseagreen;
   /* 添加 */
   padding:10px;
}
#box2{
   width: 100px;
   height:100px;
   background:darkgoldenrod;
   margin-top:50px ;
}
</style>
<body>
   <div id="box1">
       <p id="box2"></p>
   </div>
</body>

3.空的块级元素

<style>

#box1{
    width: 200px;
    height:200px;
    background:lightseagreen;
    margin-bottom:20px ;
}
#box2{
    margin-top: 20px;
    margin-bottom:20px ;
}
#box3{
    width: 200px;
    height:50px;
    background:darkgoldenrod;
    margin-top:20px ;
}  
</style>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

中间的间隔不会叠加，会取最大的值。 外边距重叠的计算： 两个正数取最大的；两个负数取绝对值最大的；一正一负取和。

如何给盒子设置圆角，圆角属性设置不同个数的值表示的是什么意思 cloud.tencent.com/developer/a…> 设置圆角：border-radius:像素值/百分比; 设置一个值：应用于所有角；设置两个值：第一个是左上角和右下角，第二个是右上角和左下角；设置三个值：第一个是左上角，第二个是右上角和左下角，第三个是右下角；设置四个值，依次对应左上角、右上角、右下角、左下角 border-radius:10px 0 0 10px：只有左上角和左下角为半径10px的圆角