CSS盒子模型

黑马程序员小张

已于 2022-04-11 23:35:08 修改

阅读量389

点赞数

文章标签： html5 css

于 2022-04-11 23:05:24 首次发布

本文链接：https://blog.csdn.net/z000802/article/details/124111818

版权

本文详细介绍了CSS中的盒子模型，包括内容区域、内边距、边框和外边距。阐述了边框的样式设置，内边距的多值分配方式，以及外边距的折叠现象。同时，讨论了CSS3盒子模型的自动内减特性，以及如何通过box-sizing属性实现内容区域的调整。此外，还讲解了如何清除默认的内外边距，使版心居中，并给出了具体的代码示例。最后，对外边距折叠的两种现象进行了分析并提供了解决方案。

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

一.盒子模型的介绍

1.盒子的的概念

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

2.盒子模型

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

二.边框(border)

属性值：单个取值的连写，取值之间以空格隔开
- 如：border：10px solid red；三个属性的意思粗细边框样式颜色
- 简写：bd+Tab键

solid 实线

dashed 虚线

dotted 点线

三.内边距(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

从上开始赋值，然后顺时针赋值，如果没有设置赋值的，看对面的！！

单方向设置方向名词 top right bottom left 如padding-top：10px；

 <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding :添加了四个方向的内边距 */
            padding: 50px;

            /* padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距 */
            /* padding 最多取4个值 */

            /* 四个值分别代表：上 右 下 左 */
            /* padding: 10px 20px 30px 40px; */

            /* 三个值 : 上 左右 下*/
            /* padding: 10px 40px 80px; */

            /* 两个值 : 上下 左右 */
            padding: 10px 20px;
            /*多值写法 顺时针 上右下左 如果遇到数不够看对面 */
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>

四.外边距(margin)

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

从上开始赋值，然后顺时针赋值，如果没有设置赋值的，看对面的！！

单方向设置方向名词 top right bottom left 如margin-top：10px；

外边距和内边距代码内容都是差不多的！！

五.CSS3盒子模型(自动内减)

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

给盒子设置属性box-sizing：border-box；即可.

优点：浏览器会自动计算多余大小，自动在内容中减去

   <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;

            /* 内减模式 */
            /* 变成CSS3的盒子模型 好处：加了border和padding不需要手动减法 */
            box-sizing: border-box;
        }
    </style>
</head>

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

六.清除默认内外边距

* {
	margin: 0;
	padding: 0;
	}

七.版心居中

<style>
        div {
            width: 1000px;
            height: 300px;
            background-color: pink;
            /* 版心居中 */
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- 版心：网页的有效内容 -->
    <!-- 版心居中 -->
    <div>版心居中</div>
</body>

八.外边距折叠现象- ①合并现象

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

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

解决方法：避免就好

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

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .one {
            margin-bottom: 50px;
        }

        .two {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>

八.1.外边距折叠现象- ②塌陷现象

互相嵌套的块级元素，子元素的margin-top会作用在父元素上
结果会导致父元素一起往下移动

解决方案：

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

黑马程序员小张

关注

0
点赞
踩
0

收藏

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

一.盒子模型的介绍1.盒子的的概念页面中的每一个标签，都可看作是一个"盒子"，通过盒子的视角更方便的进行布局浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个矩形区域，我们也形象的称之为盒子 2.盒子模型 CSS中规定每个盒子分别由：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型二.边框(border) 属性值：单个取值的连写，取值之间以空格隔开如：..
复制链接

扫一扫