部分摘自
极客江南
链接: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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。