一、定义颜色的三种方式
color: #000; # 定义颜色的方式一，通过16进制的形式设置(#000000简写：#000)
color: black; # 定义颜色的方式二，通过颜色名字设置
color: rgb(0,0,0); # 定义颜色的方式三，范围0-255(黑色：0，0，0 ，白色：255，255，255)
color: rgba(0,0,0,0.5); # 定义颜色的方式四，透明度范围：0-1
二、定义字体属性
font-size: 16px # 字体大小默认16px
font-weight: bold; # 字重：bold(粗体)，normal(默认值，标准)，bolder(更粗)，lighter(更细)，100-900(通过数值设置粗细，默认400)
font-family: "Arial Black", “arial-black,” “cursive”; # 指定浏览器选择字体类型，如果不支持当前当前字体，依次往后尝试下一个字体类型
text-align: center; # 对齐方式：left(左对齐，默认)，right(右对齐)，center(居中对齐)，justify(两端对齐)
text-decoration: underline; # 文字装饰：none(标准文本，默认)，underline(文本下划线)，overline(文本上划线)，line-through(穿过文本的一条线)
text-indent: 32px; # 文本首行缩进2个字符(默认16px为一个字符大小)
letter-spacing： 10px; # 指定字体间间隔
line-height: (height px); # 字体高度设置同块级标签高度一致时，竖直居中对齐
三、定义背景颜色
background-color:black; # 定义背景颜色：黑色
background: url("2.jpg"); # 背景设置的集合(范围更广，属性中包含background-image)
background-image: url('1.jpg'); # 设置背景的图片样式：url里面是图片路径，相对路径：同html文件在一个目录下， 绝对路径：需要指定路径
background-repeat: no-repeat; # 定义背景图片放置类型：no-repeat(图片不平铺), repeat-y(垂直方向上平铺), repeat-x(水平方向上平铺), repeat(x轴和y轴重复平铺，默认)
background-position: right top; # 定义背景图片位置：left top (上左)，center top(上中)，right top(上右)， center left (中左)，center center(中心)，center right(中右)，left bottom(下左)，center bottom (下中)， right bottom(下右)，通过指定具体参数(200px, 200px)
background-attachment: fixed; # 固定背景图片位置，防止滚动四、边框属性
border: 2px solid red; # 定义边框样式:none(无边框),dotted(点状虚线边框)， dashed(矩形虚线边框)，solid(实线边框)
border-width: 2px; # 定义边框宽度：2px
border-style: solid; # 定义边框类型：实线线框(solid)
border-color: red; # 定义边框宽度：颜色(red)
border-top-style:dotted; # 定义顶层边框类型
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
border-top-color: red; # 定义顶层边框颜色
border-right-color: red; # 定义顶层边框颜色
border-bottom-color: red; # 定义顶层边框颜色
border-left-color: red; # 定义顶层边框颜色
border-radius: 50%; # 定义边框的效果0-50%(边框为正方形时：50%为一个圆形)
padding: 10px 10px; # 设置内边距：(上下：10px,左右：10px)
padding: 10px 10px 10px 10px; # 设置内边距：(上：10px,右：10px, 下：10px, 左：10px)
单独设置内边距(padding-left,padding-right,padding-top,padding-bottom)
margin: 10px 10px; # 设置外边距(上下：10px,左右：10px)
margin: 10px 20px 30px 40px ; # 设置外边距(上：10px,右：20px, 下：30px, 左：40px)
单独设置外边距(margin-right(右)，margin-bottom(下)，margin-left(左)，margin-top(上))
• auto(浏览器计算外边距)
• length(规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px)
• %(规定基于父元素的宽度的百分比的外边距)
• inherit(规定应该从父元素继承外边距)
width: 100px # 设置边框宽度
height: 100px # 设置边框高度
max-width: 100px # 设置边框的最大宽度(元素可以比指定值(width)窄，但不能比其宽)
• none（默认。定义对元素的最大宽度没有限制）
• length（定义元素的最大宽度值）
• %（定义基于包含它的块级对象的百分比最大宽度）
• inherit（规定应该从父元素继承 max-width 属性的值）
五、display常用属性
display: none; # 设置标签属性：HTML文档中元素存在，但是在浏览器中不显示
display: block; # 设置标签属性：默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
display: inline; # 设置标签属性：变成行内标签，width、height、margin-top、margin-bottom和float属性无效
display: inline-block; # 设置标签属性：使元素同时具有行内元素和块级元素的特点
六、float常用属性
float:left # 向左浮动
float:right # 向右浮动
float:none # 默认值，不浮动
clear.none # 默认值。允许浮动元素出现在两侧
clear.left # 左侧不允许浮动元素
clear.right # 右侧不允许浮动元素
clear.both # 左右两侧均不允许浮动元素
clear.inherit # 规定应该从父元素继承 clear 属性的值
七、溢出属性(overflow)
overflow： visible； # 默认值。内容不会被修剪，会呈现在元素框之外。
overflow： hidden； # 内容会被修剪，并且其余内容是不可见的。
overflow： scroll； # 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow： auto； # 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow： inherit； # 规定应该从父元素继承 overflow 属性的值。
• overflow（水平和垂直均设置）
• overflow-x（设置水平方向，只出现x轴的滚动条）
• overflow-y（设置垂直方向，只出现y轴的滚动条）
八、nth-child() 选择器
div:nth-child(n) 选择器匹配属于其父元素(div)的第 N (数字、关键词或公式)个子元素，不论元素的类型
九、vertical-align 属性
vertical-align:text-top; # 设置元素的垂直对齐方式(把元素的顶端与父元素字体的顶端对齐)
• baseline(默认。元素放置在父元素的基线上)
• sub(垂直对齐文本的下标)
• super(垂直对齐文本的上标)
• top(把元素的顶端与行中最高元素的顶端对齐)
• middle(把此元素放置在父元素的中部)
• bottom(把元素的底端与行中最低的元素的底端对齐)
• text-bottom(把元素的底端与父元素字体的底端对齐)
• %(使用 "line-height" 属性的百分比值来排列此元素。允许使用负值)
• inherit(规定应该从父元素继承 vertical-align 属性的值)
十、list-style 属性
list-style # 简写属性在一个声明中设置所有的列表属性
1. list-style-type # 设置列表项标记的类型
• none(无标记)
• disc(默认。标记是实心圆)
• circle(标记是空心圆)
• square(标记是实心方块)
• decimal(标记是数字)
2. list-style-position # 设置在何处放置列表项标记
• inside(列表项目标记放置在文本以内，且环绕文本根据标记对齐)
• outside(默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐）
• inherit(规定应该从父元素继承 list-style-position 属性的值)
3. list-style-image # 使用图像来替换列表项的标记
• url(图像的路径)
• none(默认。无图形被显示)
• inherit(规定应该从父元素继承 list-style-image 属性的值)
4. inherit # 规定应该从父元素继承 list-style 属性的值十一、定位流属性
z-index：1; # 设置元素的堆叠顺序(拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面)
• auto(默认。堆叠顺序与父元素相等)
• number(设置元素的堆叠顺序)
• inherit(规定应该从父元素继承 z-index 属性的值等)
