css盒子模型与盒模型的浮动

最新推荐文章于 2022-08-01 00:19:33 发布

三岁九年

最新推荐文章于 2022-08-01 00:19:33 发布

阅读量798

点赞数 2

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/xh0112/article/details/110936178

版权

本文详细介绍了CSS盒模型，包括内容、内边距、边框、外边距的概念及计算方式，并探讨了浮动、脱标、外边距塌陷等布局技术，帮助理解CSS布局原理。

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

CSS盒子

行内块元素

1.盒子

盒子：容器
盒子模型英文： box model。
最常见的盒子是div span

盒子中的区域：content
在这里插入图片描述

宽 width px content
高 height content
内边距 padding
边框 border
外边距 margin

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

用代码来表示就是

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

【注】标准盒模型的宽和高和盒子真实占有的宽高不是一个概念。
盒子的宽不设置时，默认为100%；但是宽度一般会做设置，高度却不一定。

2.内边距

内容与边框的距离。
内边距的区域也会被背景渲染。
padding有四个方向：上下左右。
写法：

小属性

padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

复合属性写法
四种写法

一写法
padding:20px; 上下左右的padding相等。
二写法
padding:20px 10px; 上下左右。
三写法
padding:20px 10px 30px; 上左右下。
四写法
padding：10px 20px 30px 40px; 上右下左顺时针。

若只有单个方向的内边距与其他内边距不同，可以先设置总体，再用单一属性单独设置不同的内边距。

在这里插入图片描述

3.边框

border 边框
盒子占有的最外层的区域。

border是一个复合属性。
border有三个要素：宽度，线的类型，颜色。

按三要素拆分：
border-width 设置宽度
border-style 设置线的类型
border-color 设置颜色
按照三要素与方向设置
border-left-width 设置左边框宽度
border-left-style 设置左边框线的类型
border-left-color 设置左边框颜色
按照方向设置
border-left 左边框
border-right 右边框
border-top 上边框
border-bottom 下边框

4.margin外边距

可以用于盒子盒子之间的距离。
margin有四个方向：上下左右。
写法：

小属性

margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

复合属性写法：
四种写法:

一值法：
margin:20px; 上下左右的margin相等。
二值法：
margin:20px 10px; 上下左右。
三值法：
margin:20px 10px 30px; 上左右下。
四值法：
margin：10px 20px 30px 40px; 上右下左顺时针。

auto：代表自适应。
会将剩余的空间自动分配给设置auto的外边距。
margin : 0 auto;
可以让盒子水平居中。

示例1

/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

示例2

/*margin属性后跟两个值，第一个值设置上下边距，第二个是设置左右边距*/
margin: 10px 20px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

示例3

/*margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

示例4

/*margin属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距*/
margin: 10px 20px 30px 40px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margi