CSS盒模型详解

最新推荐文章于 2024-05-26 14:33:41 发布

tomorrownan

最新推荐文章于 2024-05-26 14:33:41 发布

阅读量634

点赞数

分类专栏：前端文章标签： css html 盒子模型

本文链接：https://blog.csdn.net/w1418899532/article/details/89372872

版权

前端专栏收录该内容

25 篇文章 3 订阅

订阅专栏

CSS盒子模型这里介绍包括W3C标准盒模型和IE盒模型，然后使用border属性画出一个三角形来进行联系。

页面渲染时，dom元素所采用的布局模型，可以通过box-sizing进行设置。根据布局内容宽高设置项如下：

content-box(W3C标准盒模型)
border-box(IE盒模型)

1.盒子模型

在写一个html页面时，其实就相当于在这个页面中叠盒子。所谓一切皆盒子，div span li a 等都可以看做盒子，放置自己的内容。但是，图片、表单元素一律看作是文本，它们并不是盒子，因为它们并不能放置其他东西。

盒子内容

不管哪种盒子模型，盒子的区域都包括：、
- width和height：内容的宽度、高度（不是盒子的宽度、高度）-------盒子中的物品
- padding：内边距--------盒子的泡沫
- border：边框-------盒子的挡板
- margin：外边距------盒子与盒子之间的距离

宽度和真实占有宽度，不是一个概念！
如下CSS设置属性：
```
.box{
		width: 100px;
		height: 100px;
		padding: 50px;
		border: 2px solid red;
	}
```
效果：
标准盒模型和IE盒模型

CSS盒模型和IE盒模型的区别：
- 在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
- IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
border属性
边框上下左右都有边框颜色、边框宽度、边框样式的设置。
如：
```
border-top-style:
border-right-style:
border-bottom-style:
border-left-style: 
```
border的取值：
solid：实线
dashed：虚线
dotted：点线

3.使用border画三角形

设置盒子的width和height为0
将border的底部取消

设置border的左边和右边为白色
在这里插入图片描述
代码为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用border画三角形</title>
	<style type="text/css">
		.triangle{
			width: 0px;
			height: 0px;
			border: 100px solid red;
		    border-top-color: greenyellow;
		    border-bottom: none;
		}
		
	</style>
</head>
<body>
	<div class="triangle"></div>
</body>
</html>

每天进步一点点、充实一点点、快乐一点点、总有好事会发生，今天收到上司邮件鉴于18年的表现，预计给涨三级工资，加油！

tomorrownan

关注

0
点赞
踩
3

收藏

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

CSS盒子模型这里介绍包括W3C标准盒模型和IE盒模型，然后使用border属性画出一个三角形来进行联系。页面渲染时，dom元素所采用的布局模型，可以通过box-sizing进行设置。根据布局内容宽高设置项如下：content-box(W3C标准盒模型)border-box(IE盒模型)1.盒子模型在写一个html页面时，其实就相当于在这个页面中叠盒子。所谓一切皆盒子，div spa...
复制链接

扫一扫