Day 5 css

1、css选择器

1)标签选择器
    div {}
2)类名选择器
    .one {}
3)id选择器
    #one {}
4)通配选择器
    * {} 
    样式初始化
5)逗号选择器
    div, .one {}
6)组合选择器
    div.one {}
7)子代选择器
    div > .one {}
8)后代选择器
    div .one {}
9)兄弟选择器
    通用兄弟选择器
        div ~ .one {}
    相邻兄弟选择器
        div + .one {}
10)属性选择器
    [type]        
    [type=text]
    <input type = 'password'>
        [type='password']        
    <input type = 'text'>
11)伪类选择器
    :first-child{}
    :last-child{}
    :nth-child(n){}
        1、2、3、4、odd、even
12)伪元素选择器
    ::after {}
    ::before {}
    用法: 
        1.导航栏的侧边
        2.清除浮动
jQuery 
    $('.div')
    $('#div')

2、浮动布局

文档流
float:left/right;
特点:
    1)使用了浮动的元素会失去对父元素的支撑
    2)使用了浮动的元素的宽高由内容决定
    3)使用了浮动的元素在网页中原本的位置由其他块级元素替代
    4)使用了浮动的元素会在一行从左向右排布，当前行宽度不够时，自动换行
清除浮动的方式
    1.浮动元素的父元素
        .parent::after{
            content:'';
            clear:both;
            display:block;
        }
    2.浮动元素的父元素
        .parent {
            overflow:hidden;
        } 
    3.浮动元素的下一个相邻兄弟  
        .one {
            content:'';
            cleat:both;
        }

3、样式规则

1)字体样式 font-
    color 字体颜色
    font-style 字体样式
        italic 斜体
        normal 正常字体【默认】
    font-weight 字体粗细
        normal  正常字体【默认】
        bold    粗体
        lighter 更细的字体
        100~900 数字越大，字体越粗
    line-height 行高
         取值等于该字体的包裹元素的高度
         <div style='height:200px'>123</div>
         line-height:200px;//文字垂直居中
    font-size 字体大小
        浏览器默认字体大小为16px
    font-family 字体族
        字体族的名称
        '微软雅黑'
        'Miscrosoft YaHei'
        serif 有衬线
        sans-serif 无衬线
        fangsong 政府文件
    font速写:
        1.必须包含font-size、font-family
        2、font-style、font-weight必须在font-size之前
        3、font-family必须在最后
        速写格式:
        font:font-style font-weight font size font-family;

    webfont 
        @font-face
            .ttf
            1.下载ttf字体文件
            2.将文件放到相对应的目录下
            3.通过@font-face引入
                @font-face {
                     font-family:'a' ;
                    src: url('./HYSIJIATiW.ttf');
                     }
            4.使用字体
                div{
                    font-family:text;
                }

        字体图标库
            iconfont、fontawesome
2)文本样式 text-
    text-align 当前文本在元素中的对齐方式
        left
        center
        right
        justify
    text-decoration 文本的线
        underline 下划线
        overline    上划线
        line-through    删除线
    text-transform  文本变形
        capitalize   首字母大写
        uppercase       全部大写
        lowercase   全部小写
    text-shadow     文本阴影
        px      x轴偏移量
        px      y轴偏移量
        blur    模糊程度
        color   阴影颜色
        text-shadow:10px 5px 5px #333；
3）列表形式
    list-style:none;

4)单位
    1.颜色
        1.关键字
            red、black....
            color:red;
        2.十六进制颜色
            #ededed
            #333333  ==> #333
            color:#333;
        3.rgb函数
            r red
            g green
            b blue 
            0~255
            color:rgb(255,255,0);
        4.rgba函数
            r red
            g green
            b blue
            0~255
            a 颜色透明度
            0~1
            color:rgba(0,0,0,0.5);

            opacity:0
        5.渐变色
            background-image:linear-gradient(to right,red,#ccc);
            从左到右，从红色渐变到#ccc
    2.尺寸
        绝对单位
            px
        相对单位
            em  
            等于父元素的font-size
            <div style = 'font-size:12px;'></div>
            1em = 12px;
            2em = 24px;
            %   相对于父元素

4.盒子模型

文档中每个元素都可以被看做是一个矩形盒子
1)盒子属性
    width
    height
    margin 外边距
        盒子与其他盒子之间的距离
        margin-top 上外边距
        margin-right 右外边距
        margin-left  左外边距
        margin-bottom 下外边距

        margin:10px;    上下左右都为10px
        margin:5px 10px;    上下为5px，左右为10px
        margin:5px 10px 15px;   上为5px，左右为10px，下为15px
        margin:5px 10px 15px 20px; 上5px 右10px 下15px 左20px
    border 边框
        border-width    边框线宽
            px
        border-style    边框样式
            solid   实线
            dotted  点状线
            dashed  虚线
            double  双实线
        border-color    边框颜色
        速写：
            border:1px solid #ccc;
    padding 内边距
        盒子边框与内容之间的距离
    background-color    背景颜色
    background-image    背景图片
    background-repeat   背景图片重复的方式
        no-repeay
        repeat-x 
        repeat-y
    background-size        背景图片尺寸
        background-size: 100% 100%;
2)盒子组成
    width、padding、border、margin
3)盒子分类
    通过box-sizing可以设置盒子的类型
    1.box-sizing:content-box;[内容盒子][W3C标准盒子]
        width = 内容width
        所占的宽 = width + border + padding + margin

    2.box-sizing:border-box;[边框盒子][IE盒子]
        width = 内容width + border +padding 

5、浮动布局

四列布局
七列布局