第五章CSS盒模型

于 2024-10-10 19:18:22 发布
阅读量361 收藏 15
点赞数 16
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79438088/article/details/142750242
版权

5.1盒模型的定义

盒模型示意图：


5.2 CSS元素的高度和宽度


5.2.1 盒模型的宽度

width


5.2.2 盒模型的高度

height

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			
			div{
				/*5.2.1 盒模型的宽度*/
				width: 40px;
				/* 5.2.2 盒模型的高度 */
				height: 30px;
				/* 5.3 边距设置和边框设置 */
				border: 10px #00ff00 solid;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>


5.3 边距设置和边框设置


5.3.1 外边距设置

margin:边框和其他盒子的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 40px;
				height: 30px;
			}
			div{
				/*5.2.1 盒模型的宽度*/
				width: 40px;
				/* 5.2.2 盒模型的高度 */
				height: 30px;
				/* 5.3 边距设置和边框设置 */
				border: 10px #00ff00 solid;
				/* 5.3.1 外边距设置*/
				margin: 20px;
				
			}
		</style>
	</head>
	<body>
		<div><img src="img/1.1 - 副本.jpg"/></div>
		<div><img src="img/1.1 - 副本.jpg"/></div>
	</body>
</html>

5.3.1.1 上外边距
margin-top: length|percent|auto

参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对的高度。auto值为自动提取边距值，是默认值。
说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元要的 height属性或width属性，或者设定position属性为absolute。


5.3.1.2 右外边距
margin-right: length | percent | auto

参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对的高度。auto值为自动提取边距值，是默认值。
说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元要的 height属性或width属性，或者设定position属性为absolute。


5.3.1.3 下外边距
margin-bottom: length | percent |auto

参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对的高度。auto值为自动提取边距值，是默认值。
说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元要的 height属性或width属性，或者设定position属性为absolute。


5.3.1.4 左外边距
margin-left:length |percent |auto

参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对的高度。auto值为自动提取边距值，是默认值。
说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元要的 height属性或width属性，或者设定position属性为absolute。


5.3.1.5 外边距
margin: length |percent |auto

参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度，左右外边距允许使用负数。auto值为自动提取边距值，是默认值。
说明：设置对象四边的外边距，包括margin-top(上外边距)、margin-right(右外边距)、margin-bottom（下外边距)、margin-left(左外边距)，外边距始终是透明的。
如果只提供1个参数，将应用于全部的外边距。
如果提供2个参数，第1个参数应用于上、下外边距，第2个参数应用于左、右外边距。
如果提供3个参数，第1个参数应用于上外边距，第2个参数应用于左、右外边距，第3个参数应用于下外边距。


5.3.2 外边距的合并


5.3.2.1 行级元素外边距合并

display: inline


5.3.2.2 块级元素外边距合并

display: block


5.3.3 内边距设置

padding:边框和内容区之间的空白距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 40px;
				height: 30px;
			}
			div{
				/*5.2.1 盒模型的宽度*/
				width: 40px;
				/* 5.2.2 盒模型的高度 */
				height: 30px;
				/* 5.3 边距设置和边框设置 */
				border: 10px #00ff00 solid;
				/* 5.3.1 外边距设置*/
				margin: 20px;
				/* 5.3.3 内边距设置 */
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div><img src="img/1.1 - 副本.jpg"/></div>
		<div><img src="img/1.1 - 副本.jpg"/></div>
	</body>
</html>


5.3.4 边框设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 40px;
				height:30px;
			}
			div{
				/*5.2.1 盒模型的宽度*/
				width: 40px;
				/* 5.2.2 盒模型的高度 */
				height: 30px;
				/* 5.3 边距设置和边框设置 */
				border: 10px #00ff00 solid;
				/* 5.3.1 外边距设置*/
				margin: 20px;
				/* 5.3.3 内边距设置 */
				padding: 20px;
				/* 5.3.4 边框设置 */
				/* 5.3.4.1上边框 */
				border-top: 10px #00ff00 solid;
				/* 5.3.4.2右边框 */
				border-right: 10px #ff0000 solid;
				/* 5.3.4.3下边框 */
				border-bottom: 10px #0000ff solid;
				/* 5.3.4.4 左边框 */
				border-left: 10px #000000 solid;
			}
		</style>
	</head>
	<body>
		<div><img src="img/1.1 - 副本.jpg"/></div>
		<div><img src="img/1.1 - 副本.jpg"/></div>
	</body>
