盒模型的组成:内容区、内填充(补白)、边框、外边距。 |
1.内填充(padding)
内填充,长在内容和盒子之间,在盒子内容 |
控制子元素在父元素中的位置,会把盒子撑大 |
如果想让盒子保持原有大小,需要在原有的宽高上减掉padding |
如果没有设置固定宽高,不需要减 |
不能设置负值,不会对背景图造成影响 |
可以单独设置一边(padding-left \ right \ top \ bottom) |
padding:30px; 四周 |
padding:10px 30px; 上下、左右 |
padding:10px 30px 50px; 上、左右、下 |
padding:10px 30px 50px 100px; 上、右、下、左 |
2.外边距(margin)
长在元素之外 |
控制同级元素之间的位置关系 |
不会对盒子的大小造成影响 |
可以设置负值 |
可以单独设置一边(margin-left \ right \ top \ bottom) |
margin:0 auto; 让当前元素在父元素中左右居中 |
|
margin:30px; 四周 |
margin:10px 30px; 上下、左右 |
margin:10px 30px 50px; 上、左右、下 |
margin:10px 30px 50px 100px; 上、右、下、左 |
3.边框(border):边框长在元素的宽高之外
边框的意思,描述盒子的边框
边框有三个要素: 粗细 线性样式 颜色
border :solid 5px red;
线性样式 粗细 颜色
|
border-left:10px solid red; |
border-width\border-style\border-color
1个属性值 四周 |
属性值 | 边框类型 |
solid | 实线边框 |
dashed | 虚线边框 |
dotted | 点状线 |
none | 无边框 |
原文:https://www.cnblogs.com/singlef/p/12595568.html