CSS盒模型

一条咸鱼o*v*o

已于 2022-03-18 20:42:35 修改

阅读量528

点赞数

文章标签： css html5 html

于 2022-03-13 21:28:44 首次发布

本文链接：https://blog.csdn.net/m0_45659764/article/details/123446458

版权

本文详细介绍了CSS中的盒子模型，包括内容区域、内边距、边框和外边距的设置方法。通过实例展示了如何计算盒子的实际大小，并探讨了边框和内边距对盒子尺寸的影响。此外，还讲解了CSS3中的盒模型属性`box-sizing`，以及如何使用它来避免元素尺寸被撑大。最后，通过新浪导航和网页新闻列表的案例，演示了盒子模型在实际布局中的应用。

摘要由CSDN通过智能技术生成

三、盒子模型

1.1 盒子模型的介绍

1.盒子的概念

页面中的每一个标签，都可以看作是一个“盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子

2、盒子模型

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距（margin）构成，这就是盒子模型

３、记忆：可以联想现实中的包装盒

２.1内容的宽度和高度

作用：利用width和height属性默认设置盒子内容区域的大小

属性：width/height

常见取值：数字+px

3.1 边框（border）-单个属性

作用：给设置边框粗细、边框样式、边框颜色效果

单个属性：

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

如果要给边框设置属性，一定要设置边框样式

 <style>
        div {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            /* 单个属性 */
            border-width: 10px;
            border-style: solid;
            border-color: red;
        }
    </style>

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

3.2 边框（border）-连写形式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

如 border : 10px solid red;

快捷键：bd+tab

<style>
        div {
            width: 400px;
            height: 400px;
            background-color: skyblue;

            /* 连写形式 */
            border: 10px solid blue;
        }
    </style>

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

3.3 边框（border）-单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border-方位名词

属性值：连写的取值

<style>
        div {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            /*1、 单个属性 */
            /* border-width: 10px;
            border-style: solid;
            border-color: red; */

            /* 连写形式 */
            /* border: 10px solid blue; */

            /* 3.单方向设置 */
            border-top: 10px solid red;
        }
    </style>

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

3.4 盒子实际大小初级计算公式

需求：盒子尺寸400*400，背景绿色，边框10px 实线黑色，如何完成？

注意点：1.设置width和height是内容的宽高 2.设置border会撑大盒子

盒子实际大小初级计算公式：

盒子宽度=左边框+内容宽度+右边框
盒子高度=上边框+内容高度+下边框

解决：当盒子被border撑大后，如何满足需求？

解决：计算多余大小，手动在内容中减去（手动内减）

<style>
        div {
            /* 注意点：width和height默认是内容的大小 */
            /* width: 400px; */
            width: 380px;
            /* height: 400px; */
            height: 380px;
            background-color: green;
            border: 10px solid #000;

            /* 盒子的实际大小（宽度）=左边框+内容的宽度+右边框 
                                    =10+400+10=420
                解决：现在是420，要求400，多出了20px
                手动内减：计算出多余的部分之后，手动在内容中减去即可
            */
        }
    </style>

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

3.6 新浪导航案例

需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果

布局顺序：

从外往内，从上往下

每一个盒子的样式：

宽高
辅助的背景颜色
盒子模型的部分：border、padding、margin
其他样式：color、font、text-、.....

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 不给块级元素设置宽度，默认是父元素的宽度 */
            height: 40px;
            /* background-color: pink; */
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        .box a {
            width: 80px;
            height: 40px;
            /* background-color: pink; */
            display: inline-block;
            color: #4c4c4c;
            text-align: center;
            text-decoration: none;
            line-height: 40px;
            font-size: 12px;
        }

        .box a:hover {
            background-color: #edeef0;
            color: #ff847c;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a>
    </div>
</body>

</html>

4.1 内边距（padding）-取值

作用：设置边框与内容区域之间的距离

属性名：padding

常见取值：

取值	示例	含义
一个值	padding: 10px;	上右下左都设置为10px
两个值	padding:10px 20px;	上下设置为10px，左右设置为20px
三个值	padding:10px 20px 30px;	上设置为10px，左右设置为20px，下设置为30px
四个值	padding:10px 20px 30px 40px;	上设置为10px，右设置为20px，下设置为30px，左设置为40px

记忆规则：从上开始赋值，然后顺时针赋值，如果没有赋值的，看对面的

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid #000;

            /* 1、padding的取值 */
            /* padding: 10px; */
            /* padding: 10px 20px; */
            /* padding: 10px 20px 30px; */
            padding: 10px 20px 30px 40px;

        }
    </style>
