前端HTML盒模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒模型</title>
		<style type="text/css">
			/*---*号是通配符，匹配所有标签
			 可用来初始化操作
			 ------*/
			*{
				/*外边距和内填充归零*/
				margin: 0;
				padding: 0;
			}
			#one{
				background-color: pink;
				text-align: center;
				width: 300px;
				height: 300px;
				/*padding 内填充 注意：内填充颜色同背景且不可更改*/
				/*上下左右*/
				padding: 20px;
				/*上下 左右*/
				/*padding: 20px 30px;*/
				/*上 左右 下*/
				/*padding: 20px 30px 4px;*/
				/*上 下 左 右*/
				/*padding: 20px 30px 40px 50px;*/
				/*也可单指*/
				/*padding-left: 30px;*/
				/*--------------------------------------------------*/
				/*边框*/
				border-color: red;
				border-width: 20px;
				/*边框风格  solid实线最常用   dotted圆点型虚线     dashed矩形虚线       groove立体虚线*/
				border-style: dashed;
				/*复合写法   比较常用 */
				border: 20px dashed blue;
				/*定向选择一个方向*/
				border-left: green 20px solid;
				/*---------------------------------------------------*/
				/*边框圆角
				 单值  切四个角全
				 两个值 切两个对角线 即左上右下和右上左下
				 三个值 对角线 左上   右上左下  右下
				 四个值 顺时针 从左上开始
				 */
				border-radius: 150px 50% 0 0;
				/*按照位置切圆角*/
				/*border-bottom-left-radius: 50%;*/
			}
		</style>
	</head>
	<body>
		<div id="one">
			遇事不决，可问春风。
		</div>
	</body>
</html>

运行结果：

前端三剑客
#HTML
前端HTML盒模型
http://ultracode.cn/2020/10/13/HTML/前端HTML盒模型/
作者
Win
发布于
2020年10月13日
许可协议