CSS盒子模型

2022-09-18 16:24:08

CSS盒子模型

前言

　　每一个元素，其实都可以将它看成是一个盒子。网页的布局里面也是大盒子不断的套着小盒子，那么我们首先要认识一下一个盒子的一些基本知识。

CSS盒子模型

　　content：内容区域，可以由width与height来进行设置。

　　padding：内边距，指的是content与border的距离。

　　border：边框，边框也占据整个盒子模型的体积大小。

　　margin：外边距，指的是该盒子与另一个盒子的距离。

内容区域

基本设置

　　我们很少来规定一个盒子固定的大小，基本都是由内容进行撑开。当然如果你想设置出一个固定的盒子大小，可以使用height以及width来设置盒子的高度与宽度。

　　一定要注意！使用height以及width设置出来的盒子大小只是针对content区域，任何对padding以及border的设置都可能会改变盒子的大小，从而引发整个页面的混乱！我们增加了padding或者width就需要去减去width以及height，这十分的麻烦！

CSS盒子模型

　　如何计算一个标准盒模型的大小？公式如下：

　　width+padding*2+border

外边距

基本使用

　　如果想修改盒子的外边距，就用margin进行修改，单位可以是px，em，rem以及%

　　margin一个值：上下左右

　　margin两个值：上下左右

　　margin三个值：上左右下

　　margin四个值：上下左右

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
?
        div{
            width: 200px;
            height: 200px;
            
            /* 这样做显然太麻烦了，我们有更简便的方式 */
?
            /* 
            margin-top: 40px;
            margin-left: 40px;
            margin-right: 40px;
            margin-bottom: 40px; 
            */
            
            /* 上下左右 */
            margin: 40px;
            /* 上下 左右 */
            margin: 40px 40px;
            /* 上 左右 下 */
            margin: 40px 30px 40px;
            /* 上 右 下 左 */
            margin: 50px 40px 30px 20px;
        }
?
    </style>
    <title>Document</title>
</head>
?
<body>
    <div></div>
</body>
?
</html>

margin的使用

盒子居中

　　当一个大盒子中嵌套了一个小盒子，而我们要想将小盒子水平居中可以设置margin:auto;。

　　PS：关于小盒子的垂直居中涉及到margin的一个塌陷问题，后面会慢慢探讨。

CSS盒子模型

负值设置

　　当margin有两个值设置为了负数，小盒子会跑出大盒子外。

CSS盒子模型

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
?
        main{
             
            width: 300px;   
            height: 300px;
        }
        article{
            width: 200px;
            height: 200px;
            
            margin:0 -40px;
        }
    </style>
    <title>Document</title>
</head>
?
<body>
    <main>
        <article></article>
    </main>
</body>
?
</html>

margin的负值

注意：同级纵向合并

　　同级纵向合并指的是两个相同级别的盒子，一个设置margin-bottom，一个设置margin-top的话，会比较这两个值的大小，然后取最大值进行设置。

CSS盒子模型

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
?
        body :nth-child(1){
            width: 100px;
            height: 100px;
            margin-bottom: 30px;
            
        }
?
        body :nth-child(2){
            width: 100px;
            height: 100px;
            margin-top: 50px;
            
        }
?
    </style>
    <title>Document</title>
</head>
?
<body>
    <div></div>
    <div></div>
</body>
?
</html>

margin同级纵向合并问题

注意：越级纵向边距

　　当一个子级的盒子去设置margin-top或者margin-bottom想与父级保持一定的距离，那么父级就必须拥有一些参数或者内容。若父级没有参数或者内容则该子级盒子就会不断的向上找，找父级的兄弟级，找父级的父级，直到找到<html>标签。

　　Ps：横向合并不会产生这样的问题，所以margin:auto;大多数情况下都是用来横向合并的。

CSS盒子模型

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
?
        main{
             
            width: 300px;   
            height: 300px;
        }
        article{
            width: 200px;
            height: 200px;
            
            margin-top: 20px;
        }
?
    </style>
    <title>Document</title>
</head>
?
<body>
    <main>父级有内容了
        <article></article>
    </main>
</body>
?
</html>

margin越级纵向边距问题

内边距

基本使用

