前端进阶（5）CSS
1、css样式表特征
继承性
层叠性
优先级：内联>外部样式表或内部样式表>浏览器设置
提升有限级： !important h1{ color:red;!important}
2、选择器
1、通用选择器：*
2、元素选择器（标签选择器、标记选择器）：
3、类选择器（类样式）：.classname 通过标签的class属性进行引用
4、分类选择器
元素选择器 .类选择器
p.current{}
5、id选择器{id样式}
#idName 通过元素的id值进行引用
6、 群组选择器
使用逗号分开的多个选择器，多个选择器可以共享一个样式
7、后代选择器
通过元素的层次关系找元素（没有层数限制）
选择器 选择器
8、子代选择器
通过元素的层次关系（下一级）
选择器>选择器 例子：h1>span h1的子元素span
9、伪类选择器，多数使用在a标签
：link
：visited
：hover
：active
10、选择器优先级
高： 内联样式
ID选择器
类或伪类选择器
低： 元素选择器
3、 单位
1、尺寸单位
px：像素
%: 占据外部元素的百分之多少
em：倍数
2、颜色
英文单词表示
rgb
4、尺寸属性
宽度 ：width min-wight max-wight
高度：height min-height max-height
8、溢出
overflow ：
visible：可见
hidden:隐藏
scroll:滚动条
auto：自动（自己决定应不应该有滚动条）
overflow-x：
overflow-y:
9、边框
属性: border:大小 样式 颜色；
border-方向：大小 样式 颜色；
border-left-width：左边框大小
大小：width
样式：style
颜色:color
10、边框倒角
border-radius：控制四个角的圆角半径
border-bottom-left-radius：左下角半径
11、阴影
box-shadow: h-shadow 水平 v-shadow 垂直 （必须）
可选： blur:模糊程度
spread:尺寸
color:颜色
inset：内阴影
12、图片边框
border-image:url(地址) 宽度
repeat: repeat(平铺，横纵向平铺)
round
stretch 拉伸
13、轮廓
框模型
框模型：定义了元素框处理元素内容、内边距、边框和外边距的方式
增加内边距、边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸
对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距
例子：
div.box{
width:200px;
height:100px;
padding:20px;
margin:40px;
border:1px solid black;
}
该div宽度=40+1+20+200+20+1+40=322
外边距 margin 紧紧围绕元素外围的空间
外边距：与下一个元素之间的空间量
-margin：value；四个方向的margin
单边设置：margin-top,margin-right,margin-left,margin-bottom，
以左上为优先，先满足左上的设置
外边距的属性值可能为px，%或auto，也可以设置为负值
默认情况下，以下HTML块级元素都存在外边距
-body
-h1,h2,h3,h4,h5,h6
-p..
声明margin属性，可以覆盖默认样式
body,p,div,h1,h2,h3,h4,h5,h6,pre{
margin:0
} 或 *{margin：0；}
margin可取值为auto，由浏览器计算外边距
-实现水平方向居中显示的效果
外边距简洁写法
margin：value(四个方向相同)
margin：5px 10px； 上下5px 左右10px
margin：5px 10px 5px； 上5px ，左右10px，下5px（更多用于上下不一样，左右居中）
margin： 5px 10px 5px 10px ；上 右 下 左，从上开始顺时针
2、外边距合并
当上下外边距相遇时，它们将形成一个外边距，称之为合并外边距。最终的边距距离，以数值大的为准。
3、内边距-padding
1、什么是内边距：内容区域与边框之间的空间，注意：会扩大元素边框所占用的区域
2、赋值
padding:value; 内边距属性值可以为像素、百分比、不能为负数，外边框可以为赋值
padding-left:
padding-right:
padding-bottom:
padding-top:
padding简单赋值： padding:value(上下) value（左右）； padding：v1（上）v2（左右） v3（下）； padding：v1（上）v2（右） v3（下）v4（左）；
3、CSS重写
清楚样式
方式：将margin padding 全部重置为0