web前端学习笔记05-CSS内边距、外边距、盒子模型、页面布局

最新推荐文章于 2023-07-11 20:20:15 发布

喵了个咪蛋儿

最新推荐文章于 2023-07-11 20:20:15 发布

阅读量781

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端学习文章标签： css html5 html

本文链接：https://blog.youkuaiyun.com/weixin_42727838/article/details/106804803

web前端学习专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了CSS中的内边距、外边距概念，以及如何利用它们进行页面布局。深入探讨了盒子模型，包括如何设置边框、内边距以及如何解决padding和border改变盒子大小的问题。同时，阐述了块元素、内联元素和内联块元素的区别，以及它们在页面布局中的应用和转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS内边距（内补白、内补丁）

【内边距设置常用属性】

关键字	释义
padding	检索或设置对象四边的内边距，参数个数1或2(上下/左右)或4(上/右/下/左)
padding-top	检索或设置对象顶部的内边距， top顶，bottom低，left左，right右

&& padding会改变元素的大小

二、CSS外边距（外补白、外补丁）

【外边距设置常用属性】

关键字	释义
margin	检索或设置对象四边的外边距，参数个数1或2(上下/左右)或4(上/右/下/左)
margin-top	检索或设置对象顶部的外边距， top顶，bottom低，left左，right右

&& 利用margin让元素水平居中： margin: 0 auto;
&& 利用margin合并边框：外边距值设为负的边框宽度

/*上面一个元素*/
border: 5px solid green;
/*下面一个元素*/
margin-top: -5px;

三、盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中的盒子来比喻，辅助进行元素样式设置。把元素看作盒子，则对应样式分别为，盒子的边框-border、盒子内的内容与边框之间的间距-padding、盒子与盒子之间的间距-margin。

【 盒子的实际尺寸】

盒子宽度= width + padding左右 + border左右
盒子高度= height + padding上下 + border上下
元素占位大小(宽) = width + padding左右 + border左右 + margin左右
元素占位大小(高) = height + padding上下 + border上下 + margin上下

&& 解决padding和border改变盒子大小：即设置内边距但元素大小不变 `box-sizing: border-box;`

四、页面布局——块元素、内联元素和内联块元素

4.1 块元素

块元素，也称为行元素，布局中常用的标签有：div、p、ul、li、h1-h6、dl、dt、dd等，它们在布局中的行为：

支持全部的样式
宽度默认为父级宽度的100%
盒子占据一行，即使设置了宽度

4.2 内联元素

内联元素，也称为行内元素，布局中常用的标签有：a、span、em、b、strong、i 等，它们在布局中的行为：

支持部分样式，不支持宽、高、margin上下
宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置子元素垂直对齐方式

4.3 内联块元素

内联块元素，也称行内块元素，是新增元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但仍归类于内联元素，它们在布局中的行为：

支持全部样式
如果没有设置宽高，则宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置子元素垂直对齐方式

【 三种元素比较】

	块元素	行内元素	行内块元素
常用标签	div p ul li h1-h6 dl dt dd	a span em b strong i	img input类似
是否支持全部样式	是	否	是
宽高	宽度默认为父元素的100%	不支持，宽高由内容决定	支持，默认为内容的宽高
是否独占一行	是	否	否
margin	支持	仅支持margin左右	支持
padding	支持	支持	支持

4.4 三种元素之间的转换

display属性用来设置元素的类型及隐藏。
【 display常见属性值】

属性值	释义
none	元素隐藏且不占位置
block	元素以块元素显示
inline	元素以内联元素显示（不常用）
inline-block	元素以内联块元素显示（html5中基本不用）