</html>

5.3.4.1上边框
border-top:border-style | border-width | border-color

参数：该属性是复合属性。需要通过参数设置来实现。


5.3.4.2右边框
border-right:border-style | border-width | border-color

参数：该属性是复合属性。需要通过参数设置来实现。


5.3.4.3下边框
border-bottom:border-style | border-width | border-color

参数：该属性是复合属性。需要通过参数设置来实现。


5.3.4.4 左边框
border-left:border-style | border-width | border-color

参数：该属性是复合属性。需要通过参数设置来实现。


5.3.4.5 边框样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 40px;
				height:30px;
			}
			div{
				/*5.2.1 盒模型的宽度*/
				width: 40px;
				/* 5.2.2 盒模型的高度 */
				height: 30px;
				/* 5.3 边距设置和边框设置 */
				border: 10px #00ff00 solid;
				/* 5.3.1 外边距设置*/
				margin: 20px;
				/* 5.3.3 内边距设置 */
				padding: 20px;
				/* 5.3.4 边框设置 */
				/* 5.3.4.1上边框 */
				border-top: 10px #00ff00 solid;
				/* 5.3.4.2右边框 */
				border-right: 10px #ff0000 dashed;
				/* 5.3.4.3下边框 */
				border-bottom: 10px #0000ff dotted;
				/* 5.3.4.4 左边框 */
				border-left: 10px #000000 double;
			}
		</style>
	</head>
	<body>
		<div><img src="img/1.1 - 副本.jpg"/></div>
		<div><img src="img/1.1 - 副本.jpg"/></div>
	</body>
</html>

5.3.4.6 边框宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 40px;
				height:30px;
			}
			div{
				/*5.2.1 盒模型的宽度*/
				width: 40px;
				/* 5.2.2 盒模型的高度 */
				height: 30px;
				/* 5.3 边距设置和边框设置 */
				border: 10px #00ff00 solid;
				/* 5.3.1 外边距设置*/
				margin: 20px;
				/* 5.3.3 内边距设置 */
				padding: 20px;
				/* 5.3.4 边框设置 */
				/* 5.3.4.1上边框 */
				border-top: 10px #00ff00 solid;
				/* 5.3.4.2右边框 */
				border-right: thin #ff0000 dashed;
				/* 5.3.4.3下边框 */
				border-bottom: medium #0000ff dotted;
				/* 5.3.4.4 左边框 */
				border-left: thick #000000 double;
			}
		</style>
	</head>
	<body>
		<div><img src="img/1.1 - 副本.jpg"/></div>
		<div><img src="img/1.1 - 副本.jpg"/></div>
	</body>
</html>

5.3.4.7 边框颜色

border-color


5.3.5 新增边框属性


5.3.5.1圆角边框

border-radius

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 40px;
				height:30px;
			}
			div{
				/*5.2.1 盒模型的宽度*/
				width: 40px;
				/* 5.2.2 盒模型的高度 */
				height: 30px;
				/* 5.3 边距设置和边框设置 */
				border: 10px #00ff00 solid;
				/* 5.3.1 外边距设置*/
				margin: 20px;
				/* 5.3.3 内边距设置 */
				padding: 20px;
				/* 5.3.4 边框设置 */
				/* 5.3.4.1上边框 */
				border-top: 10px #00ff00 solid;
				/* 5.3.4.2右边框 */
				border-right: thin #ff0000 dashed;
				/* 5.3.4.3下边框 */
				border-bottom: medium #0000ff dotted;
				/* 5.3.4.4 左边框 */
				border-left: thick #000000 double;
				/* 5.3.5 新增边框属性 */
				 /* 5.3.5.1圆角边框 */
				 border-radius: 25px;
				
			}
		</style>
	</head>
	<body>
		<div><img src="img/1.1 - 副本.jpg"/></div>
		<div><img src="img/1.1 - 副本.jpg"/></div>
	</body>
