CSS盒子模型（border、padding、margin、content）

2023-09-05 03:31| 来源: 网络整理| 查看: 265

文章目录盒子模型1. 网页布局三大核心2. 组成2.1 边框（border）2.2 内边距（padding）2.3 外边距（margin）**2.水平方向居中****3. 垂直居中**2.3.1外边距合并2.3.2外边距塌陷 2.4 影响盒子大小属性

盒子模型 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 例如： * { 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; }

效果如图：在这里插入图片描述

2.4 影响盒子大小属性

padding、border、height、width

【本文地址】

公司简介

联系我们