本节代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/c05.css"/>
		<title>CSS内边距、外边距、盒子模型、页面布局</title>
	</head>
	<body>
		<!--<div>你好</div>-->
		<div class="item1"></div>
		<div class="item2"></div>		
		<div class="box1">晚上好</div><br/>
		<div class="box2">BOX2BOX</div><br/>
		<div class="box3">BOX3BOX</div><br/>
		<div class="box4">BOX4BOX</div><br/>
		
		<!--页面布局-->
		<div class="layout1"></div>
		上面是一个块级元素，<span class="mm_span">它独占一行。</span>内联元素不独占一行 <br/>
		<br/><br/><br/>
		当记忆的风吹来时让思绪的花在指尖淡淡飘香 <br/>
		<!--代码换行：中间会产生间距，多了个空格-->
		当记忆的风吹来时
		让思绪的花在指尖淡淡飘香
		
		<br/><br/>
		<!--子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置子元素垂直对齐方式-->
		<div class="layout2"><b>HELLO</b></div>
		
		<br/><br/>
		当记忆的风吹来时，<input type="text" /> ，让思绪的花在指尖淡淡飘香 
		
		<br/><br/>
		<!--元素类型转换-->
		<div class="c1 change1">111</div>
		<div class="c2 change1">222</div>
		<div class="c3 change1">333</div>
		
		轻握一份懂得，
		<span class="change2">在似水的流年中，</span>
		<span class="change2">轻倚一袭心湖的斑斓，</span>
		<span class="change2">让真情点亮夜的星光，</span>
		<span class="change2">在纯净的音乐里，</span>
		<span class="change2">倾听心灵的纤尘不染。</span>
			
		<!--元素隐藏与显示-->
		<div class="hide k1">k1</div>
		<div class="hide k2">k2</div>
		<div class="k3"><span>我显示了</span></div>
		
	</body>
</html>

div{
	/*width: 100px;*/
	/*height: 100px;*/
	/*background-color: peachpuff;*/
	/*border: 5px solid green;*/
	
	/*内边距*/
	/*padding-top: 30px;*/
	/*padding-left: 30px;*/
	/*padding: 10px 20px;*/
	/*padding: 10px 20px 10px 20px;*/
}
.item1{
	width: 100px;
	height: 100px;
	background-color: plum;
	/*外边距*/
	/*margin-bottom: 50px;*/
	/*margin-left: 5px;*/
	/*元素水平居中*/
	/*margin: 0 auto;*/
	margin-top: -5px;
}
.item2{
	width: 100px;
	height: 100px;
	background-color: paleturquoise;
	/*margin: 10px 20px;*/
	/*margin: 10px 10px 10px 10px;*/
	margin-top: -5px;
}
.box1{
	width: 200px;
	height: 200px;
	background-color: orange;
	border: 10px solid green;
	padding: 20px;
}
.box2,.box3,.box4{
	width: 150px;
	height: 150px;
	color: white;
	background-color: brown;
	
	
}
.box3{
	padding: 10px;
	/*改变内边距但不改变盒子大小*/
	box-sizing: border-box;
}
.box4{
	padding: 10px;
	border: 10px solid dodgerblue;
	box-sizing: border-box;
}

/*页面布局*/
.layout1{
	/*块级元素——默认宽度是父级元素的100% ，独占一行（即使设置了宽度），支持所有样式*/
	width: 100px;
	height: 100px;
	background: palevioletred;
	margin: 20px;
	[padding: 20px;]
}
.mm_span{
	/*内联元素不独占一行，只支持部分样式，代码换行盒子会产生间距*/
	/*内联元素不支持宽度和高度设置，宽高由内容决定*/
	/*height: 100px;*/
	background: lightgreen;
	/*内联元素只支持margin左右，不支持margin上下*/
	margin: 50px;
	/*内联元素支持padding设置*/
	padding: 30px;
}
.layout2{
	width: 200px;
	height: 100px;
	background: lightskyblue;
	text-align: center;
	line-height: 100px;
}

input{
	/*行内块元素——不独占一行，盒子并在一行，支持所有样式*/
	/*若宽高不设置，则宽高由内容决定*/
	width: 200px;
	height: 100px;
	margin: 30px;
	padding: 30px;
}

/*元素类型转换*/
.change1{
	width: 100px;
	height: 100px;
	color: white;
	
	/*块元素转换为内联元素*/
	/*display: inline;*/
	
	/*块元素转换为内联块元素*/
	/*display: inline-block;*/		
}
.c1{	
	background: red;
}
.c2{
	background: green;
}
.c3{
	background: blue;
}
.change2{
	width: 100px;
	height: 100px;
	background: pink;
	/*内联元素转换为块元素*/
	/*display: block;*/
	/*内联元素转换为内联块元素*/
	display: inline-block;
}
.hide{
	width: 200px;
	height: 100px;
	background: yellowgreen;
	/*元素隐藏 且隐藏的元素不占位置*/
	display: none;
}
.k2{
	display: block;
}
.k3{
	width: 200px;
	height: 100px;
	background: bisque;
}
.k3 span{
	display: none;
}
/*当鼠标移入k3时显示文字*/
.k3:hover span{
	color: red;
	font-size: 30px;
	text-align: center;
	line-height: 100px;
	display: block;
}