CSS盒模型

最新推荐文章于 2022-08-28 15:25:52 发布

wang小六

最新推荐文章于 2022-08-28 15:25:52 发布

阅读量282

点赞数

分类专栏： CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_43701351/article/details/120247568

版权

CSS盒模型

在css中，所有元素都被一个个盒子 box 所包围。

一、两种常用盒子

在了解盒模型前，需要知道盒模型所针对的两种常用盒子，块级盒子（block box） 和 内联盒子（inline box）。

1.内部和外部显示类型

css的box模型有一个外部显示类型，来决定盒子是块级还是内联，另一个内部显示类型决定了该盒子内部元素的布局，常用display属性来修改盒子的显示类型。

1.1外部显示类型

display属性的下列取值，用于改变元素的外部显示类型：

block 该值会生成一个块级盒子，即该元素会被设为块级元素。
inline 该值会生成一个内联盒子，即该元素会被设为行内元素。
inline-block 该值在内联和块之间提供了一个中间状态，使得元素设置width 和height 属性会生效，padding, margin, 以及border 会推开其他元素，且它不会跳转到新行。

1.2内部显示类型

display属性的下列取值，用于改变元素的内部显示类型：

flex 设置该值的元素，元素本身将表现为一个块级元素，而其内部元素将会根据flex布局模型的特性进行布局排列。
grid 设置该值的元素，元素本身将表现为一个块级元素，而其内部元素将会根据grid布局模型的特性进行布局排列。

2.常见的块级和行内元素（盒子）

2.1块级元素

dl、dt、div、form、h1~h6、p、ol、ul、li、hr
html5新增：article、aside、header、footer、nav、section、audio、vedio

2.2行内元素

b、big、i、small、tt
abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var
a、bdo、br、img、map、object、q、script、span、sub、sup
button、input、label、select、textarea

3.块级和内联盒子的区别

3.1块级盒子的特征

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
盒子会独占一行
width和height属性能够发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开

3.2内联盒子的特征

盒子不会独占一行
width和height属性不会发挥作用
垂直方向的内边距、外边距以及边框会被应用但是不会把其他盒子推开（包括块级盒子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
     
            background-color: darkblue;
            margin: 20px;
        }
        span {
     
            background-color: darkcyan;
            padding: 30px;
        }
    </style>
</head>

<body>
    <div>123</div>
    <span>456</span>
</body>

</html>

效果如图

水平方向的内边距、外边距以及边框会被应用且会把其他内联盒子推开

二、CSS盒模型

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。此外，盒模型有两种形式：标准的和替代（IE）的。

1.盒模型的组成

1.1各个组成部分

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置
Border box: 边框盒包裹内容和内边距。大小通过 ==border ==相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过== margin ==相关属性设置

1.2包含块

一个元素的尺寸和位置经常受其包含块(containing block)的影响。包含块通常是这个元素最近的祖先块级元素的内容区，但不总是这样。
确定一个元素的包含块，由该元素的position属性决定：

如果position的值为static、relative和sticky时，包含块可能由它的最近的祖先块元素（比如说inline-block,
block 或 list-item元素）的内容区的边缘组成，也可能会建立格式化上下文(比如说 a table container,
flex container, grid container, 或者是 the block container 自身)。
如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static的祖先元素的内边距的边缘组成。
如果 position 属性是 fixed，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。
如果 position 属性是 absolute 或 fixed，包含块也可能是由属性transform或perspective的值不是none的最近祖先元素的内边距的边缘组成。

1.3Content box

1.width 设置盒子的宽度，默认值为auto

width的%：定义基于包含块宽度的百分比宽度，会突破父级的限制
width的auto：尽量被父级包裹，即width+padding+border+margin = 包含块的width

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
     
            margin: 0;
            padding: 0;
        }

        body {
     
            background: #dcdcdc;
        }

        .box {
     
            width: 400px;
            border: 3px solid red;
            padding: 0 50px;
        }

        .box1 {
     
            width: auto;
            height: 100px;
            background: pink;
            padding: 0 50px;
            margin: 0 50px;
            border-width: 0 50px;
            border-style: solid;
            border-color: green;
        }

        .box2 {
     
            width: 100%;
            height: 100px;
            background: gold