CSS盒模型

xiangxiongfly915

已于 2022-12-10 14:19:46 修改

阅读量391

点赞数

分类专栏： # CSS & Less & Sass 文章标签： CSS 盒模型

于 2020-07-21 23:15:25 首次发布

本文链接：https://blog.csdn.net/qq_14876133/article/details/106879862

版权

CSS & Less & Sass 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

文章目录

CSS盒模型

CSS盒模型

概述

在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。

盒子结构

每个盒模型由以下部分组成：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
盒子总大小 = content + padding + border

盒模型

content 内容区

内容区的大小由width和height两个属性设置。

只有块元素才可以设置width和height，行内元素无法设置。

语法

width: 像素值;
height: 像素值;

使用

.box {
    width: 200px;
    height: 200px;
    background-color: red;
}

border 边框

边框属于盒子内部，边框大小会影响整个盒子的大小。
语法

border: border-width border-style border-color;

使用

.box {
    border: 10px yellowgreen solid;
}

padding 内边距

内边距指边框到内容之间的距离，内边距属于盒子内部，会影响盒子的大小。

语法

padding: 像素值;

使用

.box {
    padding: 10px;
}

margin 外边距

外边距指边框到父元素或兄弟元素之间的那一部分，在边框的外部。

外边距不会影响盒子的大小，会影响盒子的位置。

语法

margin: 像素值;

使用

.box {
    margin: 10px;
}

盒子模型：box-sizing

box-sizing用于设置盒子尺寸的计算方式

box-sizing属性	说明
content-box	默认值，盒子实际尺寸=width/height+padding+border
border-box	盒子实际尺寸=width/height，padding、border将会内缩

.up {
    width: 100px;
    height: 100px;
    border: 10px red solid;
    box-sizing: content-box;
}

.down {
    width: 100px;
    height: 100px;
    border: 10px green dashed;
    box-sizing: border-box;
}

box-sizing

border:0 和 border:none 区别

border:0

border:0表示把border设置为0px。虽然0px在页面上看不见，但是浏览器仍然会对border进行渲染。

border:none

border:none表示把border设置为none，浏览器不会解析border，因此不会消耗内存资源。

外边距叠加问题

外边距叠加也成为margin叠加，通常分3种情况：

同级元素。
父子元素。
空元素。

同级元素

当遇到上下相邻的两个块元素时，上面的元素为margin-bottom: 50px;，下面的元素为margin-top: 100px;，就会发生外边距合并，它们的间距会取两个值中的最大的。

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                background-color: red;
                text-align: center;
                box-sizing: border-box;
                border: 1px solid black;
                text-align: center;
            }

            .one {
                margin-bottom: 50px;
            }

            .two {
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="one">one </div>
        <div class="two">two</div>
    </body>
</html>

父子元素

当一个元素包含另一个元素存在父子关系，这时父元素和子元素相邻的外边距就会发生合并。

解决办法：

父元素设置border或padding。
父元素设置overflow: hidden;。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">
			html {
				background-color: gray;
			}

			div {
				text-align: center;
				box-sizing: border-box;
				text-align: center;
			}

			.one {
				background-color: red;
				width: 200px;
				height: 200px;
				margin-top: 50px;
			}

			.two {
				background-color: green;
				width: 100px;
				height: 100px;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="one">
			<div class="two"></div>
		</div>
	</body>
</html>