CSS学习11-盒子模型

Posted 2021-05-15 Brianxq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS学习11-盒子模型相关的知识，希望对你有一定的参考价值。

盒子模型

页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。

1. 看透网页布局的本质

网页布局的过程：

先准备好相关的网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后摆放到相应的位置。
往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子。

2. 盒子模型 ( Box Model ) 组成

所谓盒子模型：就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框（border）、内边距（padding）、外边距（margin）和实际内容（content）。

下面的图片说明了盒子模型：

不同部分的说明：

盒子里面的文字和图片等元素是Content(内容)
盒子的厚度我们称为为盒子的Border(边框)
盒子内容与边框的距离是Padding(内边距)
盒子与盒子之间的距离是Margin(外边距)

3. 边框 ( border )

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式和边框颜色

语法：

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width 边框的粗细 一般情况下都用 px */
            border-width: 5px;
            /* border-style 边框的样式 solid 实线边框  dashed 虚线边框 dotted 点线边框 */
            border-style: solid;
            /* border-style: dashed; */
            /* border-style: dotted; */
            /* border-color 边框的颜色  */
            border-color: pink;

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行效果

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框简写：

border: 1px solid red;  没有顺序要求

边框分开写法：

border-top: 1px solid red;  /* 只设定上边框，其余同理 */

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

示例代码1

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框的复合写法</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width: 5px; */
            /* border-style: solid; */
            /* border-color: pink; */
            /* 边框的复合写法 简写 */
            /* border: 5px solid pink; */
            /* 上边框 */
            border-top: 5px solid pink;
            /* 下边框 */
            border-bottom: 10px dashed purple;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行效果

示例代码2

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框的练习</title>
    <style>
        /* 请给一个 200*200 的盒子,设置上边框为红色,其余边框为蓝色 */
        div {
            width: 200px;
            height: 200px;
            /* border包含四条边 */
            border: 1px solid blue;
            /* 层叠性 只是层叠了 上边框啊 */
            border-top: 1px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行效果

4. 表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse:collapse;

collapse 单词是合并的意思
border-collapse: collapse;表示相邻边框合并在一起

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
    <style>
        table {
            width: 500px;
            height: 249px;
        }

        th {
            height: 35px;
        }

        table,
        td,
        th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>

            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="down.jpg"></td>
                <td>124</td>
                <td>675432</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>

            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>212</td>
                <td>7654</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>

            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="up.jpg"></td>
                <td>23</td>
                <td>75645</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>

            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="down.jpg"></td>
                <td>121</td>
                <td>7676</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>

            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="up.jpg"></td>
                <td>576576</td>
                <td>1231421</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>

            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="up.jpg"></td>
                <td>234</td>
                <td>7686</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

运行效果

5. 边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要 width/height 减去边框宽度

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框会影响盒子的实际大小</title>
    <style>
        /* 我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框 */
        div {
            width: 180px;
            height: 180px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行效果

6. 内边距 ( padding )

padding属性用于设置内边距。是指边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-top: 30px;
        }
    </style>
</head>

<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>

</html>

运行效果

padding属性 ( 简写属性 ) 可以有 1 到 4 个值。

值的个数	表达意思
padding: 5px;	padding：上下左右内边距;
padding: 5px 10px;	padding: 上下内边距左右内边距；
padding: 5px 10px 20px;	padding：上内边距左右内边距下内边距；
padding: 5px 10px 20px 30px;	padding: 上内边距右内边距下内边距左内边距；(顺时针)

以上4种情况，我们再实际开发中都会遇到。

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding-left: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-right: 5px; */
            /* 内边距复合写法(简写) */
            /* padding: 5px; */
            /* padding: 5px 10px; */
            /* padding: 5px 10px 20px; */
            padding: 5px 10px 20px 30px;
        }
    </style>
</head>

<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>

</html>

当我们给盒子指定padding值之后，发生了2件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果要保证盒子跟效果图大小一致，则让width/height减去多出来的内边距大小即可。

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距会影响盒子实际大小</title>
    <style>
        div {
            width: 160px;
            height: 160px;
            background-color: pink;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小
    </div>

</body>

</html>

padding不影响盒子大小情况：如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding不会影响盒子大小的情况</title>
    <style>
        h1 {
            /* width: 100%; */
            height: 200px;
            background-color: pink;
            padding: 30px;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;

        }

        div p {
            /* width: 100%; */
            padding: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <h1></h1>
    <div>
        <p>

        </p>
    </div>
</body>

</html>

运行结果

7. 外边距 ( margin )

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 简写方式（复合写法）代表的意思跟 padding 完全一致。

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之外边距margin</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* .one {
            margin-bottom: 20px;
        } */
        .two {
            /* margin-top: 20px; */
            margin: 30px 50px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>

</html>

运行结果

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度 ( width ) 。
盒子左右的外边距都设置为auto 。

.header  { width: 960px; margin: 0 auto;}

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级盒子水平居中对齐</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="header"></div>
</body>

</html>

注意：以上方法让块级元素水平居中，行内元素或者行内块元素给其父元素添加 text-align: center即可。

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素/行内块元素水平居中对齐</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
        }

        /* 要想行内元素或者行内块元素水平居中  只需给其父元素添加 text-align: center 即可 */
    </style>
</head>

<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div class="header">
        <img src="down.jpg" alt="">
    </div>
</body>

</html>

8. 外边距合并

使用margin定义块元素的垂直外边距(指 margin-top 和 margin-bottom )时，可能会出现外边距的合并。

主要有两种情况：

1. 相邻块元素垂直外边距的合并

2. 嵌套块元素垂直外边距的塌陷

8.1 相邻块元素垂直外边距的合并

当上下相邻的两个块元素 ( 兄弟关系 ) 相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加 margin 值。

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并-相邻块级元素垂直外边距合并</title>
    <style>
        .damao,
        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .damao {
            margin-bottom: 100px;
        }

        .ermao {
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</body>

</html>

8.2 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系 ( 父子关系 ) 的块元素，父元素有上外内边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

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

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* border: 1px solid red; */
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

运行结果

9. 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们再布局前，首先要清除下网页元素的内外边距。

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

示例代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除内外边距</title>
    <style>
        /* 这句话也是我们CSS 的第一行代码 */
        * {
            margin: 0;
            padding: 0;
        }

        span {
            background-color: pink;
            margin: 20px;
        }
    </style>
</head>

<body>
    123
    <ul>
        <li>abcd</li>
    </ul>
    <span>行内元素尽量只设置左右的内外边距</span>
</body>

</html>

运行结果

以上是关于CSS学习11-盒子模型的主要内容，如果未能解决你的问题，请参考以下文章

CSS基础学习-8.CSS盒子模型_标准盒子