　　内边距使用 padding 进行定义，使用语法与 margin 相似。

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
?
        div{
            width: 200px;
            height: 200px;
            
            /* 这样做显然太麻烦了，我们有更简便的方式 */
?
            /* 
            padding-top: 40px;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 40px; 
            */
            
            /* 上下左右 */
            padding: 40px;
            /* 上下 左右 */
            padding: 40px 40px;
            /* 上 左右 下 */
            padding: 40px 30px 40px;
            /* 上 右 下 左 */
            padding: 50px 40px 30px 20px;
        }
?
    </style>
    <title>Document</title>
</head>
?
<body>
    <div>内容区域</div>
</body>
?
</html>

padding的使用

边框设计

　　对于边框设计来说，它由三部分组成，边框的样式，边框的宽度，边框的颜色。

边框样式

　　定义边框样式，请使用border-style，它具有以下的一些值。

值	描述
none	定义无边框。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。

边框宽度

　　定义边框的宽度，请使用下表中的属性，它的值可以是px，em，rem等等。

属性名称	说明
border-top-width	顶边宽度
border-right-width	右边宽度
border-bottom-width	下边宽度
border-left-width	左边宽度
border-width	四边宽度

边框颜色

　　定义边框的颜色，请使用下表中的属性，它的值可以是rgb，rgba，#16网页色。

属性名称	说明
border-top-color	顶边颜色
border-right-color	右边颜色
border-bottom-color	下边颜色
border-left-color	左边颜色
border-color	四边颜色

简写

　　我们可以指定任意一条边，或者所有的4条边来进行全部设置。如我想设置4边的：border:solid 1px red;

规则名称	说明
border-top	顶边
border-right	右边
border-bottom	下边
border-left	左边
border	四边

CSS盒子模型

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
?
        div{
            width: 200px;
            height: 200px;
            
            border-bottom: groove 30px blue;
        }
?
    </style>
    <title>Document</title>
</head>
?
<body>
    <div>内容区域</div>
</body>
?
</html>

border简写

圆角边框

　　如果想让你的边框变为圆角，可以使用border-radius进行设置，可以使用px | % 等单位。也支持四个边分别设置。

选项	说明
border-top-left-radius	上左角
border-top-right-radius	上右角
border-bottom-left-radius	下左角
border-bottom-right-radius	下右角
border-radius	全部角

CSS盒子模型

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
?
        div{
            width: 200px;
            height: 200px;
            
            border: groove 10px blue;
            border-radius: 50%;
        }
?
    </style>
    <title>Document</title>
</head>
?
<body>
    <div></div>
</body>
?
</html>

圆角边框

box-sizing

　　我们说过，如果单纯的只是用width以及height来进行盒子大小的设置是有问题的，这两个参数实际上只是设置的content区域内容的大小，后面如果再使用padding以及border一定要小心！因为这些操作都可能引发盒模型大小的改变从而引起整个页面的混乱。

　　怎么更加方便的解决这个问题呢？使用BOX-SIZING即可解决。

　　我们先这样设置一下box-sizing: border-box;，接下里的width以及height的设置就不单单只是针对content区域，而是针对整个盒模型。

　　box-sizing有两个值，一个是content-box代表内容区域盒子，这是默认值，而border-box则是代表边框盒子。

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            box-sizing: border-box;
            border: solid 10px blue;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <div>内容区域</div>
</body>

</html>

box-sizing边距盒子

轮廓线

　　轮廓线outline有点像border，但是它是在获取元素焦点时产生，并且轮廓线不占用空间。可以使用伪类 :focus 定义样式。

- 轮廓线显示在边框外面
- 轮廓线不影响页面布局

　　轮廓线也有三要素，分别是线条样式，线条宽度，线条颜色。

线条样式

　　定义轮廓线线条样式，请使用outline-style，它具有以下的一些值。

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。

线宽设置

　　定义轮廓线线条的宽度，请使用outline-width，它的值可以是px，em，rem等等。

线条颜色

　　定义轮廓线线条的颜色，请使用outline-color，它的值可以是rgb，rgba，#16网页色。

简写

　　如同边框一样，我们也可以使用简写来定义一条轮廓线，如：outline:solid 10px red;再次提醒，轮廓线一般用于获得焦点的对象！

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        input{
            margin: 0 5px;
        }

        input:focus{
            outline:solid 3px blue;
            
        }

    </style>
    <title>Document</title>
</head>

