HTML基本布局使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>布局</title>
</head>
<body style="background-color: rgb(29, 115, 115);">
<!--
css 设置样式
通过元素的style属性进行设置
style="样式名:样式值;样式名:样式值;... ..."
块元素 自己独占一行 块元素的CSS样式的宽 高等等 往往都是生效的
div:将页面分割成一块一块的，与table相比的话，灵活很多，可以任意设置块
行内元素 不会自己独占一行的元素 行内的CSS样式的宽 高等等 很多就是不生效的
span：
-->
<div style="border: 1px solid red;height: 200px;width: 300px;margin: 10px auto;"><!--margin 上下外边距0（像素级边界） 左右外边距自动（即居中）-->
123
</div>
<div style="border: 1px solid red;height: 200px;width: 300px;margin: 10px auto;"><!--margin 上下外边距0 左右外边距自动（即居中）-->
123
</div>
<div style="border: 1px solid red;height: 200px;width: 300px;margin: 10px auto;"><!--margin 上下外边距0 左右外边距自动（即居中）-->
123
</div>
<span style="border: 1px solid rgb(217, 29, 12); width: 400px; height: 200px;"><!--设置宽高不生效，常用于 结合CSS设置CSS效果的范围-->
<span style="font-size: 30px; color: black;font-weight: bold;">3</span>21
</span>
</body>
</html>