day06

结构伪类选择器

    根据html结构来进行元素的选择
    第一个子元素
        父级  子级:first child {} 
    最后一个子元素
        父级  子级:last-child {}
    任意的子元素
        父级 子级:nth-child(数字/关键字) {}
            数字1.....n,  n代表全部的元素
            关键字
                even 偶数
                odd 奇数
            公式
                2n 偶数/2的倍数    4n
                奇数   2n+1   2n-1
                从第几个开始  n+6
                前三个  -n+3
    了解
        从后选择第一个子元素
            :nth-last-child()  {}
        根据类型选择元素
            :nth-of-type() {}

伪元素

    利用css创建的元素
    ::before {}在内容之前
    ::after {} 在内容之后
    注意
        1.必须添加content;‘’；
        2. 伪元素是行内元素
        3. 单标签不能使用伪元素
        4. 低版本的浏览器不识别 :: 双冒号的写法是H5提供的
标准流
    文档流：默认的元素显示模式就是文档流
    块元素  垂直布局  上下布局
    行内和行内块   水平布局  左右结构  一般不会利用行内和行内块进行布局

浮动

作用
        1、早起：图为环绕
        2、现在：页面布局  =>  块级元素水平布局
    代码
        float:none; 不浮动
        float:left;    左侧浮动
        float:right;   右侧浮动
    特点
        1、脱标不占位
        2、浮动比标准流高半个级别，能压住标准流的元素，但是不能压住文字和图片
        3、浮动找浮动，浮动元素会紧挨着兄弟元素浮动
        4、元素浮动后特点
            一行多个显示
            可以设置宽高
        注意：
    浮动元素本身不能通过margin: 0 auto;
    不能给浮动元素的父级添加 text-align: center 居中浮动元素
        技巧：兄弟元素，有浮同享
    案例
        网页布局案例     =>    小米页面
        小米手机模块
        网页导航
        补充：jd浮动案例
        微金所导航

清除浮动

介绍 目的：清除浮动带来的影响 影响：子元素浮动，脱标不占位置，撑不开父级的高度，导致页面布局出现错误 效果：父级有高度 方法 1、高度法：给父级添加高度 优点:简单粗暴 缺点：如果不确定内容的高度，则不能设置 2、额外标签法：3WC 推荐的做法 步骤： 给浮动元素的父级的最后添加一个块级元素 给这个块级元素设置 clear: both; 优点：官方推荐 缺点：增加了很多没有意义的标签 3、单伪元素清除浮动 .clearfix::after {

display: block; content: ''; clear: both; } .clearfix::after { display: block; content: '.'; clear: both; /* 补充写法 */ height: 0; visibility: hidden; } 4、双伪元素清除浮动 .clearfix::before, .clearfix::after { display: table; content: ''; } .clearfix::after { clear: both; } 5、给父级加overflow: hidden;