文章目录
盒子模型
1. 网页布局三大核心
盒子模型、浮动、定位
2. 组成
border 、margin 、padding 、 content :边框,内边距,外边距,实际内容
2.1 边框(border)
语法:
border : border-weight | border-style | color
属性 作用 border-weight 边框的粗细,以px为单位 border-style 边框样式 border-color 边框颜色,默认为黑色
*****边框样式:有三种参数比较常用,solid(实线)、dashed(虚线) 、dotted(点线)
-
可以分开写:border-top , border-left , border-right , border-bottom来设置上左右下的边框。
-
边框简写,例如:
border:1px solid red;
-
后期布局时会遇到一些默认就有的border,那么就可以设置
border:0;
,将边框设置没有。 -
边框会影响盒子的大小
2.2 内边距(padding)
设置内边距,即边框与内容之间的距离。
语法:
合写属性:
书写个数 | 表达意思 |
---|---|
padding :10px; | 1个值,上、右、下、左的内边距是10像素 |
padding :10px 5px; | 2个值,上下内边距是10像素,左右内边距是5像素 |
padding :10px 5px 3px; | 3个值,上内边距10像素,左右内边距5像素,下内边距3像素 |
padding :10px 5px 3px 1px; | 4个值,上内边距10像素、右内边距5像素、下内边距3像素、左内边距1像素 |
分写属性:
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
注意:
1. 内边距会影响盒子的大小
解决方法:将盒子的宽度或者高度减去多出来的内边距大小即可。
2.如果盒子没有宽度,内边距就不会撑大盒子。
2.3 外边距(margin)
盒子与盒子之间的距离
语法和上文的内边距一样。故不重复。
1.外边距不会影响盒子大小,但会影响盒子的位置
2.水平方向居中
属性 | 要求 |
---|---|
text-align: center; | 文字,行内元素、行内块元素(img/input) |
margin: 0 auto; /margin: auto; | 块元素(固定宽度) |
3. 垂直居中
属性 | 要求 |
---|---|
line-height=盒子高度 | 设置其高度和盒子高度相同 |
2.3.1外边距合并
当相邻的第一个盒子和第二个盒子设置margin-bottom、margin-top,垂直距离并不是相加的,而是会自动选取其像素最大的外边距。
2.3.2外边距塌陷
子盒子添加margin-top时,并不会给子盒子上外边距,反而会给父盒子一个上外边距,此情况是外边距塌陷问题。但是margin-left和margin-right不会出现此情况。
解决方法:
- 给父元素设置上边框
- 给父元素设置上内边距
- (推荐) 给父盒子添加隐藏,设置
overflow:hidden
例如:
<style>
* {
margin: 0;
padding: 0;
}
.f {
height: 200px;
width: 200px;
background-color: blue;
overflow: hidden;
}
.son {
height: 50px;
width: 50px;
margin-top: 20px;
background-color: yellow;
}
</style>
<div class="f">
<div class="son">
</div>
</div>
效果如图:
2.4 影响盒子大小属性
padding、border、height、width