1. CSS背景样式

background-color 背景色
background-image 背景图url(背景地址)默认：会水平垂直都铺满背景图
background-repeat 平铺方式repeat-x   x轴平铺repeat-y   y轴平铺repeat ( x , y 都进行平铺，默认值 )no-repeat  都不平铺
background-position : 背景位置x y : number(px、%) | 单词x : left、center、righty : top、center、bottom
background-attachment : 背景图随滚动条移动的方式scroll : 默认值  ( 背景位置是按照当前元素进行偏移的 )fixed ( 背景位置是按照浏览器进行偏移的 )

2. CSS边框样式

border-style : 边框样式solid : 实线dashed : 虚线dotted : 点线
border-width : 边框大小px ...
border-color : 边框颜色red #f00 ...        边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom    颜色：透明颜色 transparent

3. CSS文字样式

font-family : 字体类型英文、中文衬线体、非衬线体注意点：1.多个字体类型的设置目的2.引号的添加的目的
font-size : 字体大小默认 : 16px写法 : number(px) | 单词 ( small large ... 不推荐使用)font-weight : 字体粗细模式： 正常( normal )   加粗 ( bold )写法：单词(normal、bold)   |  number ( 100 200 .....  900 , 100到500都是正常的，600都900都是加粗的 )  font-style : 字体样式模式： 正常 ( normal )   斜体 ( italic )写法：单词 (  normal 、 italic )注：oblique也是表示斜体，用的比较少，一般了解即可。区别：1.italic 带有倾斜属性的字体的才可以设置倾斜操作。2.oblique 没有倾斜属性的字体也可以设置倾斜操作。

4. CSS段落样式

text-decoration：文本装饰下划线 : underline删除线 :line-through上划线 : overline不添加任何装饰 : none注：添加多个文本修饰：line-through underline overlinetext-transform：文本大小写 （ 针对英文段落 ）小写：lowercase大写：uppercase只针对首字母大写：capitalizetext-indent : 文本缩进首行缩进em单位：相对单位，1em永远都是跟字体大小相同text-align : 文本对齐方式对齐方式 : left 、right、center、justify（两端点对齐）line-height : 定义行高什么是行高，一行文字的高度，上边距和下边距的等价关系。默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。取值：1. number( px )   |  scale ( 比例值 , 跟文字大小成比例的 )letter-spacing : 字之间的间距
word-spacing : 词之间的间距  ( 针对英文段落的 )英文和数字不自动折行的问题：1. word-break : break-all; (非常强烈的折行)2. word-wrap : break-word;(不是那么强烈的折行 ，会产生一些空白区域)  

5. CSS复合样式

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
1. background : red url() repeat 0 0;
2. border : 1px red solid;
3. font : 注：最少要有两个值 size familyweight style size family  √style weight size family  √weight style size/line-height family √
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

6. CSS选择器

1. ID选择器   #elem{}      id="elem"注：1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。2. 命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）3. 驼峰写法 : searchButton (小驼峰)  SearchButton (大驼峰)  searchSmallButton短线写法：search-small-button下划线写法：search_small_button2. CLASS选择器.elem{}      class="elem"注：1. class选择器是可以复用的。2. 可以添加多个class样式。3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。4. 标签+类的写法3. 标签选择器(TAG选择器)div{}          <div></div>使用的场景：1. 去掉某些标签的默认样式时2. 复杂的选择器中，如 层次选择器4. 群组选择器(分组选择器)可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。5. 通配选择器*{  } ->  div,ul,li,p,h1,h2....{}    注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。使用的场景：1. 去掉所有标签的默认样式时           6. 层次选择器后代  M N { }父子  M > N { }兄弟  M ~ N { }  当前M下面的所有兄弟N标签相邻  M + N { }  当前M下面相邻的N标签7. 属性选择器M[attr] {}    = : 完全匹配*= : 部分匹配^= : 起始匹配$= : 结束匹配[][][] : 组合匹配8. 伪类选择器M:伪类{}:link       访问前的样式    ( 只能添加给a标签 ):visited    访问后的样式    ( 只能添加给a标签 ):hover      鼠标移入时的样式  (可以添加给所有的标签):active     鼠标按下时的样式  (可以添加给所有的标签)注：一般的网站都只设置  a{}   ( link visited active )    a:hover{}:after、:before    通过伪类的方式给元素添加一段文本内容，使用content属性:checked、:disabled 、:focus 都是针对表单元素的   结构性伪类选择器nth-of-type()   nth-child()角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大first-of-typelast-of-typeonly-of-type nth-of-type()和nth-child()之间的区别type : 类型child : 孩子

7. CSS继承

文字相关的样式可以被继承
布局相关的样式不能被继承 ( 默认是不能继承的，但是可以设置继承属性 inherit 值 )

8. CSS优先级

