盒子模型
（1）网页标签分类：
- 行内元素：
- 块级元素：有宽高，可以设置大小，同时不会让其他块元素默认占据当前行
（2）内边距：
内容和边线之间存在空白区域，空白区域被称为：内边距（padding）
盒子与盒子之间的距离，被称为：外边距（margin）
PS：默认情况下，页面中margin和padding不为0（红色为margin和padding的边线）
例：盒子模型
-
<!DOCTYPE html> -
<html lang="en"> -
<head> -
<meta charset="UTF-8"> -
<meta http-equiv="X-UA-Compatible" content="IE=edge"> -
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
<link rel="stylesheet" href="css/05.css"> -
<title>盒子模型</title> -
</head> -
<body> -
<div class="box">zheshi yige div</div> -
<div class="box">zheshi yige div</div> -
<div class="box">zheshi yige div</div> -
<div class="box">zheshi yige div</div> -
<div class="box">zheshi yige div</div> -
<!-- 内容和边线之间存在空白区域，空白区域被称为：内边距 --> -
<ul> -
<li>zheshi li</li> -
<li>zheshi li</li> -
<li>zheshi li</li> -
<li>zheshi li</li> -
<li>zheshi li</li> -
</ul> -
</body> -
</html>
-
*{ -
margin: 0; -
padding: 0; -
/* 将内边距和外边距都为0 */ -
/* border: 1px solid red; */ -
/* 显示出所有边线，默认情况下margin和padding不为0 */ -
} -
.box{ -
height: 300px; -
width: 300px; -
border: 1px solid rebeccapurple; -
text-align: center; -
line-height: 300px; -
/* padding: 10px; */ -
/* padding: 50px 0px;前一个值代表上下，后一个值代表左右 */ -
/* padding: 50px 50px 10px 20px;四个值分别代表上、右、下、左 */ -
/* 也可单独设置边距 */ -
/* padding-left: 30px;左侧增加30px */ -
/* padding-bottom: 20px;下侧增加20px */ -
/* margin: 20px;外边距增大20px */ -
margin: auto;/* 当前元素相对于父元素做水平居中 */ -
}
扫一扫
5936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
