Web开发 -前端部分-CSS-2

一长度单位

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 根元素 */html {font-size: 20px;}/* 第一种长度单位px */#ax1 {width: 200px;height: 200px;font-size: 20px;background-color: skyblue;}/* 第二种长度单位：em(相对于当前元素的font-size 的倍数) *//* 没有指定则会向上寻找 */#ax2 {width: 10em;height: 10em;font-size: 20px;background-color: orange;}/* 第三种长度单位：相当于根元素 */#ax3 {width: 10rem;height: 10rem;font-size: 20px;background-color: red;}/* 第四种长度单位：相对其父元素的百分比尺寸 */#ax4 {width: 200px;height: 200px;font-size: 20px;background-color: blue;}.inside {width: 50%;height: 25%;font-size: 20px;background-color: brown;}</style></head><body><div id="ax1">hello world1</div><div id="ax2">hello world2</div><div id="ax3">hello world3</div><div id="ax4"><div class="inside">hello world3</div></div>
</body></html>

图形化展示：

二元素显示模式

1 三种显示模式

总结：

2 修改元素的显示模式

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;font-size: 20px;/* inline是行内元素 block是块元素 inline-block行内块元素 none是隐藏*/display: inline;}#ax1 {background-color: skyblue;}#ax2 {background-color: orange;}#ax3 {background-color: red;}#ax4 {background-color: blue;}</style>
</head><body><div id="ax1">hello1</div><div id="ax2">hello2</div><div id="ax3">hello3</div><div id="ax4">hello4</div>
</body></html>

图形化展示：

三盒子模型的组成部分

盒子模型组成：内容区域（content）,内边距区域（padding），边框区域（border）,外边距区域（margin）

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* 内容区的宽 */width: 400px;/* 内容区的高 */height: 400px;/* 内边距 */padding: 20px;/* 边框 */border: 10px solid black;/* 外边距 */margin: 50px;font-size: 20px;background-color: gray;}</style>
</head><body><div>内容区</div>
</body></html>

图形化展示：