CSS属性相关样式
width 和height，标签的宽度和高度
width：标签的宽，单位一般是px(像素)
height：标签的高，单位一般是px(像素)
ps：只有块级元素才能设置width和height，行内标签的宽是由文本大小决定的
P {
width:200px;
height:100px;
}字体属性定义文本的字体样式、大小、加粗等
font-family 用于设置文字字体，可以设置多个字体名称，用逗号隔开。当浏览器不支持第一个字体，则会自动匹配下一个，直到匹配到可识别的为止
.c1 {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;}font-size 设置文本的大小,单位为px(像素)
#d1 {font-size: 16px;}font-weight 用来设置字体的粗细，属性值：normal(默认值，标准字符)、bold(粗体)、bolder(加粗)、lighter(更细的字符)、inherit(继承父标签的字体粗细)
.normal {font-weight: normal;}
#bold {font-weight: bold;}
p {font-weight: lighter;}文本属性定义文本的颜色、对齐文本，装饰文本，对文本进行缩进等
color，用于设置文字的颜色可通过以下方式来设置
- 颜色名称，比如：purple，blue，red，green，white等
- 十六进制值，比如：#FF0000→红色；#00FF00→绿色；#0000FF→蓝色；#FFFFFF→白色；#000000→黑色
- RGB值，比如：RGB(255,0,0)→红色
span {color: purple;}
#text-white {color: #FFFFFF;}
.text-green {color: rgb(0,255,0)}
/*
还有一种rgba(255,0,0,0.3),其中第四个参数是只alpha，指定颜色的透明度，范围在0.0到1.0之间
*/text-align，用于修饰标签中文本行之间的对齐方式，属性值有left(左对齐)、right(右对齐)、center(居中对齐)和justify(两端对齐,使用概率小)
span {text-align: left;}
#d_div {text-align: right;}
.c1 {text-align: center;}text-decoration，用于给文字添加特殊效果，属性值有none(默认，标准文本)，underline(文本带下划线)，overline(文本上方有一条线，类似页眉页脚)，line-through(给文本加上删除线)
/*用的比较多的，就是去掉a 标签默认的下划线*/
a {text-decoration: none;}text-indent，用于实现文本缩进，比较常见的就是段落首行缩进。
p {
font-size: 18px;
text-indent: 32px;
}
/*需要注意的是，行内标签无法使用该属性*/背景属性，可使用纯色或者图片来充当背景
background-color，用于设置标签的背景色，使用方式跟文本颜色color类似
input {background-color: aqua;}
#id_p {background-color: #3a4859;}
p .c1 {background-color: rgb(210,105,30);}background-image，用于设置标签的背景图片，属性值可以填写本地或网站图片路径
div {background-image: url('dawn.jpg');}background-repeat，用于设置背景图片是否平铺，属性值有repeat(默认)，背景图片平铺整个标签；repeat-x，水平方向平铺；repeat-y，垂直方向平铺；no-repeat，不平铺
div {background-repeat: no-repeat;}background-position，设置背景图片的位置，可以用left，top，right，bottom方向设置；也可以使用px设置
/*第一个属性值是水平方向，第二个属性值是垂直方向*/
div {background-position: left top;}以上属性可以汇总简写为background
/*以下属性值位置可以随意排，浏览器会自动识别*/
div {background: chocolate url('dawn.jpg') no-repeat left top;}display ，用于控制HTML标签的显示效果
| display: "none" | HTML文档中标签存在，但浏览器不显示，通常配合Js使用 |
| display: "block" | 默认独占一行。如设置了宽度，则会通过margin填充剩下的部分 |
| display: "inline" | 按行内元素显示，width、height、margin、float属性都失效 |
| display: "inline-block" | 是元素同时具有行内元素和块级元素的特点 |
CSS盒子模型
盒子模型中包含了border(边框)、margin(外边距)、padding(内边距/内填充)以及标签(也成为元素)
margin，外边距，设置标签与标签之间的距离
border，边框，标签的边框
padding，内边距，标签内部文本与边框之间的距离
border-边框属性
border-width，边框宽度
border-style，边框样式
border-color，边框颜色
/*统一设置四个边框的属性*/
#di {
border-width: 2px;
border-style: solid;
border-color: purple;
}以上属性可以缩写为 border：属性值1 属性值2的形式，不用考虑位置，浏览器自动识别
/*统一设置四个边框的属性*/
#di {border: 2px solid purple;}除了可以统一设置所有边框的属性外，我们还可以单独设置某个边框的样式
#i1 {
border-top-style: dotted;
border-top-color: red;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: none;
}边框样式
| border-style: "none" | 无边框 |
| border-style: "dotted" | 点状虚线边框 |
| border-style: "dashed" | 虚线边框 |
| border-style: "solid" | 实线边框 |
border-radius，用于设置圆角边框
/*得到一个圆形的div*/
div {
width: 200px;
height: 200px;
border:1px solid red;
border-radius: 200px;
}margin-外边距属性
.d1 {
width: 200px;
height: 200px;
/*顶部(上方)外边距*/
margin-top: 10px;
/*左侧外边距*/
margin-left: 20px;
/*底部(下方)外边距*/
margin-bottom: 30px;
/*右侧外边距*/
margin-right: 40px;
}
.d2 {
/*简写方式*/
margin: 10px 20px 30px 40px;
}
#d2 {
/*1个属性值，表示所有的外边距*/
margin: 10px;
/*2个属性值：第一个值是上下外边距，第二个值是左右外边距*/
/*margin: 20px 40px;*/
/*3个属性值：第一个值是顶部(上方)外边距，第二值是左右外边距，第三个值是底部(下方)外边距*/
/*margin: 20px 30px 40px;*/
/*4个属性值 上 右 下 左 顺时针*/
/*margin: 20px 30px 40px 50px;*/
}ps：需要注意的是，
一般浏览器都会自动给body标签增加8px的外边距，如有需要，需要我们自己取消
网页内的标签都水平居中，则通过设置margin处理
margin: 0 auto; /*水平居中*/
padding内填充
.d1 {
width: 200px;
height: 200px;
/*顶部(上方)内填充*/
padding-top: 10px;
/*左侧内填充*/
padding-left: 20px;
/*底部(下方)内填充*/
padding-bottom: 30px;
/*右侧内填充*/
padding-right: 40px;
}
.d2 {
/*简写方式*/
padding: 10px 20px 30px 40px;
}
#d2 {
/*1个属性值，表示所有的内填充*/
padding: 10px;
/*2个属性值：第一个值是上下内填充，第二个值是左右内填充*/
/*padding: 20px 40px;*/
/*3个属性值：第一个值是顶部(上方)内填充，第二值是左右内填充，第三个值是底部(下方)内填充*/
/*padding: 20px 30px 40px;*/
/*4个属性值 上 右 下 左 顺时针*/
/*padding: 20px 30px 40px 50px;*/
}