CSS学习11-盒子模型


盒子模型

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


1. 看透网页布局的本质

网页布局的过程:

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

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


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

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

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

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

CSS学习11-盒子模型

不同部分的说明:

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

3. 边框 ( border )

CSS学习11-盒子模型

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学习11-盒子模型


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>

运行效果

CSS学习11-盒子模型


示例代码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>

运行效果

CSS学习11-盒子模型


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>

运行效果

CSS学习11-盒子模型


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

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

  1. 测量盒子大小的时候,不量边框
  2. 如果测量的时候包含了边框,则需要 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>

运行效果

CSS学习11-盒子模型


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>

运行效果

CSS学习11-盒子模型


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件事情:

  1. 内容和边框有了距离,添加了内边距。
  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>

运行结果

CSS学习11-盒子模型


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>

运行结果

CSS学习11-盒子模型


外边距典型应用

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

  1. 盒子必须指定了宽度 ( width ) 。
  2. 盒子左右的外边距都设置为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" >
    </div>
</body>

</html>

8. 外边距合并

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

主要有两种情况:

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

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


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

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

CSS学习11-盒子模型

解决方案:尽量只给一个盒子添加 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 嵌套块元素垂直外边距的塌陷

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

CSS学习11-盒子模型

解决方案:

  1. 可以为父元素定义上边框。
  2. 可以为父元素定义上内边距。
  3. 可以为父元素添加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>

运行结果

CSS学习11-盒子模型


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学习11-盒子模型

上一篇:cube.js预聚合对于大数据量处理的问题


下一篇:JS_显示和隐藏图片(display的用法)