【CSS】＜Cascading Style Sheets＞CSS盒子模型

最新推荐文章于 2024-09-10 18:02:14 发布

爱吃糖的范同学

最新推荐文章于 2024-09-10 18:02:14 发布

阅读量4.6k

点赞数 2

分类专栏：编程语言文章标签：前端 css3 css

本文链接：https://blog.csdn.net/weixin_52058417/article/details/122095887

版权

编程语言专栏收录该内容

36 篇文章 1 订阅

订阅专栏

一、盒模型（Box Model）概述：

在CSS将页面中的所有元素都设置为一个矩形的盒子，将元素设置为盒子之后，CSS网页布局就是对盒子位置的摆放。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

二、盒模型（Box Model）组成：

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

1.内容区（Content）：

元素中的所有子元素和文本内容都在内容区中排列。内容区的大小由width和height两个属性来设置。

width：设置内容区的宽度。
heidgt：设置内容区的高度。

2.内边距（Padding）：

CSS padding（填充） | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-padding.html 内容区和边框之间的距离是内边距，内边距的设置会影响到盒子的大小，背景色会延伸到内边距上（属于盒子内部）。

盒子子的大小：内容区 + 内边距 + 边框

Padding样式：

3.边框（Border）：

CSS Border(边框) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-border.html 边框属于盒子的边缘，边框属于盒子内部，边框的大小会影响整个盒子的大小。要设置边框，需要设置边框的三个所有样式：

边框宽度（border-width）
边框颜色（border-color）
边框样式（border-style）

边框样式：

4.外边距：

CSS margin(外边距) | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-margin.html 外边距不会影响盒子可见框大小（不会影响盒子本身大小），但是外边距会影响盒子的位置。margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

外边距样式：

三、盒模型（Box Model）布局：

1.盒模型的水平布局：

在水平方向上，一个元素在其父元素中的水平方向位置由以下几个元素决定：

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

父元素的宽度值必须等于所有子元素上述所有属性值之和，浏览器在解析时，会自动调整元素属性的值，使其满足条件。

可以通过设置auto值，来使浏览器在动态调整时，可以调整指定的属性：

width（width的默认值就是auto）
margin-left
margin-right

如果将一个宽度设置为auto，则宽度会被调整至最大。三个值都是auto，则width的值被动态调整到最大，其它都是0，所以一般设置margin为auto，指定width的值！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML学习页面</title>

    <style>
        .inner {
            width: 100px;
            height: 100px;
            border: aqua 10px solid;
            padding: 10px;
            margin: auto;
            background-color: rgb(17, 45, 121);
        }

        .outer {
            border: crimson 10px solid;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

</html>

2.盒模型的垂直布局：

默认情况下，父元素的高度被内容撑开！如果父元素设置了指定高度，子元素高度超过父元素高度，则会出现子元素内容溢出！

使用overflow来处理元素溢出问题。CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

CSS 布局 Overflow | 菜鸟教程 (runoob.com)https://www.runoob.com/css/css-overflow.html属性值：

3.外边距折叠：

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。解决方案：避免就好了。

嵌套块元素垂直外边距的合并：

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的绝对值较大者，即使父元素的上外边距为0，也会发生合并。

父子元素相邻外边距，子元素的外边距会传递给父元素。

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。

4.行内元素盒模型：

行内元素不支持设置宽度和高度，只能由内容大小撑开！
行内元素可以设置padding，但垂直方向padding不会影响页面布局。
行内元素可以设置border，垂直方向border不会影响页面布局。
行内元素可以设置margin，垂直方向margin不会影响页面布局。

display设置元素显示类型：

CSS display 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/pr-class-display.html属性值：

行内块元素：既可以设置宽高，又不会独占一行！

visability设置元素显示类型：

CSS visibility 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/pr-class-visibility.html属性值：

visible：默认值，元素在页面种正常显示。
hidden：元素在页面种隐藏，不显示，但依然占据页面位置。

四、盒子大小：

默认情况下，盒子可见框大小由内容区、内边距、边框共同决定！

box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）
- content-box：默认值，宽度和高度用来设置内容区的大小
- border-box：宽度和高度用来设置整个盒子可见框大小。width和height指的是内容区和内边距的边框的总大小。

CSS3 box-sizing 属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/cssref/css3-pr-box-sizing.html属性值：