</html>

5.3.5.2阴影边框

box-shadow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			img{
				width: 40px;
				height:30px;
			}
			div{
				/*5.2.1 盒模型的宽度*/
				width: 40px;
				/* 5.2.2 盒模型的高度 */
				height: 30px;
				/* 5.3 边距设置和边框设置 */
				border: 10px #00ff00 solid;
				/* 5.3.1 外边距设置*/
				margin: 20px;
				/* 5.3.3 内边距设置 */
				padding: 20px;
				/* 5.3.4 边框设置 */
				/* 5.3.4.1上边框 */
				border-top: 10px #00ff00 solid;
				/* 5.3.4.2右边框 */
				border-right: thin #ff0000 dashed;
				/* 5.3.4.3下边框 */
				border-bottom: medium #0000ff dotted;
				/* 5.3.4.4 左边框 */
				border-left: thick #000000 double;
				/* 5.3.5 新增边框属性 */
				 /* 5.3.5.1圆角边框 */
				 border-radius: 25px;
				/* 5.3.5.2阴影边框 右偏移量 下偏移量 模糊距离 颜色*/
				box-shadow: -15px 20px 50px #ff00ff;
			
			}
		</style>
	</head>
	<body>
		<div><img src="img/1.1 - 副本.jpg"/></div>
		<div><img src="img/1.1 - 副本.jpg"/></div>
	</body>
</html>

5.3.5.3图片绘制边框

border-image

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.11</title>
		<style type="text/css">
			div{
				margin: 100px;
				border: 50px solid blue;
				border-image: url(img/border.jpg)5 10 round;
			}
		</style>
	</head>
	<body>
		<div>利用border-image属性设置图片边框铺满效果。上下向内偏移5像素，左右向内偏移10像素。</div>
	</body>
</html>


5.4 CSS元素的定位

position:static | relative | absolute | fixed

参数：static是默认值，默认没有定位，或者用于取消特殊定位的继承，恢复默认，又称静态定位。relatives是相对定位，生成相对定位的元素，相对于其正常位置进行定位。absolute是绝对定位，相对于父元素或者浏览器窗口进行定位，需要top、right、bottom和left属性辅助完成。fixed是固定定位，相对于浏览器窗口进行定位，需要top、right、bottom、left属性辅助完成。


5.4.1 static 定位