<body>
    <label>
        点我<input type="text" name="test">
    </label>
</body>

</html>

outline简写

表单轮廓线

　　我们的<input>框具有默认的轮廓线，有时候会影响美观。可以通过outline:none;将它去除。

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        input{
            margin: 0 5px;
        }

        input:focus{
            outline: none;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <label>
        点我<input type="text" name="test">
    </label>
</body>

</html>

去除表单轮廓线

display

　　display可以将任意标签转换为内联标签，块级标签以及内联块级标签，也可以将该标签设置为隐藏。

　　值得注意的一点是，display将某一元素设置为隐藏后！该元素是不会占据页面上任何位置的！

选项	说明
none	隐藏元素
block	显示为块元素
inline	显示为行元素，不能设置宽/高
inline-block	行级块元素，允许设置宽/高f

块转内联

　　请使用display:inline;

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            display: inline;
            border: solid 1px red;
        }

    </style>
    <title>Document</title>
</head>

<span>-----测试----</span><div>我是一个div，现在我变成内联了，不会独占一行了。</div><span>-----测试----</span>

</html>

块转内联

内联转块

　　请使用display:block;

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        em{
            display: block;
            border: solid 1px red;
        }

    </style>
    <title>Document</title>
</head>

<span>-----测试----</span><em>我是一个em，现在我变成块了，我要独占一行了。</em><span>-----测试----</span>

</html>

内联转块

内联块

　　请使用display:inline-block;

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        span{
            display: inline-block;
            border: solid 1px red;
        }

    </style>
    <title>Document</title>
</head>

<span>-----测试----</span><span>现在，我们的span即能设置宽高，又不会独占一行了，我们都是内联块</span><span>-----测试----</span>

</html>

内联块

隐藏标签

　　请使用display:none;，它不会留下被隐藏标签的位置。

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            display: none;
            border: solid 1px red;
        }

    </style>
    <title>Document</title>
</head>

<span>-----测试----</span><div>我人没了，位置也不在了</div><span>-----测试----</span>

</html>

display隐藏属性

visibility

　　visibility可以控制一个元素的隐藏或显示。

　　值得注意的一点是，visibility如果将一个元素设置为隐藏，那么该元素依然在页面上占据位置！

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            visibility: hidden;
            border: solid 1px red;
        }

    </style>
    <title>Document</title>
</head>

<span>-----测试----</span><div>我人没了，但我位置还在</div><span>-----测试----</span>

</html>

visibility隐藏属性

overflow

　　overflow主要是针对盒子内部的内容，如果超出盒子外的处理方式。可以设置为隐藏，加一个固定的滚动条，或者加一个自动的滚动条。

选项	说明
hidden	溢出内容隐藏
scroll	显示滚动条（有些浏览器会一直显示，有些在滚动时显示）
auto	根据内容自动处理滚动条

溢出隐藏

　　我们可以使用overflow:hidden;将超出盒子的部分内容隐藏起来。

　　如果不设置是这样的：

CSS盒子模型

　　当我们设置之后：

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            overflow: hidden;
            width: 10em;
            height: 20px;
            border: solid 1px red;
        }

    </style>
    <title>Document</title>
</head>
<body>

    <div>一二三四五六七八九十十一十二十三十四十五</div>

</body>
</html>

溢出隐藏

溢出产生滚动条

　　我们可以使用overflow:auto;给盒子添加上一个滚动条。

CSS盒子模型

　　由于图中我给盒子的高度设置的太小了，所以没看出来，不过没关系。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            overflow: auto;
            width: 10em;
            height: 20px;
            border: solid 1px red;
        }

    </style>
    <title>Document</title>
</head>
<body>

    <div>一二三四五六七八九十十一十二十三十四十五</div>

</body>
</html>

溢出产生滚动条

尺寸定义

　　我们可以有多种方式，为一个容器中的元素进行宽高尺寸的设定，如下：

选项	说明
width	宽度
height	高度
min-width	最小宽度
min-height	最小高度
max-width	最大宽度
max-height	最大高度
fill-available	撑满可用的空间
fit-content	根据内容适应尺

min&max

　　如果有一张图片放在我们的盒子中，我们不希望它太大溢出了整个盒子，也不希望它太小了导致感官不太好。那么就可以参照下面介绍的办法：