1. 相同样式优先级当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
2. 内部样式与外部样式内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。
3. 单一样式优先级style行间 > id > class > tag > * > 继承注：style行间 权重 1000id       权重 100class    权重 10tag      权重 1
4. !important提升样式优先级，非规范方式，不建议使用。( 不能针对继承的属性进行优先级的提升 )5. 标签+类与单类标签+类 > 单类 6. 群组优先级群组选择器与单一选择器的优先级相同，靠后写的优先级高。7. 层次优先级1. 权重比较ul li .box p input{}   1 + 1 + 10 + 1 + 1.hello span #elem{}    10 + 1 + 1002. 约分比较    ul li .box p input{}    li p input{}.hello span #elem{}      #elem{}

9. CSS盒子模型

组成 : content -> padding -> border -> margin物品        填充物     包装盒      盒子与盒子之间的间距content : 内容区域  width和height组成的padding : 内边距(内填充)只写一个值： 30px (上下左右)写两个值 : 30px 40px ( 上下、左右 )写四个值 : 30px 40px 50px 60px（上、右、下、左）单一样式只能写一个值：padding-leftpadding-rightpadding-toppadding-bottommargin : 外边距(外填充)只写一个值： 30px (上下左右)写两个值 : 30px 40px ( 上下、左右 )写四个值 : 30px 40px 50px 60px（上、右、下、左）单一样式只能写一个值：margin-leftmargin-rightmargin-topmargin-bottom注：1. 背景色填充到margin以内的区域 （不包括margin区域）    2. 文字在content区域添加。3. padding不能为负数，而margin可以为负数。box-sizing:盒尺寸，可以改变盒子模型的展示形态。默认值： content-box :  width、height -> contentborder-box : width、height -> content padding border使用的场景：    1. 不用再去计算一些值2. 解决一些100%的问题盒子模型的一些问题：1. margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。2. margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。        扩展：1. margin左右自适应是可以的 ，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要在第二大部分来进行学习 )2. width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

10. 标签分类

按类型block : div、p、ul、li、h1 ...1. 独占一行2. 支持所有样式3. 不写宽的时候，跟父元素的宽相同4. 所占区域是一个矩形inline : span 、a、em、strong、img ...1. 挨在一起的2. 有些样式不支持，例如：width、height、margin、padding3. 不写宽的时候，宽度由内容决定4. 所占的区域不一定是矩形5. 内联标签之间会有空隙，原因：换行产生的inline-block : input、select ...1. 挨在一起，但是支持宽高注：布局一般用块标签，修饰文本一般用内联标签按内容Flow：流内容Metadata：元数据Sectioning：分区Heading：标题Phrasing：措辞Embedded：嵌入的Interactive：互动的（详情：https://www.w3.org/TR/html5/dom.html）按显示替换元素 :浏览器根据元素的标签和属性，来决定元素的具体显示内容。img、input ...非替换元素 : 将内容直接告诉浏览器，将其显示出来。div、h1、p ...

11. 显示框类型

display: block inline inline-block none ...区别：
display:none   不占空间的隐藏
visibility: hidden 占空间的隐藏

12. 标签嵌套规范

    ul、lidl、dt、ddtable、tr、td块能够嵌套内联<div><span></span><a href="#"></a></div> 块嵌套块<div><div></div></div>特殊：错误的写法：<p><div></div></p>内联是不能嵌套块错误的写法：<span><div></div></span>特殊：正确的写法：<a href="#"><div></div></a>

13. 溢出隐藏

overflow : visible : 默认hiddenscrollautox轴、y轴overflow-x、overflow-y针对两个轴分别设置

14. 透明度与手势

opacity : 0(透明) ~ 1(不透明)0.5(半透明)注：占空间、所有的子内容也会透明rgba() : 0 ~ 1注：可以让指定的样式透明，而不影响其他样式cursor : 手势default : 默认箭头要实现自定义手势：准备图片： .cur 、 .ico cursor : url(./img/cursor.ico),auto;

15. 最大、最小宽高

min-width、min-height
max-width、max-height%单位：换算 -> 已父容器的大小进行换算的一个容器怎么适应屏幕的高 : 容器加height:100%;   body:100%;  html:100%;html,body{ height:100%;}.contrainer{ height:100%;}

16. CSS默认样式

没有默认样式的： div、span有默认样式的：body ->  marign : 8pxh1 ->  margin : 上下 21.440pxfont-weight : boldp  ->  margin : 上下 16pxul ->  margin : 上下 16px  padding : 左 40px默认点：list-style : disca ->   text-decoration: underline;css reset : *{ margin:0; padding:0;}优点：不用考虑哪些标签有默认的margin和padding缺点：稍微的影响性能body,p,h1,ul{ margin:0; padding:0;}ul{ list-style : none;}    a{ text-decoration: none; color:#999;}img{ dispaly:block}问题的现象：图片跟容器底部有一些空隙。内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。vertical-align: baseline;  基线对齐方式，默认值img{ vertical-align:bottom;} 解决方式是推荐的写具体页面的时候或一个布局效果的时候：1. 写结构2. css重置样式3. 写具体样式