</head>

<body>
    <div>我是内容我是内容我是内容我是内容我是内容我是内容</div>
</body>

4.2 内边距（padding）-单方向设置

场景：只给盒子的某个方向单独设置内边框

属性名：padding-方位名词

属性值：数字+px

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid #000;

        
            /* 2、padding的单方向取值 */
            padding-top: 20px;

        }
    </style>

<body>
    <div>我是内容我是内容我是内容我是内容我是内容我是内容</div>
</body>

4.3 盒子实际大小终极计算公式

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何实现？

注意点：1、设置width和heigh是内容的宽高 2、设置border会撑大盒子 3、设置padding会撑大盒子

盒子实际大小终极计算公式：

盒子宽度=左边框+左padding+内容宽度+右padding+右边框
盒子高度=上边框+上padding+内容高度+下padding+下边框

解决：当盒子被border和padding撑大后，如何满足需求？

自己计算多余大小，手动在内容中减去

（案例）新浪导航的优化

需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？

4.5 CSS3盒模型（自动内减）

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大

解决方法1：手动内减

操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦

解决方法2：自动内减

操作：给盒子设置属性 box-sizing: border-box;即可
优点：浏览器会自动计算多余大小，自动在内容中减去

4.6 网页新闻列表案例

<!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>Document</title>
    <style>
        /* 清除标签默认的margin和padding */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 去除行高带来的默认间隙,完成精准布局 */
            /* line-height: 1; */
        }

        .box {
            width: 500px;
            height: 400px;
            /* background-color: pink; */
            border: 1px solid #ccc;
            /* 新闻内容可以随意增加,所以不设置底部的内边距 */
            padding: 41px 30px 0;
            /* 自动内减 */
            box-sizing: border-box;

        }

        .box h2 {
            height: 40px;
            /* 不设置宽度,默认是父元素的宽度 */
            /* background-color: pink; */
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            font-size: 30px;
        }

        .box ul {
            list-style-type: none;
        }

        .box ul li {
            /* ul是块级元素,不设置宽度,默认是父元素的宽度 */
            height: 51px;
            border-bottom: 1px dashed #ccc;
            padding-left: 30px;
        }

        .box ul li a {
            text-decoration: none;
            color: #666;
            line-height: 51px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计,平面设计,PHP</a></li>
            <li><a href="#">体验JavaScript的魅力</a></li>
            <li><a href="#">jQuery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jQuery中的链式编程是什么</a></li>
        </ul>
    </div>
</body>

</html>

5.1 外边距（margin）-取值

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

取值	示例	含义
一个值	margin:10px;	上右下左都设置为10px
两个值	margin:10px 20px;	上下设置为10px、左右设置为20px
三个值	margin:10px 20px 30px;	上设置为10px、左右设置为20px、下设置为30px
四个值	margin: 10px 20px 30px 40px;	上设置为10px、右设置为20px、下设置为30px、左设置为40px

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

5.2 外边距（margin）-单方向设置

场景：只给盒子的某个方向单独设置外边距

属性名：margin-方位名词

属性值：数字+px

5.3 margin单方向设置的应用

应用：

方向	属性	效果
水平方向	margin-left	让当前盒子往右移动
水平方向	margin-right	让右边的盒子往右移动
垂直方向	margin-top	让当前盒子往下移动
垂直方向	margin-bottom	让下面的盒子往下移动

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            display: inline-block;
        }

        .green {
            background-color: green;
            /* margin-left: 100px; */
            margin-right: 100px;
        }

        .blue {
            background-color: blue;
        }
    </style>

<body>
    <div class="green"></div>
    <div class="blue"></div>
</body>

5.4 清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

