h5小白笔记day11

1. 流式布局

      就是百分比布局

       高度的百分比是基于父元素的百分比进行渲染，因此使用百分比作为高度，他的父级必须定高

        特殊属性百分比

        元素的 margin-top、margin-bottom、padding-top、padding-bottom 他们的百分比设置都是基于父元素宽度的百分比

        line-height 如果设置百分比，不是基于父元素的line-height值，而是基于他自己字号(font-size)的百分比

2. 媒体查询

    根据不同设备的宽度，设置不同的样式

        关键字是 @media

        属性

            only 指的是只针对某一种设备

            not 不针对某一设备

            screen 电脑屏幕，手机，iPad 设备中的一种，print 打印机，speech盲人听读机，all 指的是所有设备

            and 链接 后面括号中条件的关键字，and 的左右两边必须有空格

            () 在()里面可以设置条件，他里面的条件一般都是 max-width min-width的设置

            {} 满足条件的时候，设置的css样式必须书写在 {} 中

        注意事项：媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，基础样式写在媒体查询的前面，这样才不会覆盖媒体查询的样式

3. 属性选择器

        以下 E 代表标签名，attr 表示属性名 val 表示属性值

        1. E[attr] 选择所有具有 attr属性的 E 元素

        2. E[attr=val] 选择所有具有 attr属性并且它的值是val的 E元素

        3. E[attr~=val] 选择所有具有 attr属性并且它的值 包含 val的 E元素

        4. E[attr|=val] 选择所有具有 attr属性并且它的值是以 val 或者 val- 开头的 E元素

        5. E[attr*=val] 选择所有具有 attr属性并且它的值具有 val 字符的E元素

        6. E[attr$=val] 选择所有具有 attr属性并且它的值是以 val 字符 结束的 E元素

        7. E[attr^=val] 选择所有具有 attr属性并且它的值是以 val 字符 开始的 E元素

4. 伪类选择器

 focus 为所有获取焦点的input设置样式

        disabled 为所有被禁用的input设置样式

        :target 目标伪类选择器，当跳转到它所修饰的元素上的时候才会执行该选择器的样式

        root 表示的是 html

        E:empty 选中所有内容为空的E标签，并添加样式

        :empty 选中所有内容为空的标签，并添加样式

        E:only-child 选中父元素中只有一个E标签的 E标签,并添加样式,独生子标签

5. 伪元素选择器

       通过伪元素选择器可以给元素添加一个类似子元素的内容，不是真正的标签

        使用伪元素需要添加 ::

        ::first-letter 表示修改第一个字符

        ::first-line 表示修改第一行字符

        ::before 在元素内容的最前面添加一个伪元素

        ::after 在元素内容的最后面添加一个伪元素

6. 结构伪类选择器

        父级 E: nth-child(num) 选中同一个父级下，排名次序为 num的E元素，num 从1开始

        使用n表达式，设置选中的标签，n从0开始计算

        偶数使用 2n

        E: nth-child(2n)

        E: nth-child(2n+1)

        也可以使用 odd 表示奇数

        even 表示偶数

        E: nth-last-child(num) 表示从后开始往前数，使用方式和 nth-child 一样，也就是倒着计算

如果父元素中的子元素不是同一个类型，则不能使用 nth-child(num) 来设置css，因为匹配到的元素不对

        使用 E:nth-of-type(num) 来匹配元素，他的意思是，找到和E标签同类型第num个元素

        E:nth-last-of-type(num) 使用方法和 nth-of-type 一样，只是倒着数