CSS盒子模型的小知识

部分摘自

极客江南
链接：https://www.jianshu.com/p/34b6b5446a12
來源：简书
 

 

控制台的盒子

1.盒子的组成

盒模型宽度和高度

• 内容的宽度和高度

就是通过width/height属性设置的宽度和高度

• 元素的宽度和高度

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

高度 同理可证

规律

增加了padding/border之后元素的宽高也会发生变化
- 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

• 元素空间的宽度和高度

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距

高度 同理可证

 

2.边距

margin:20px 40px 80px 160px;
padding:20px 40px 80px 160px;
border:20px 40px 80px 160px;
都是  上、右、下、左 顺时针


margin:20px 40px 80px ;
padding:20px 40px 80px;
border:20px 40px 80px ;
上20、右40、下80、左40


margin:20px 40px;
padding:20px 40px;
border:20px 40px ;
上20、右40、下20、左40

3. margin-top问题

• 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

• 如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

• 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)

两个盒子的上下外边是重叠的以大的为准，其他左右关系都是叠加的

外边距合并现象

 

4.text-align:center;和margin:0 auto;区别

• text-align: center; 是设置盒子中存储的文字/图片水平居中

• margin:0 auto;是让盒子自己水平居中

5.box-sizing属性

• CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

• box-sizing取值

• content-box

• 元素的宽高 = 边框 + 内边距 + 内容宽高

• border-box

• 元素的宽高 = width/height的宽高

• 增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

<!--增加padding/border之后元素宽高会变大-->
<style>
.box1{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

<!--增加padding/border之后元素宽不会变大-->
<style>
.box1{
 box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

作者：极客江南
链接：https://www.jianshu.com/p/34b6b5446a12
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。