三大特性
层叠性
冲突：就近原则
继承性
text
front
line-开头
行高继承
body {
//子元素为本身的1.5倍
font: 12px/1.5
}
div {
font: 24px
}
优先级
如果选择器相同
继承性
不同选择器
继承（*）< 元素选择器 < 类选择器 < ID选择器 < 行内选择器 < importance
子选择器继承的样式永远为0
a默认样式 蓝色+下划线
权重叠加
继承 0 0 0 0
元素选择器 0 0 0 1
类选择器 0 0 1 0
ID选择器 0 1 0 0
行内选择器 1 0 0 0
盒子模型
Border
border:
Content
Padding（内边距）
padding: 上 右 下 左
Margin（外边距）
margin-button: 20px;
left,right,top
//水平居中,前提盒子必须有高度
margin: 0 auto
//行内元素水平居中
//给父元素添加
text-align: center
//子元素和父元素同时具有外边距（margin）会出现塌陷
//解决方案
//1.给父元素定义上边框
border: 1px solid transparent
//2.给父元素定义内边距
padding: 1px
//3.给父元素添加overflow
消去内外边距
*{
padding: 0
margin: 0
}
圆角边框
border-radius: 10px
//正方形 -> 圆形
border-radius: 50%;
//矩形 -> 椭圆矩形
border-radisu: height/2px
阴影效果
//box-shadow: h-shadow, v-shadow, blur(影子距离）, speard（尺寸）, color, inset
box-shadow:
浮动
上下使用标准流，左右使用浮动
只会影响当前的标准流，不会影响之前的标准流
特点
顶端对齐
自动换行
父元素空间不足时自动换行
行内块
添加了flow具有行内块特定
消去浮动
父容器高度无法确定，内容浮动
解决：让子孩子撑开父容器
Flex
flex布局水平分布
.container{
display: flex;
flex-wrapper: wrap;
}
.container > .item{
flex: 1; -> 1 0 0%
width: 44%; -> 水平分布两个
min-width: 44%
max-width: 44%;
}
悬浮按钮
.second-button{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 50rpx;
right: 20rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 9;
}
