css的定义：层叠样式表
css的作用：布局页面，美化页面
css的语法：选择器{样式1；样式2}
css的特性
层叠性：样式可以一条一条叠加；
继承性：父级设置样式，子级会继承该样式；
打破继承性的方式：页面字体都是16px，在子级上写新的样式font-size:18px;，打破他的继承
性
css的引用方式：
1. 外部样式表： 在head标签中使用link标签，引入外部的css文件
2. 内部样式表： head标签内写style标签
3. 行内样式表：标签名后写style属性
优先级：写的离元素越近 ， 行内样式优先级最高
内部和外部的优先级：内部大于外部
css选择器：
作用：精确选择需要渲染需要加样式的标签；
1.标签选择器 p{样式} 选择范围：页面中的所有p标签
2.通配符选择器 *{样式} *选择的是 页面中的所有内容，一般用来加全局的公共样式；
*会把html标签全部找一遍，实际开发中直接把所有标签都写上
3.id选择器 #id值{样式} 首先给元素加一个id属性； 一个id值在网页中只能出现一次
4.class选择器 .class值 同一个元素可以有多个class值，同一个class值可以用给多个标签
5.相邻子级选择器 div>p 选中div为父级的下面紧挨着的第一代子级p标签；
6.派生元素选择器 div p 选中div为父级的下面所有p标签，无论第几代子级；
7.群组选择器 （并集选择器） div，p，img 同级元素组成一组加公共样式；
8.交级选择器 li.first 选中类名为first的li标签
9.兄弟选择器 li+li 选中第二个弟弟元素， 必须是同一级，有共同的父级；
10.伪类选择器 li：hover{background-color：red；} 鼠标悬停在li标签上时li背景色为红色；
li：hover>a{color:red;} 鼠标悬停在li标签上时li内的a标签字体为红色；
选择器权重系数：
id选择器：100
class选择器 ：10
标签选择器： 1
有层级关系的选择器（复合选择器）：每个选择器的权重相加
群组选择器 （并集选择器）：逗号之间权重系数不加
选择器命名规范（见类名的明名规则总结表）
css基础样式
长度单位
1.固定值 px
2.百分比取值：参考点是当前标签的父级尺寸
颜色单位取值
1. 关键字取值
2. 三基色取值 rgb（255，255，255）白色
rgba（125，250，120，0.4）
a代表颜色的透明度，取值范围介于 0.0（完全透明）与1.0（完全不透明）
3. 16进制取值 #fff白色 #000黑色 #333黑色 #ccc灰色 #666 #eaeaea浅灰
尺寸设置
宽度：width
高度：height
最大宽高：max-width max-height
最小宽高：min-width min-height
最大宽高设置一个元素尺寸上下限度
显示：display
display：inline
display：inline-block
display：block
列表样式：
list-style：none
链接样式：
：hover 伪类 权重系数：10
伪类状态选择器
li：hover a{color:red;}
伪类样式四种状态：
刚看到链接标签，鼠标放上去之前的状态：--- ：link；
鼠标悬停上去的状态；--- ：hover；
鼠标按下但没松手的状态；--- ：active；
鼠标按下后松手的状态； --- ：visited；
表格样式：border-collapse:collapse; 边框线双线折叠为单线；
网页三种布局方式：
流动布局 盒模型
浮动布局 浮动
层布局
定位
（浮动和定位元素同样遵循盒模型概念）
盒模型：
元素组成： content padding border margin
content：元素本身的宽高
border：边框
border-width：5px 边框宽度，一个值四条边都是5px，四个值是上右下左
border-style： solid 实线 dashed 虚线
border-color：边框颜色
border：1px solid red ； （border简写）
padding：内边距，边框到内容的距离
padding也是四个方向。 写两个值是上下，左右；三个值是上，左右，下
margin：外边距，元素到元素之间的距离
行标签：垂直方向时padding和margin不占位
盒模型作用：计算元素在网页中实际的占位
元素盒子的宽高计算： content+padding+border；
元素盒子所占位的区域： content+padding+border+margin；
元素之间间距问题：
两个块标签上下的margin以大的为准；
两个元素（包括三种特性标签）：水平方向间距等于两者margin之和；
边距合并现象：
块标签中，子级块标签设置margin-top，父级高度也下来了。浏览器区分不了谁是子级谁是父
级，他们共用一条边框。解决方案：
1. 给子级标签改变输出特征：display：inline-block；
2. 给父级设置padding就撑开了，给子级margin-top去掉。
3. 父级子级设置border，子级再设置margin-top
4. 父级设overflow：hidden，子级再设置margin-top
浮动：子级标签漂浮出父级的约束，一行排列，浮动后的子级不占位；
语法：float：left right none 浮动之后所有标签都具备行内块标签特性
浮动负面影响：
1. 浮动后父级高度消失
2. 浮动之后，第二行内容跟随
浮动后父级高度消失解决办法： 只要使用浮动，必须清除浮动
1. 父级高度消失：给父级设置高度可以恢复 缺点：不提倡给固定高度
给父级设置overflow:hidden,超出部分隐藏。 子级标签内部有下拉菜单，那么就不能使
用overflow-hidden；
2.
3. 给失去高度的父级标签内最后面插入一个不参与浮动的空块级标签，给这个标签添加：
css课程总结
显示：display
display：inline
display：inline-block
display：block
display：none 消失，不占位
背景：background
background-color 背景色
background-image 背景图
background-repeat no-repeat 背景图是否平铺
background-position 水平方向，垂直方向位置移动
background-attachment: fixed ; 背景图固定在网页的可视范围内
背景图默认从左上角开始填进元素盒子中
精灵图（雪碧图）
每写一个图片，向服务器请求一次，文件很大很慢
所有小图标放同一个图里面，通过通过背景图的定位实现不同图标的展现
文本样式
text-align 除了设置文本，还可以设置标签居中，仅仅针对块元素中的行标签和行内块标签
text-indent：缩进，取值px，em（当前文本的大小）
text-decoration：修饰 text-decoration：none；取消下划线；
letter-spacing：改变英文单词之间的标准间隔
word-spacing：改变文字（汉字）之间的间隔；改变字母（英文）之间的间隔；
文字样式：
字体：font-family 计算机显示的字体
大小：font-size
颜色：color
斜体：font-style：italic 斜体
加粗：font-weight：400正常 block（900）最粗
行高：line-height 让单行文字在元素中垂直居中
line-height取值：1：固定数值，2：数值倍数
l块元素父级内只有一行内容时可以实现垂直居中；文本，行内标签都适用。
图片和文字在同一行，如何实现图片和文字都垂直居中？ 分两步
parent{line-height: ;} 先设置父级盒子设line-height，文字垂直居中，此时图片底边线ine-height在和文字底线对齐；
1.
2. parent img{vertical-align:middle;} 再给图片设置垂直居中样式。什么环境下使内容垂直居中？
1. 父级高度消失：给父级设置高度可以恢复 缺点：不提倡给固定高度
给父级设置overflow:hidden,超出部分隐藏。 子级标签内部有下拉菜单，那么就不能使
用overflow-hidden；
2.
给失去高度的父级标签内最后面插入一个不参与浮动的空块级标签，给这个标签添加：
clear：both。缺点：空标签太多
3.
4. 最合适的方法： 给父级添加伪类：谁浮动，给谁的父级设置；浮动类名设为clearfix
父级：after{content：“”；
display：block；
visibility：hidden；
clear：both；
}
第二行内容跟随解决办法：
给跟随的第二行内容的最大父级标签设置：clear：both
定位：position
相对定位：position：relative 定位后依然占位。 以元素自身当前位置左上角为参考点移动；
绝对定位：position：absolute 脱离文档流，不占位 相较于参与定位的父级左上角为参考点
绝对定位元素如何寻找自己的定位父级
1.从自己开始往自己的祖先去找，直到找到了一个有position属性的元素，那么这个元素就是它的定
位父级；不会继续找了；
2.如果找到body的时候，还没有position的元素，那么就以body为定位父级；
一般情况用绝对定位，父级设为相对定位：子绝对，父相对
固定定位：position：fixed 相对于整个浏览器来定位 可以做弹窗 脱离文档流，不占位
z-index 层级关系 取值默认是0，取值越大，越靠上
注意三大定位的区别
案例：让一个元素在窗口上下左右都居中
position：fixed；
left：50%；
top：50%；
margin-left：-元素本身宽度一半；
margin-top：-元素本身高度一半；
