18910140161

Css

首页 >> 前端开发 >> Css

CSS盒子模型

顺晟科技

2022-09-13 12:09:16

176

CSS盒子模型

前言

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

 

image-20200712224114489

 

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

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

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

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

 

 

内容区域

基本设置

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

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

 

image-20200713000529277

 

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

　　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的一个塌陷问题，后面会慢慢探讨。

 

image-20200712230933316

 

 

负值设置

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

 

image-20200712231651528

<!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的话，会比较这两个值的大小，然后取最大值进行设置。

 

 

image-20200712233021569

image-20200712233046300

 

 

<!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;大多数情况下都是用来横向合并的。

image-20200712233650317

 

image-20200712234040395

 

<!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 四边
规则名称 说明

 

image-20200713000215601

 

<!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 全部角
选项 说明

 

image-20200713001938777

 

<!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则是代表边框盒子。

 

image-20200713001550046

image-20200713001601436

 

<!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;再次提醒，轮廓线一般用于获得焦点的对象！

 

image-20200713003705501

 

 

<!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;将它去除。

 

image-20200713003912855

image-20200713003944003

image-20200713004017520

 

 

<!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;

 

image-20200713004816289

 

 

<!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;

 

image-20200713004958641

 

 

<!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;

 

image-20200713005124309

<!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;，它不会留下被隐藏标签的位置。

 

image-20200713010019421

 

<!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如果将一个元素设置为隐藏，那么该元素依然在页面上占据位置！

 

image-20200713010237281

 

<!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;将超出盒子的部分内容隐藏起来。

　　如果不设置是这样的：

 

image-20200713011017491

　　当我们设置之后：

 

image-20200713011040664

<!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;给盒子添加上一个滚动条。

 

image-20200713011316432

 

 

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

 

<!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代表如果填充内容太少，那么我们应该让内容占据盒子的多少宽度以及高度。

 

　　设置之前：

image-20200713012639568

　　设置之后：

image-20200713013027598

 

 

<!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;
        }

 

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

image-20200713013737129

 

 

　　当我们设置之后：

image-20200713013828438

 

<!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;达到让元素居中显示的效果，主要就是移动端上使用的。

 

image-20200713014743950

<!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 将容器尺寸按最小元素宽度设置。也是移动端使用的较多。

 

未设置：

image-20200713020105586

　　设置后：

image-20200713015808852

 

<!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 将容器尺寸按最大元素宽度设置。也是移动端使用的较多，请对照上面的图片。

 

image-20200713015905128

 

<!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文本控制
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！