html基本认识+文字文本属性+盒子模型+子代选择器
1.html的基本认识。快速创建页面用!+enter，标签有嵌套关系以及并列关系。标签选择器可以直接选择所有同名的标签，格式为标签名{属性：属性值；}类名选择器类似，且类名可以重复，一个标签可以有多个类名。
<!-- 快速创建页面 1.!+enter --> <!-- 标签 1.嵌套关系 2.并列关系 --> <!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"> <title>Document</title> <style> /* 1.标签选择器：选择所有同名的标签 格式：标签名{ 属性：属性值； } */ div { height:200px; width:200px; background-color:pink; } /* 2.类名选择器：会选择所有相同的类名 格式： .类名{ 属性：属性值 } 类名可以重复； 一个标签可以有多个类名； */ .son { height: 300px; width: 300px; background-color: yellowgreen; } .sson{ background-color: darkblue; } </style> </head> <body> <!-- 嘿嘿嘿 <div style="height: 200px;width:200px;background-color: black;"> <div style="height: 100px;width:100px;background-color:cornflowerblue;"></div> </div>--> <div class="son sson"></div> 111111 <div></div> 1111111 <div class="demo"></div> </body> </html>
2.文字属性。font可以设置文字的各个属性，例如font-size:12px;可以设置字体大小为12，还有font-weight、font-family等指令可设置文字加粗、字体等。
<!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"> <title>Document</title> <style> .demo{ height: 200px; width: 200px; background-color: yellowgreen; /* 文字属性 1.font-size 文字大小 */ font-size: 12px; /* 2.font-weight 文字加粗 bold 加粗 */ font-weight: bold; /* 3.font-family 字体*/ font-family: "宋体"; } </style> </head> <body> <div class="demo"> 今天星期二 </div> </body> </html>
3.文本属性。设置文本对齐方式、行高（文本垂直居中）、字间距等。text-align:center;为居中，左对齐右对齐分别是text-align:left/right;行高设置是line-height:200px;可以通过line-height=height实现文本垂直方向上居中。字间距为word-spacing:40px;。
<!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"> <title>Document</title> <style> .demo{ height: 200px; width: 500px; background-color: pink; /* 1.text-align 文本对齐方式 left 左对齐 center 居中 right 右对齐*/ text-align:center; /* 2.line-height 行高 line-height=height 实现文本垂直方向上居中*/ line-height: 200px; /* 3.word-spacing 字间距 */ word-spacing: 40px; } </style> </head> <body> <div class="demo"> 主页 热点 新闻 个人中心 </div> </body> </html>
4.盒子模型。标准盒子模型：content(height+width)+padding+border+margin。
padding中按照上右下左的顺序设置，例如padding:10px 20px;就是上下10px，左右20px，padding:10px 20px 30px;就是上10左右20下30，padding:10px 20px 30px 40px;上10右20左30右40。
margin用法和padding类似，单独改变某一条边的内边距用margin-left/right/top/bottom，例如margin-left:50px;。margin还可以实现水平居中：margin:auto;。同时可以通过margin-top/bottom/left/right来调整自己的位置。
border标准写法：border:width style color例如：border:2px solid red;设置某一条边框：border-left/right/top/bottom:10px solid pink;设置某一条边框样式：border-left/right/top/bottom-width/style/color。另：border-top-style:dashed;设置边框为虚线，border-right-style:dotted;设置边框为圆点。border-radius实现边框圆角，
border-radius:50%;border-top-left-radius:20px;。
盒子模型：
<!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"> <title>Document</title> <style> .fa{ width: 234px; height: 420px; padding: 20px 0; background-color: #A2A0A0; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:20px; } .son{ width: 204px; height: 42px; padding-left: 30px; /* background-color: red; */ line-height: 42px; color: #ffffff; font-size: 14px; word-spacing: 120px; } </style> </head> <body> <div class="fa"> <div class="son">手机 ></div> <div class="son">电视 ></div> <div class="son">笔记 ></div> <div class="son">出行 ></div> <div class="son">耳机 ></div> <div class="son">家电 ></div> <div class="son">智能 ></div> <div class="son">电源 ></div> <div class="son">健康 ></div> <div class="son">生活 ></div> </div> </body> </html>
5.子代选择器。用于选择所有同名的子代，格式：选择器>选择器{属性：属性值}。
.fa>div {
width: 204px;
height: 42px;
padding-left: 30px;
background-color: red;
line-height: 42px;
color: #fff;
font-size: 14px;
}
小技巧：1.div*10快速写出十对<div>
2.QQ截图ctrl+c可以直接复制颜色色号
To be continued......
