CSS盒模型

PD137

于 2019-09-19 16:25:21 发布

阅读量113

点赞数

分类专栏： web前端文章标签： CSS

本文链接：https://blog.csdn.net/PD137/article/details/101026507

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、关于

用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

box-sizing(有3个值)：border-box,padding-box,content-box.

标准盒子模型：

IE盒子模型：

区别：

从图中可看出，区别是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：
标准盒子模型的盒子宽度：左右border+左右padding+width
IE盒子模型的盒子宽度：width
在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型
前面提到的box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;/* 将所有的元素编辑都设置为0 */
			}
			.item{
				width: 210px;
				height: 136px;
				float: left;
				margin: 20px;/* 设置图片间的边距 */
			}
			#box{
				/* height: 136px; */
				overflow: auto;
				/* 因为一开始，父元素只有宽度，没有高度，设置与子元素等高的高度 */
				width: 750px;
				margin: auto;
				/* 让父元素的边距自动设置,效果是父元素左右两边的边距会相等,自然父元素会居中显示(在整个页面),水平方向有效 */
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item" style="background: url(img/b.jpg);"></div>
			<div class="item"style="background: url(img/bg.jpg);"></div>
			<div class="item"style="background: url(img/web.jpg);"></div>
		</div>
	</body>
</html>

如图：

例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;/* 将所有的元素编辑都设置为0 */
			}
			.item{
				width: 210px;
				height: 136px;
				float: left;
				margin: 20px;/* 设置图片间的边距 */
				border: 5px solid black;  /* 给每个div添加设置一个边框,solid实线, */
				padding: 25px;/* 给三个div填充内边距 */
			}
			.item img{
				height: 136px;
				width: 210px;
			}
			#box{
				/* height: 136px; */
				overflow: auto;/* 因为一开始，父元素只有宽度，没有高度，设置与子元素等高的高度 */
				width:1000px;
				margin: auto;/* 让父元素的边距自动设置,效果是父元素左右两边的边距会相等,自然父元素会居中显示,水平方向有效 */
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item" >
				<img src="../003图片的使用/img/223.jpg" />
				测试测试测试测试测
			</div>
			<div class="item">
				<img src="../003图片的使用/img/zz.jpg" >
			</div>
			<div class="item">
				<img src="../003图片的使用/img/丰收.jpg" >
			</div>
		</div>
	</body>
</html>

如图：

PD137

关注

0
点赞
踩
0

收藏

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

1、关于用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。box-sizing(有3个值)：border-box,padding-box,content-box.标准盒子模型：IE盒子模型：区别：从图中可看出，区别是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，wi...
复制链接

扫一扫

专栏目录