html基本认识+文字文本属性+盒子模型+子代选择器
1.html的基本认识。快速创建页面用!+enter，标签有嵌套关系以及并列关系。标签选择器可以直接选择所有同名的标签，格式为标签名{属性：属性值；}类名选择器类似，且类名可以重复，一个标签可以有多个类名。
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>Documenttitle>
<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 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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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快速写出十对
2.QQ截图ctrl+c可以直接复制颜色色号
To be continued......