CSS
构成：选择器以及一条或多条声明 - 选择器 {样式}
基础标签：单个选择器组成的
1.标签选择器：把某一类标签全部选择出来
2.类选择器：.类名 {} 样式点定义，结构类(class)调用，一个或多个，开发最常用
.red {color: red;} ul>li.red
background-color背景颜色
多类名：
.red {color: pink;}
.font35 {font-size: 35px;}
<div class="red font35">刘德华</div>
3.id选择器：#类名{} 样式#定义，结构id调用，只能调用一个，别人切勿使用
4.通配符选择器：*{} 所有标签
复合选择器：复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
1.后代选择器：
ol li a {} / .nav li a {}
2.子选择器：最近一级子元素
ol>li
3.并集选择器（重要）：可以选择多组标签，同时为他们定义想要同的样式
元素1，元素2{样式元素}
4.伪类选择器：用于向某写选择器添加特殊的效果，比如给链接添加特殊效果
链接伪类：a：link 选择所有未被访问的链接
a：visited 选择所有已被访问的链接
a：hover 当鼠标经过是改变
a：active 选择的是鼠标正在按下还没有弹起
注意事项：为了确保生效，按照link-visited-hover-active的顺序
5.focus伪类选择器：获取焦点的表单元素
input:focus { background-color: pink; }
字体属性：定义字体系列、大小、粗细、和文字样式
大小：font-size 单位px
粗细：font-weight （normal默认、bold/700、数字）<strong>
文字样式：font-style （normal默认、italic倾斜）<em>
字体的复合属性：
font: font-style font-weight font-size/line-height font-family;不可颠倒顺序
font:italic 700 16px 'microsoft yahei'
文本属性：定义文本的外观，文本的颜色、对齐、装饰、缩进、行间距
文本颜色：color
对齐文本：text-align设置文本内容的水平对齐
text-align： center、lift默认、right；
装饰文本：text-decoration 添加下划线、删除线、上划线等
none默认、underline下划线、overline上划线、line-through删除线
可以把超链接下的下划线去掉，用none
文本缩进：text-indent 文本的第一行首行缩进多少距离 2em 首行缩进两个字符
行间距：line-height
引入方式
1.内部样式表：是写到html页面内部，单独放到一个style标签中
2.行内样式表：在元素标签内部的style属性中设定CSS样式，适合于修改简单样式
3.外部样式表：新建一个后缀名为.css的文件在里面写样式
在html页面中使用<link>标签引入<link rel="stylesheet" href="css文件的URL">
元素显示模式：元素（标签）以什么方式进行显示
块元素：自己独占一行 div、h1-6、p、ul、ol、li等
行元素：一行可以显示多个
行内块元素
元素显示模式转换：display：block/inline/inline-block；
CSS背景：
1.背景颜色：background-color：；
2.背景图片：background-image：url（）；
3.背景平铺：background-repeat：no-repeat；
4.背景图片位置：background-position：x，y；
5.背景图像固定：background-attachment:scroll/fixed
6.复合写法：background:颜色 图片地址 平铺 滚动 位置；
7.背景颜色半透明：background：rgba（）；
权重：继承或者*<元素选择器<类选择器，伪类选择器<ID选择器<行内样式<！important
盒子模型：
边框：border边框粗细，边框样式，边框颜色
border-width 粗细
border-style none无solid实线边框dashed虚线边框dotted点线边框
border-color 颜色
border:1px solod red; 没有顺序
border-collapse:collapse; 合并相邻的边框
边框会改变盒子大小
内边距：
padding 边框和内容之间的距离
padding会影响盒子大小，如果盒子本身没有指定宽度和高度，不会撑开
外边距：
margin 盒子和盒子之间的距离
外边距可以让块级盒子水平居中：盒子必须指定了宽度、左右外边距有设置为auto
外边距合并 1.可以为父元素定义上边框2.可以为父元素定义内边距3.overflow：hidden
清除内外边距 *{padding：0；margin：0；}
去掉li前面的圆点：list-style：none
圆角边框：border-radius：length；
盒子阴影：box-shadow：h-shadow v-shadow blur spread color inset；
字体阴影：text-shadow：h-shadow v-shadow blur color
浮动：float 脱标 浮动的盒子不在保留原先的位置
语法：选择器{filot：none/left/right;}
清除浮动：
1. .clear {clear：both；}标签必须是块元素
2. overflow：hidden； 给父盒子加
3.伪元素 给父元素添加
.clearfix:after {
content:"";
display:block;
height: 0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom:1;
}
4.双伪元素 给父元素添加
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
定位：
定位=定位模式+边偏移
定位模式：position：static/relative/absolute/fixed
边偏移：top/bottom/left/right
相对定位 position：relative 移动后保留位置 相对于原来自己的位置移动
绝对定位 position：absolute 相对于祖先元素来移动 以最近一级有定位的为准 移动后不保留原来位置
子绝父相：父级需要占有位置，因此是相对定位，滋贺子不需要占有位置，则是绝对定位。
固定定位：position：fixed 以浏览器可视窗口为参照 不占有原先的位置
粘性定位：选择器{position：sticky；} 占有原先的位置
定位叠放次序：z-index
绝对定位的盒子居中：走浏览器的50%，在用margin走盒子的负一半
元素的显示于隐藏：
1.display属性：none隐藏对象 block除了转换为块级，还有显示对象 脱标
2.visibility：visibility显示 hidden 隐藏 不脱标
3.overflow溢出：hidden不显示超出部分 scroll溢出部分实现滚动条 auto 需要的时候添加滚动条