　　min-width以及min-height代表如果填充内容太少，那么我们应该让内容占据盒子的多少宽度以及高度。

　　min-width以及min-height代表如果填充内容太少，那么我们应该让内容占据盒子的多少宽度以及高度。

　　设置之前：

CSS盒子模型

　　设置之后：

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            width: 800px;
            height: 600px;
            background-color: red;
        }
        img{
            /* min-width以及min-height代表如果图片太小，那么我们应该让图片占据盒子的多少宽度以及高度 */
            min-width: 100%;
            min-height: 100%;
            
            /* max-width以及max-height代表如果图片太大，那么我们应该让图片占据盒子的多少宽度以及高度 */
            max-width: 90%;
            max-height: 90%;
        }

    </style>
    <title>Document</title>
</head>
<body>

    <div><img src="OIP.jpg" alt="22娘33娘"></div>

</body>
</html>

mix与max

fill-available

　　在chrome 浏览器中使用前缀 -webkit 书写样式。这个代表是撑满整个利用空间，

　　我们可以如下设置，达到与上面第二张图一样的效果：

        img{
            width: -webkit-fill-available;
            height: -webkit-fill-available;
        }

　　在这里我另外举个例子，显得更加直白，下面是未设置的时候。

CSS盒子模型

　　当我们设置之后：

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        article{
            width: 800px;
            height: 600px;
            background-color: red;
        }
        span{
            display: inline-block;
            color: cornsilk;
            background-color: blue;
            width: -webkit-fill-available;
            height: -webkit-fill-available;
        }

    </style>
    <title>Document</title>
</head>
<body>

    <main>
        <article> <span>我看看我占据了多少</span> </article>
    </main>

</body>
</html>

fill-available

fit-content

　　这玩意儿是根据内容自适应容器的宽度，即不管你输入多少字符，都不会达到溢出，可以通过配合margin:auto;达到让元素居中显示的效果，主要就是移动端上使用的。

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        article{
            width: 800px;
            height: 200px;
            background-color: red;
        }
        div{
            color: cornsilk;
            background-color: blue;
            /* 主要设置，不管写多少内容都不会溢出 */
            width: fit-content; 
            /* 水平居中 */
            margin: auto;
        }

    </style>
    <title>Document</title>
</head>
<body>

    <main>
        <article> <div>只要设置了width: fit-content; 那么你写多少内容都不会溢出了</div> </article>
    </main>

</body>
</html>

fit-content

min-content

　　使用min-content 将容器尺寸按最小元素宽度设置。也是移动端使用的较多。

未设置：

CSS盒子模型

　　设置后：

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        body{
            background-color: darkgoldenrod;
        }
        article{
            height: 400vh;
            background-color: red;
            /* 根据最小内容调整宽度 */
            width: min-content; 
        }
        div{
            color: cornsilk;
            background-color: blue;
            /* 水平居中 */
            margin: auto;
            font-size: 2rem;
        }

    </style>
    <title>Document</title>
</head>
<body>

    <main>
        <article> <div>look me</div> </article>
    </main>

</body>
</html>

min-content

max-content

　　使用max-content 将容器尺寸按最大元素宽度设置。也是移动端使用的较多，请对照上面的图片。

CSS盒子模型

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        body{
            background-color: darkgoldenrod;
        }
        article{
            height: 400vh;
            background-color: red;
            /* 根据最大内容调整宽度 */
            width: max-content; 
        }
        div{
            color: cornsilk;
            background-color: blue;
            /* 水平居中 */
            margin: auto;
            font-size: 2rem;
        }

    </style>
    <title>Document</title>
</head>
<body>

    <main>
        <article> <div>look me</div> </article>
    </main>

</body>
</html>

max-content

CSS盒子模型

码农公寓

CSS盒子模型

前言

内容区域

基本设置

外边距

基本使用

盒子居中

负值设置

注意：同级纵向合并

注意：越级纵向边距

内边距

基本使用

边框设计

边框样式

边框宽度

边框颜色

简写

圆角边框

box-sizing

轮廓线

线条样式

线宽设置

线条颜色

简写

表单轮廓线

display

块转内联

内联转块

内联块

隐藏标签

visibility

overflow

溢出隐藏

溢出产生滚动条

尺寸定义

min&max

fill-available

fit-content

min-content

max-content

相关文章