css的三种表现形式：
1、行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中； <标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记> 2、内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内； 注意：style标记不要写在title标记上方； <style> 选择器 { 属性名：属性值； 属性名：属性值； ...... } </style> 3、外部样式（外联样式）：写在css文件内； <link type="text/css" rel="stylesheet" href="css/main.css" />
color:设置文本颜色； 属性值：1、表示颜色的英文单词，例如：red、blue、green、pink、purple、cyan等； 2、十六进制表示法：#ff0000； 0、1、2...9、a、b、c...f # ff 00 00 红色 绿色 蓝色 0表示颜色的最低值，f表示颜色的最大值； 3、rgb表示法：color：rgb(0,0,0)；取值0-255； 4、rgba表示法：color:rgba(0,0,0,0)；前三个值的取值0-255，第四个值的取值0-1； a--alpha
font-family：设置字体格式；可以设置多个字体格式，之间用“，”隔开，字体格式用“”包含；
font-size：设置字体大小，单位像素（px）；
font-style：设置字体样式 normal--正常的，没有任何样式； italic--斜体字；只有字体本身有斜体才能倾斜，否则不能倾斜； oblique--倾斜的；可以强行倾斜字体；
font-weight：设置字体字重，即字体的粗细； 100-900取整百，700相当于粗体（bold），900相当于更粗（bolder）； bold--粗体 bolder--比粗体更粗； lighter--细体；
选择器：选择对应的标签，将样式给到对应的标签； 1、标签选择器：给同一种标签添加样式； 代码： 标签名 { 属性名：属性值； }
2、通用选择器（通配符）：给所有的标签添加样式； 代码： * { 属性名：属性值； } 注意：通用选择器是先遍历页面当中所有的标签，然后再给这些标签添加样式，所以这个选择器的性能非常低；一般只会在测试的时候使用，用于css的初始化，但是在项目当中不要使用；
3、类选择器：给同一类（同一个群体）标签添加样式；要先给同一类标签取一个名字； 属性--class给标签命名类名； 代码： .class名（类名）{ 属性名：属性值； } 注意：一个类名可以给多个标签，一个标签可以有多个类名，多个类名之间用“空格”隔开；
4、id选择器：给某一个标签添加样式；要先取一个id名 属性--id； 代码： #ID名 { 属性名：属性值； } 注意：一个ID名只能给一个标签，一个标签只能有一个ID名；（从一而终）
5、后代选择器：选择的是某一个元素的后代元素； 代码： 祖先选择器 后代名 { 属性名：属性值； } 注意：中间是用“空格”连接，表示“里面的”意思；
选择器原理：是由内向外查找，先查找所有的p，然后判断这个p是否由满足要求的父节点father，不满足就继续向上一级查找，没有找到就不满要求，找到了才给这个p添加样式；
6、子选择器：选择某个元素的直接后代； 代码： 父选择器>子级{ 属性名：属性值； }
7、相邻兄弟选择器：选择紧挨着该元素的后面的一个元素； 代码： 元素名+兄弟名{ 属性名：属性值； }
8、通用兄弟选择器：选择的是该元素后面的所有的某一种元素； 代码： 元素名~兄弟名{ 属性名：属性值； }
9、并集选择器：将两个不相干的元素同时添加相同属性； 代码： 元素1，元素2，元素3......{ 属性名：属性值； }
10、交集选择器：当标签和类名（ID名）都冲突的时候，使用交集选择器； 代码： 元素名.类名（#ID名）{ 属性名：属性值； }
css三大特性： 1、继承：父级的样式会被子级继承；!important不会被继承；
2、层叠：当样式发生冲突的时候，样式会产生覆盖（层叠）；
3、优先级：!important(最高级)>行内样式>id>类>标签>*>继承； 同级样式遵循“就近原则”；就近指定是谁离内容进谁的优先级就高；
权重：标签选择器--1 类选择武器--10 id选择器--100 行内样式--1000 !important--1/0(无穷大) 数标签：先数id，比较完id再数类，比较完类再数标签；
盒子模型： 1、内容--宽度：width；单位px、百分比（继承）、em、rem； 高度：height；单位px、百分比（继承）、em、rem； 背景--背景色：background-color；颜色单词、十六进制表示法、rgb、rgba； 背景图片：background-image:url(路径)； 背景图片重复：background-repeat；no-repeat(不重复)、repeat-x（水平重复）、repeat-y（垂直重复）、repeat（水平垂直重复、默认）； 背景定位：background-position：left、center、right、top、center、bottom、具体的数值（单位px） 背景连写：background：背景颜色 背景图片 背景图片重复 背景定位；可以只单写某一个属性；
2、填充：上填充--padding-top 下填充--padding-bottom 左填充--padding-left 右填充--padding-right 填充连写--padding：1个值--》上、右、下、左全部是这个值； 2个值--》第一个值表示上下，第二个值表示左右； 3个值--》第一个值表示上，第二个值表示左右，第三个值表示下； 4个值--》依次为上、右、下、左；（顺时针方向） 注意：padding会改变盒子的大小，要想在添加padding的同时保持盒子的大小不变，应将padding的值从盒子的大小中减去；
3、边框：边框粗细--border-width 边框颜色--border-color 边框样式--border-style：solid（实线）、dashed（虚线）、dotted（点线） 边框连写--border：width style color; 可以单独只写某一边的边框--border-top、border-bottom、border-left、border-right 注意：边框的对齐方式为向外对齐，所以边框会改变盒子大小；
4、外边距：上边距--margin-top 下边距--margin-bottom 左边距--margin-left 右边距--margin-right 外边距连写--margin：1个值 2个值 3个值 4个值（参照padding）；
默认文档流布局下，父子上边界共用问题？ 解决：1、使用padding； 2、给父级使用border； 3、给父级添加属性--overflow：hidden； 4、浮动； 5、定位；
外边距塌陷：在垂直方向上上下边距会合并，取最大值；
盒子水平居中：margin：0 auto；
样式的继承：width、color、font-、text-、line-height都可以被继承；
<ins></ins>下划线标记
<del></del>删除线标记
文本修饰：text-decoration--underline；下划线 line-through；删除线 none；无/没有修饰；
文本对齐：text-align--left；左对齐 center；居中对齐 right；右对齐
文本缩进：text-indent；指的是文本的首行缩进； 单位px、em；
行高：line-height--用于设置一行文本的高度，常用于设置一行文本在容器当中垂直居中； 单位：1、px； 2、百分比；基于文字大小的百分比，“%”前必须是整十，如：150%、200% 3、em；相对单位，同样是基于文字大小；如：1.5em、2em； 4、没有单位；a--没有继承的情况下，相当于em； b--在有继承的情况下： i、父级的行高有单位em，则会先计算好行高，然后将行高的数值直接继承给子级，子级本身不会再计算行高； ii、行高没有单位，则父级会直接将行高继承给子级，然后子级根据行高值自行计算行高；
font连写--font：样式/粗细 大小 格式；大小和格式必须都有，缺少任何一个都不行；
元素的显示方式： 1、块级--block；独占一行，支持宽高； 2、行内--inline；和其他行内元素在一行显示，不支持宽高； 3、行内块级--inline-block，既有行内元素特性，又有块级元素的特性；同样在一行中显示，并且支持宽高； display:block/inline/inline-block； 以上为默认文档流（标准文档流）下的情况；
在有链接的情况下，a标记无法继承父级的color样式；
伪类选择器： a:link--链接的原本的样式（没有访问过）；一旦访问过后就失效； a:hover--鼠标移入时的样式； a:active--鼠标按下时的样式（鼠标没有松开）； a:viseted--链接访问过后的样式； L--H--V--A
浮动：让默认（标准）文档流下的元素漂浮起来水平排列； float--left左浮动； right右浮动； none不浮动； 浮动排列的顺序不会改变，默认时谁在第一个，浮动就会排在第一个；
浮动的影响： 1、行内元素浮动之后可以支持宽高； 2、文本会给浮动的元素让位；可以制作文本绕排的效果； 3、在父级没有给高度的情况下，子级浮动后父级会没有高度；
清除浮动： 1、在父级内容的最后添加一个空的div，添加clear属性； clear--left清除左浮动； right清除右浮动； both清除所有（左/右）浮动； clear是清除上一个元素带来的影响； 不推荐使用，因为会在页面上添加太多的无用标签，让页面的布局变得更复杂；
2、给父级设置overflow：hidden； 会触发bfc（block formatting context）块级格式化上下文； 不推荐使用，因为这个属性和定位一起使用时会产生问题；
3、使用伪元素after .clearfix:after { content:"";/*内容为空*/ height:0;/*高度为0*/ line-height:0;/*行高为0*/ display:block;/*块级元素*/ visibility:hide;/*隐藏*/ clear:both;/*清除浮动*/ } .clearfix { zoom:1;/*IE678*/ }
4、使用双伪元素after和before .clearfix:afer,.clearfix:before { content:""; display:table; clear:both; } .clearfix { zoom:1; } 以上四种方式推荐使用第三种；
列表样式：list-style
定位： 1、静态定位--static；按照标准文档流进行布局；
2、相对定位--relative；相对自身；以自身的坐上角（坐标点）为参考；会保留原来的位置不被其他元素侵占；
3、绝对定位--absolute；参考的是页面的左上角；绝对定位位置不会被保留； 如果父级有定位，则参考父级的坐标点；如果父级没有定位，则会一级一级向上查找，直到html标签，中途有定位就会参照这个定位元素的坐标点；
4、固定定位--fixed；相对于浏览器窗口的左上角；