比如：body标签默认有margin:8px
比如：p标签默认有上下的margin
比如：ul标签默认有上下的margin和padding-left
....

解决方法：

5.6 外边距正常情况

场景：水平布局的盒子，左右的margin正常，互不影响

结果：最终两者距离为左右margin的和

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            display: inline-block;
        }

        .red {
            background-color: red;
            margin-right: 100px;      //设置了右边距
        }

        .blue {
            background-color: blue;
            margin-left: 100px;     //设置了左边距
        }
    </style>

<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>

5.7 外边距折叠现象-1.合并现象

场景：垂直布局的块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：避免就好

只给其中一个盒子设置margin即可

5.8 外边距折叠现象-2.塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

原因：父元素和子元素的margin-top合并在一起，子元素向下父元素也向下

解决方法：

给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置浮动

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 1、给父元素设置border-top */
            /* border-top: 1px solid #000; */
            /* 2、给父元素设置padding */
            /* padding-top: 1px; */

            /* 4、给父元素设置overflow:hidden; */
            /* overflow: hidden; */

            /* 5、转换成行内块元素 */
            /* display: inline-block; */

            /* 6、设置浮动 */
            float: left;
        }

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

<body>
    <div class="father">
        <!-- 3、给父元素设置一行文本 -->
        <!-- 我是一行文本 -->
        <div class="son"></div>
    </div>
</body>

5.9 行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时

结果：

水平方向的margin和padding在布局中有效
垂直方向的margin和padding在布局中无效

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 600px;
            height: 100px;
            background-color: orange;
        }

        span {
            /* margin-right: 100px; */
            /* margin-left: 100px; */

            /* 无效！！！！！！！！！！ */
            /* margin-bottom: 100px; */
            padding-top: 100px;
        }
    </style>

<body>
    <div></div>

    <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
    <div></div>
</body>

4.4 不会撑大盒子的特殊情况

不会撑大盒子的特殊情况（块级元素）

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大盒子

卡片模块案例

法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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f4f5f9;
        }

        .box {
            width: 228px;
            height: 270px;
            /* background-color: pink; */
            margin: 100px auto;
            background-color: #fff;
        }

        .pic {
            height: 151px;
            background: url('../img/product.png');
        }

        .content {
            height: 34px;
            /* background-color: skyblue; */
            margin-top: 31px;
        }

        .content p {
            font-size: 14px;
            color: #000;
            padding: 0 24px 0 23px;
        }

        .foot {
            height: 20px;
            /* background-color: red; */
            margin-top: 18px;
            padding: 0 24px 0 23px;
        }

        .foot .prior {
            font-size: 12px;
            color: #faa221;

        }

        .foot .final {
            font-size: 12px;
            color: #c0a0a0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic"></div>
        <div class="content">
            <p>Android网络图片加载框架详解</p>
        </div>
        <div class="foot">
            <span class="prior">高级</span>
            <span class="final">·1125人在学习</span>
        </div>
    </div>

</body>

</html>

标准版代码

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f4f5f9;
        }

        .box {
            width: 228px;
            height: 270px;
            background-color: #fff;
            margin: 100px auto;
        }

        .box .product {
            width: 228px;
            width: 100%;
        }

        .box h3 {
            height: 52px;
            /* background-color: pink; */
            padding-left: 24px;
            padding-right: 20px;
            margin-top: 25px;
            font-size: 14px;
            font-weight: 400;
        }

        .box p {
            margin-left: 24px;
            font-size: 12px;
            color: #929292;
        }

        .box p span {
            color: #f77321;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../img/product.png" class="product">
        <h3>Android网络图片加载框架详解</h3>
        <p><span>高级</span>• 1125人在学习</p>
    </div>
</body>

</html>

一条咸鱼o*v*o

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型

三、盒子模型1.1 盒子模型的介绍1.盒子的概念页面中的每一个标签，都可以看作是一个“盒子”，通过盒子的视角更方便的进行布局浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子2、盒子模型CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距（margin）构成，这就是盒子模型３、记忆：可以联想现实中的包装盒２.1内容的宽度和高度作用：利用width和height属.
复制链接

扫一扫