css盒模型

最新推荐文章于 2024-06-22 17:15:40 发布

weixin_46382503

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/weixin_46382503/article/details/104484011

版权

css盒模型

一：什么是盒模型
所有的HTML元素都可以看做是一个个的盒子，这个盒子由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。
举个简单的例子，从网上买了一箱口罩，整个箱子就可以看做是网页的body内容区，打开箱子，里边有一个一个的独立包装盒，这些独立包装盒之间的区域就是margin（外填充）区域，而独立包装盒就相当于border（边框）区域，打开独立的包装盒，里边的口罩就是content（内容区域）而口罩和独立包装的盒子之间的空隙就是padding（内边距）区域。
所以整个盒子的宽高尺寸为content+padding+border+margin
如图
在这里插入图片描述
二：四个属性的作用
内容区：
盒子的中心位置，主要是显示内容信息，这些内容可以说文本、图片等多种类型
内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。
下边代码为创建一个300px*300px，背景色为红色的内容区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
			width: 300px;
			height: 300px;
			background-color: red;
			}
		</style>
	</head>
	<body>
		<div >
		</div>
	</body>
</html>

浏览器显示：
在这里插入图片描述
内边距：
Padding的属性
padding -top ：上填充
padding -bottom ：下填充
padding -left ：左填充
padding-right ：:右填充

下边代码为300*300的红色内容区域添加上下左右内边距分别为100px；200px，300px，400px。因为内填充的区域会显示红色的背景色，为区分，在里边添加了一个300像素的青色方块。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d2{width: 300px;height: 300px;background-color: red;
			padding-top: 100px;
			padding-bottom: 200px;
			padding-left: 300px;
			padding-right: 400px;
			}
			#d1{width: 300px;height:300px;background-color: aqua;}
		</style>
	</head>
	<body>
		<div class="d2" >
			<div id="d1">
			</div>
		</div>
	</body>

浏览器显示： ![](https://img-blog.csdnimg.cn/20200224200837138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM4MjUwMw==,size_16,color_FFFFFF,t_70) **边框：** 边框的属性有 border-style：边框样式，值有solid（实线）dashed（虚线）dotted（点线） Border-width：边框粗细 Border-color：边框颜色

下边代码为300像素*300像素的红色方块加一条5像素蓝色的实线边框，

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		div{
			width: 300px;
			height: 300px;
			background-color: red;
			border-style: solid;
		    border-width: 5px;
			border-color: blue;
		}
		</style>
	</head>
	<body>
		<div >
		</div>
	</body>
</html>

在这里插入图片描述

浏览器显示：

外填充：
属性有margin-top 上外边距
margin-bottom 下外边距
margin- left 左外边距
margin-right 右外边距

下边代码为两个300px的红色方块下边距为200px

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

浏览器显示：
在这里插入图片描述
简写方法
Margin：20px 一个值为上下左右四个外边距都是20px
Margin：20px 10px 两个值为上下、左右边距分别是20像素和10像素
Margin：20px 10px 两个值为上下、左右边距分别是20像素和10像素
Margin：20px 10px 5px 三个值为上、左右、下边距分别是20像素10像素
和5像素
margin：20px 10px 5px 15px 四个值为上、右、下、左边距为20、10、5、15像素

weixin_46382503

关注

0
点赞
踩
0

收藏

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

css盒模型一：什么是盒模型所有的HTML元素都可以看做是一个个的盒子，这个盒子由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。举个简单的例子，从网上买了一箱口罩，整个箱子就可以看做是网页的body内容区，打开箱子，里边有一个一个的独立包装盒，这些独立包装盒之间的区域就是margin（外填充）区域，而独立包装盒就相当于border（边框）...
复制链接

扫一扫