static是HTML元素的默认值，不受top、right、bottom和left属性影响，元素出现在正常的文档流中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例5.12</title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
			}
			.son2{
                border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：无定位的盒子
		<h2>静态定位的盒子</h2>
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
	</body>
</html>


5.4.2 relative定位

relative不脱离文档流的布局，需要参照父元素的四条边(不是浏览器)，设置自身top、right、bottom和left属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: relative;
				top: 10px;
				left: 30px;
			}
			.son2{
                border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：relative的盒子
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
	</body>
</html>


5.4.3 absolute定位

absolule脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: absolute;
				top: 10px;
				left: 30px;
			}
			.son2{
                border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：absolute盒子
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
	</body>
</html>

5.4.3.1 相对浏览器绝对定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: absolute;
				bottom: 10px;
				right: 30px;
			}
			.son2{
                border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：相对于浏览器定位的盒子
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
	</body>
</html>

5.4.3.2 相对父盒子绝对定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
				position: relative;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: absolute;
				top: 10px;
				left: 30px;
			}
			.son2{
                border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：relative定位
		<div class="son1">子盒子1：相对父盒子绝对定位的盒子
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
	</body>
</html>


5.4.4 fixed定位

fixed类似于absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置。相对于浏览器窗口是固定不变的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
				border: 2px solid red;
				width: 300px;
				height: 250px;
			}
			.son1{
				border: 2px double red;
				background-color: yellow;
				width: 200px;
				height: 80px;
				position: fixed;
				bottom: 10px;
				right: 30px;
			}
			.son2{
                border: 2px double red;
				width: 200px;
				height: 25px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">父盒子：无定位
		<div class="son1">子盒子1：fixed盒子
		</div>
		<div class="son2">子盒子2：无定位的盒子
		</div>
		</div>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	</body>
</html>


5.5 CSS元素的浮动


5.5.1 盒子的浮动添加

float: left | right | none

left元素浮动到左边，即向左侧靠拢，则右侧可以有文字环绕；right元素浮动到右边，即向右侧靠拢，则左侧可以有文字环绕；默认值none就是标准流通常的显示状态。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<style type="text/css">
					.father{
						background-color: #ffccff;
						border: 2px solid red;
						padding: 5px;
					}
					.father div{
						width: 100px;
						height: 20px;
						padding: 10px;
						margin: 10px;
						border: 2px dashed blue;
						background-color: #ccffff;
					}
					.father p{
						border: 2px dotted green;
						background-color: #ffff99;
					}
				</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
			<div style="float: right;">右浮动盒子1</div>
			<div>标准流盒子2</div>
			<div>标准流盒子3</div>
			<p>css中，有一个float属性，默认为none，也就是标准流通常的情况。若将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认的情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>


5.5.2 盒子的浮动清除

​clear: left | right | both | none

参数：left清除左边浮动元素，即不允许左边有浮动对象；right清除右边浮动元素，哪不允许右边有浮动对象；Both同时清除左右两边的浮动元素，即不允许左右两边有浮动时象；默认值none。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>right</title>
			<style type="text/css">
					.father{
						background-color: #ffccff;
						border: 2px solid red;
						padding: 5px;
					}
					.father div{
						width: 100px;
						height: 20px;
						padding: 10px;
						margin: 10px;
						border: 2px dashed blue;
						background-color: #ccffff;
					}
					.father p{
						border: 2px dotted green;
						background-color: #ffff99;
						clear: both;
					}
				</style>
	</head>
	<body>
		<div class="father">
			<h2>父盒子</h2>
			<div style="float: right;">右浮动盒子1</div>
			<div style="float: right;">右浮动盒子2</div>
			<div style="float: right;">右浮动盒子3</div>
			<p>css中，有一个float属性，默认为none，也就是标准流通常的情况。若将float属性的值设置为left或right，元素就会向其父级元素的左侧或右侧靠近，同时默认的情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度确定。</p>
		</div>
	</body>
</html>


5.6 综合案例——昵心美食空间
 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>昵心美食空间</title>
		<style type="text/css">
			*{
				background-color:#FFFF99;
			}
			a{
				color: red;
			}
			.all{
				width: 700px;
				height:650px;
				margin:10px auto;
				padding:5px;
				background-image:url(img/bg1.JPG);
			}
			.banner{
				width:700px;
				height:70px;
			}
			.menu{
			width:690px;
			height:40px;
			padding:5px;
			}
			.main{
			width:700px;
			height:450px;
			margin:5px 0px;
			position: relative;
			}
			.left,.right{
			width:150px;
			height:440px;
			border:1px solid #999;
			float: left;
			}
			.middle{
			width:384px;
			height:450px;
			margin:0px 5px;
			float:left;
			font-size:20px;
			font-family:"楷体";
			font-weight:700;
			color:#0000FF;
			}
			.one{
			width:380px;
			height: 155px;
			border: 1px solid #999;
			}
			.two{
			width:255px;
			height:100px;
			border:5px double red;
			margin-top:20px;
			margin-bottom:20px;
			border-radius:25px;
			}
			.three{
			width:380px;
			height:135px;
			border: 1px solid #999;
			}
			.bottom{
			width:700px;
			height:70px;
			}
		</style>
	</head>
	<body>
		<div class=" all">
		<div class=" banner">
		<img src="img/banner.jpg" width="700px" height="70px" />
		</div>
		<div class=" menu">
		<img src="img/menu.jpg" width="690px"height="40px" />
		</div>
		<div class=" main">
		<div class="left">
		<marquee direction="up">
			<img src="img/mm_1.jpg" width="150px" height="140px" />
			<img src="img/mm_2.jpg" width="150px" height="140px"/> 
			<img src="img/mm_3.jpg" width="150px" height="140px"/>
		</marquee>
		</div>
			<div class="middle">
			<div class="one">
			<img src="img/font.jpg" width="25px"height="25px"/>为您推荐
			<br><br>
			<img src="img/x_1.jpg" width="80px" height="40px"/>
			<img src="img/x_2.jpg" width="80px" height="40px" />
			<img src="img/x_3.jpg" width="80px" height="40px" />
			<img src="img/x_4.jpg" width="80px" height="40px" />
			<img src="img/x_5.jpg" width="80px" height="40px"/>
			<img src="img/x_6.jpg" width="80px" height="40px" />
			</div>
			<center>
			<div class="two">
			<hl>昵心美食空间</h1>
			</div>
			</center>
			<div class="three">
			<img src="img/font.jpg" width="25px" height="25px"/>团购信息
			<br>
			<a herf="#">1.火锅团购</a ><br>
			<a herf="#">2. 烧烤团购</a ><br>
			<a herf="#">3.自助餐团购</a ><br>
			<a herf="#">4. 新春特惠</a >
			</div>
			</div>
			<div class="right">
			<marquee direction="up">
			<img src="img/good_1.jpg" width=" 150px" height="140px" />
			<img src="img/good_2.jpg" width="148px" height="140px" />
			<img src="img/good_3.jpg" width="148px"height="140px"/>
			</marquee>
			</div>
			</div>
			<div class=" bottom">
			<hr color="#0000FF">
			<center style="font-family:'楷体'";>版权所有&copy;昵心美食空间<br/>
			地址：江门市大学路XXX号邮编：500000电话：0750-9999999</center>
			</div>
			</div>
	</body>
</html>

冬季扶风
关注
【CSS3】第5章 盒子模型
笔触狂放的博客
12-29 2065
熟悉盒子模型的概念，能够说出盒子模型的基本结构。掌握标签的用法，能够使用标签制作页面模块。掌握边框属性的用法，能够为盒子设置不同的边框效果。掌握边距属性的用法，能够使用内边距和外边距设置盒子空间距离。了解盒子宽度属性和高度属性，能够计算盒子的实际宽度。掌握box-shadow属性的用法，能够为盒子添加阴影。熟悉box-sizing属性的用法，能够控制盒子宽度和高度范围。掌握背景属性的用法，能有为盒子设置不同样式背景。
第五章 CSS盒子模型
2402_87161397的博客
10-02 1427
width在CSS中，border属性是一个简写属性，可以用来一次性设置边框的宽度、样式和颜色。每个方向的边框也可以单独设置，如border-top和。这些属性各自接受三个值：宽度（）、样式（）和颜色（通过对border及其相关属性的灵活运用，你可以轻松地控制元素边框的各种细节，从而实现丰富多彩的视觉效果。无论是在简单的网页布局还是复杂的设计项目中，边框都是一个不可或缺的工具，它不仅提升了用户体验，也增强了页面的整体美观度。记住，在进行布局时考虑到边框的存在及其对元素尺寸的影响，合理利用。
第五章 CSS盒模型
whitesandcnm的博客
09-24 1263
盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：1. 内容区域（Content）： 显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。2. 内边距（Padding）： 内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。
第五章 - CSS盒模型
zl960320的博客
11-18 230
我们学习页面布局要学习三大核心，盒子模型，浮动和定位，盒子模型能够非常好的帮助我们定位。接下来对这些内容进行详细介绍。 1. 盒模型 1. 1 看透网页布局的本质 我们在进行网页布局的过程中，需要做以下准备： 先准备好相关的网页元素，网页元素基本都是盒子BOX 利用CSS设置好盒子样式，然后摆放到相应位置 往盒子里面装内容 网页布局的核心本质：利用CSS摆放盒子 1.2 盒子模型组成 所谓的盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。 CSS盒模型本
css盒子模型
2401_83342251的博客
06-12 1108
之前我们设置的div盒子，它只是盒子最里面内容的大小，当你在设置内边距和边框，整个盒子的宽和高都会增大，但是怪异盒模型是刚开始设置的div盒子大小包括了内边距和边框，就是当你给盒子加内边距和边框时，整个盒子的大小不变，只是原本没设置内边距和边框时，盒子大小都是盒子最里面那部分的，当你设置了内边距和边框以后，最里面部分开始变小，内边距和边框的大小就是最里面那部分减去的。width/height(元素的内容宽或高)：内容区(content)、内边距(padding)以及边框(border)的总和。
前端css中盒子模型的各种属性
小蜗牛764号的博客
04-28 1237
本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。
CSS盒模型布局
m0_74995879的博客
04-16 1120
css盒模型喔！
CSS盒模型完整介绍
陈坚泓的博客
03-07 8420
CSS盒模型完整介绍盒模型的认识一、基本概念：标准模型+IE模型二、标准模型和IE模型的区别三、css如何设置获取这两种模型的宽和高四、javascript如何设置获取盒模型对应的宽和高五、外边距重叠六 、BFC推荐阅读 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 盒模型的认识 文章主要有以下内容 基本概念：标准模型+IE模型。 包括margin,border,padding,content 标准模型和IE模型的区别 css如何设置获取这两种模型的宽和高 js如何
CSS 盒子模型（box model）
小楼一夜听春雨，深巷明朝卖杏花
03-01 2736
盒子虽然变大了但是内容在往中间挤，中间的内容还是在盒子的左上角，剩下的是内边距帮你填充的。如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。上下是一个值，左右是一个值。，它包括：外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。蓝色的是一个盒子，这是一个元素，这个元素包含内边距padding，边框和外边距。内容文字图片是实物，然后内边距，边框，外边距。
第五章 CSS盒模型 案例所需图片
10-09
第五章 CSS盒模型 案例所需图片
网页设计与制作教程(HTMLCSSJavaScript)第2版第5章CSS盒模型.pptx
11-13
网页设计与制作教程（HTML+CSS+JavaScript）第2版第5章CSS盒模型 本章节主要介绍CSS盒模型的概念和应用，包括盒模型的组成部分、边框和外边距、内边距、盒模型的宽度和高度、块级元素与行级元素的区别、margin叠加...
第16章 CSS盒模型[下].pdf
04-27
在HTML5中，CSS盒模型是构建网页布局的核心概念，它决定了元素框处理元素内容（content）、内边距（padding）、边框（border）以及外边距（margin）的方式。在给定的文件内容中，涉及到了CSS盒模型的三个主要学习...
第16章 CSS盒模型[上]
08-11
标题“第16章 CSS盒模型[上]”暗示我们将讨论盒模型的基本概念和属性，可能涵盖内容区、填充、边框和外边距的设置。通常，这部分会讲解如何使用CSS来调整这些属性，以便在不同浏览器间实现兼容性布局。 在描述中...
CSS实现文本超出隐藏并显示省略号
everfoot的博客
10-02 575
通过结合使用和这三个CSS属性，我们可以轻松地在CSS中实现文本超出隐藏并显示省略号的效果。这一技巧在处理长文本、保持页面整洁和美观方面非常有用。希望本文的介绍和示例能帮助你更好地理解和应用这一技术。
【CSS in Depth 2 精译_044】第七章 响应式设计概述
PeacefulWinter的博客
10-02 1194
本篇为《CSS in Depth》全新第2版第7章响应式设计的概述部分，重点介绍了前端响应式设计理念诞生的相关背景。篇幅限制，本篇暂不与7.1节合并。学习过程中可以先准备好相应的章节源码，以便后续跟随介绍进行实操演练。建议先收藏。
使用CSS实现酷炫加载
qq_33003143的博客
10-03 947
使用CSS实现炫酷loading动画
CSS弹性布局
最新发布
2401_82561004的博客
10-09 918
Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex布局。
CSS 布局——清除浮动 （二）
m0_74012211的博客
10-06 413
CSS 布局——清除浮动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值