样式规则，盒子模型，消除浮动的方法

清除浮动的方式
1.
浮动元素的父元素：：after{
content: ‘’;
clear: both;
display: block;
}
2.浮动元素的父元素：：after{
overflow：hidden；
}
3.浮动元素的兄弟元素{
content: ‘’;
clear: both;
}
3.样式规则
1.字体样式 font-
color字体颜色
font-style 字体样式
font-style: italic;斜体
font-style: normal;正常字体
font-weight 字体粗细
bold粗体
lighter更细的字体
normal正常粗细
100-900
font-size 字体大小
px
浏览器的默认字体大小16px
line-height行高
取值是包裹该字体的元素高度，即可垂直居中
font-family 字体族
‘微软雅黑’
‘Microsoft YaHei’
serif 衬线
速写
font:font-style，font-weight，font-size，font-family
1.必须包含font-size， font-family
2.font-style和font-weight必须在font-size之前
3font-family必须放在最后
webfont
@font-face
ttf
1.下载ttf字体文件
2.放到相对于的目录（项目的目录）
3.通过 @font-face {
/* myfont是随便设置的名字 */
font-family: ‘myfont’;
src: url(’./…’);}引入
4.在需要字体的地方使用
div{
font-family：‘myfont’
}
}
字体图标库iconfont，fontawesome
iconfont
1.更改图标的大小时候使用font-size更改大小
2.选中需要更改的图标时，需要通过类名选中
fontawesome

2.文本样式 text-
text-align 文本在当前元素中的对齐方式
        left
        center
        right
        justify
    text-decoration：
        underline下划线
        overline 上划线
        line-through删除线
    text-shadow文本阴影
        px x轴平移
        px Y轴平移
        blur 模糊程度
        color 颜色
    text-transform文本变形
        lowercase文本变小写
        uppercase 大写
        capitalize首字母大写
3.列表样式
    list-style：none；将li标签的默认样式删除
4.拓展
    1.文本水平垂直居中
        水平：text-align：center
        垂直：line-height
    2.消除a标签的默认样式
        color:#ccc;
        text-decoration：none;
        cursor:default;
                wait;
                help;
                pointer;手的标签
    3.子元素在父元素中垂直居中
        display:table-cell;
        vertical-align:middle;
        align-items:center ;
        子元素
        display:inline-block;

4.单位
1.颜色
1.关键字
red。。。
color：red；
2.十六进制
color：#333333
3.RGB函数
r red
g green
b blue
color:rgb(0,0,0);
0~255
4.rgba 函数
color:rgba(0,0,0,0);
最后一个0位0~1透明度
opacity和rgba的区别
opacity父元素的透明度会影响子元素的透明度，而且子元素无法设置回去
rgba透明度仅仅会作用于父元素，不会作用于子元素
5.渐变色
background-image: linear-gradient(to right,red,yellow);
2.长度
绝对单位
px
相对单位
em
当前文本的包裹元素上的font-size

12323

em=18
%
5.盒子模型
文档中的每个元素都可以看成是一个盒子
1.盒子属性
width
height
margin外边框
盒子与其他盒子之间的距离
margin-top
margin-right
margin-bottom
margin-left
margin：10px;上下左右都是10px
margin：5px 10px;上下为5左右为10
margin：5px 10px 15px;上为5 左右为10 下位15
margin：5px 10px 15px 20px;上5 右10 下15 左20
border边框
border-width边框线的宽度
px
border-style边框线的样式
solid 实线
dotted 点状线
dashed 虚线
double 双实线
border-color
border-radius边框圆角
border-radius：100%园
border-radius：10px
速写
border: 10px solid #333;
padding内边距

    background-color字体颜色
    background-image
    background-position
    background-repeat
            no-repeat；
            repeat-y y轴重复
            repeat-x
    background-size ：%100 %100背景图尺寸

2.盒子组成
    width,padding,border ,margin
3.盒子分类
    box-sizing设置盒子的类型
    1.box-sizing:content-box;
        内容盒子【w3c盒子】
        width=内容width
        所占的宽度=width+padding+border+margin
    2.box-sizing:border-box;
        边框盒子【IE盒子】
         width=内容width+padding+border
        所占的宽度=width+margin

6.四列布局