web前端知识总结（中） 非常适合小白入手

CSS选择器

一.基本选择器

1.元素选择器 E{}               

           *元素选择器中的特例，代表所有类型的元素

          *{padding:0;margin:0}

2.属性选择器 E[attr]{}         

           ^=前缀 $=后缀 *=包含 =严格等于

           div[id^=zz]{} div里面套着id属性

3.id选择器 #id{}                 

             元素选择器与id选择器结合时没有空格

4.class选择器                   

              .class{} 元素选择器与class选择器结合时没有空格

5.包含选择器                     

                selector1 selector2 ……{} div .zz{}

6.子元素选择器                   

                  selector1>selector2>...

7.兄弟元素选择器               

                   selector1~selector2{} 从selector1向下查找selector2的兄弟(具有共同父级元素的元素)

8.选择器组合                       

                   selector1,selector2,...{}

二.伪元素选择器

1.首字符伪元素选择器   

::first-letter{} 使用前提:依附元素必须是块级元素

2.首行伪元素选择器     

::first-line{} 使用前提:依附元素必须是块级元素

3.自定义前置伪元素选择器   

::before{} 使用前提: 不管需不需要自定义，必须使用content 属性

4.自定义后置伪元素选择器   

::after{} 使用前提: 不管需不需要自定义，必须使用content 属性

三.伪类选择器

1.结构性伪类选择器

:nth-child() 着重点是位置 括号中可以放数字，数字从1开始代表第一个 odd代表奇数 even代表偶数 加法表达式 2n+1 其中n从0开始

:nth-last-child() 括号中可以放数字，数字从1开始代表第一个 odd代表奇数 even代表偶数 加法表达式 2n+1 其中n从0开始

:nth-child(1) 等价于 :first-child 查第一个元素

:nth-last-child(1) 等价于 :last-child 查最后一个元素

:nth-of-type() 着重点是类型 数字从1开始代表第一个 odd代表奇数 even代表偶数 加法表达式 2n+1 其中n从0开始

:nth-last-of-type() 括号中可以放数字，数字从1开始代表第一个 odd代表奇数 even代表偶数 加法表达式 2n+1 其中n从0开始

:nth-of-type(1) 等价于 :first-of-type 查第一个元素

:nth-last-of-type(1) 等价于 :last-of-type 查最后一个元素

2.UI状态伪类选择器

:hover 悬停状态

:focus 焦点状态

:checked 选中状态

:disabled 不可用状态

3.其他伪类选择器

:not() 过滤掉某个或某些元素 (连续使用 :not)

CSS选择器的优先级

1.选择器写的越准确（越长），优先级越高

2.id选择器>class选择器>元素选择器

3.同级别同长度下，css代码按照顺序执行，后写的代码覆盖前面写的代码

CSS长度单位

1.绝对长度单位

px(像素)、in(英寸)、cm(厘米)、mm(毫米)等

2.相对长单位

        %(以父级元素的尺寸为参考维度)

        em(以父级元素字体大小为参考维度)

        rem(以html元素字体大小为参考维度)

        vh(以视口的高度为参考维度)

        vw(以视口的宽度为参考维度)

        vmin(以视口的高度、宽度最小的为参考维度)

        vmax(以视口的高度、宽度最大的为参考维度)

html和box的默认font-size 是16px

盒子模型 display

居中 text-align： center

块级元素 特征：独占一行，对宽度、高度、对齐方式支持

display：block

举例：div ul li h1-h6

内联级元素 特征:不独占一行 对宽度、高度、对齐方式不支持

display:inline

举例：span、a

内联块级元素 特征:不独占一行 对宽度、高度、对齐方式支持

display:inline-bolck

举例：img input table

弹性盒子元素 特性:弹性盒子内子元素默认始终横着布局，子元素高度一致

display:flex

盒子内部结构：由内到外分别是 内容区、填充区、边框区、外边距区

内容区:     width、height 默认是对内容区起作用

填充区:     padding：以上为开始 顺时针旋转，不够对称

                padding：10px 上下左右距离10px

                padding：10px 20px 上下距离10px 左右距离20px

边框区:    border 复合属性 border-style边框的样式 border-width边框的宽度

                border-color 边框的颜色

复合属性可以分着写 可以合着写

外边距区: margin 以上为开始 顺时针旋转，不够对称 auto(水平有效)只针对左右居中

配套属性:box-sizing:content-box(内容区) border-box(内容区+边框区)

补充:浏览器中对中西文字换行规则不一样：中文可以在任意处换行，英文默认只会在空格或者连字符处换行

如果想改变换行规则:word-break:break-all(换行)(默认是keep-all 不换行)

横向布局

弹性盒子模型 display:flex

配套属性:

flex-direction

           作用对象：弹性盒子

          设置弹性盒子内子元素的排列方向，其值有row(横着，默认)

           colum(竖着) colum-reverse(反向竖着)row-reverse(反向横着)

flex-wrap

            作用对象：弹性盒子

           设置弹性盒子内子元素是否换行

           其值有 nowrap(不换行，默认) wrap(换行)

order

            作用对象:弹性盒子内子元素

           设置该子元素的排列位置 值越小越靠前

flex

             作用对象:弹性盒子内子元素

             复合属性

            flex-grow(拉伸因子) (占不满的时候按比例来分) flex-grow:1

            flex-shrink(收编因子) (超出的按比例去减去)

            flex-basis(基准宽度)

注：flex:1 代表是1 1 0

justify-content

             作用对象：弹性盒子

            设置弹性盒子内子元素在排列方向上的分布方式

            center(居中) flex-start(弹性的开端) flex-end(弹性的尾端)

            space- between(空白在中间) space-around(空白在周围)

align-items

            作用对象：弹性盒子

            设置弹性盒子内子元素在排列方向上垂直方向的对齐方式

            center(居中) flex-start(弹性的开端) flex-end(弹性的尾端)

             baseline(弹性的开端，以元素内容的底端为基准线对齐)

align-content

             作用对象：弹性盒子

             设置弹性盒子内行的分布方式

             center(居中) flex-start(弹性的开端) flex-end(弹性的尾端)

             space- between(空白在中间) space-around(空白在周围)

定位：position

其值有static(静态，默认)，relative(相对定位)，absolute(绝对定位)，fixed(固定定位)

配套属性:left、right 、top、bottom 、z-index(层次，值越大越靠前) 前提是position属性的值必须是relative(相对定位)，absolute(绝对定位)，fixed(固定定位)三个中其中一个

场景:

1.纯使用relative 保留元素的物理空间，定位参考位置是元素本身，随着浏览器的滚动而滚动

2.纯使用absolute 不保留元素的物理空间，定位参考位置是浏览器，随着浏览器的滚动而滚动

3.纯使用fixed 不保留元素的物理空间，定位参考位置是浏览器，不随着浏览器的滚动而滚动

4.结合使用relative和absolute relative作用祖先元素，absolute作用于该元素，达到该元素不保留元素的物理空间，定位参考位置是祖先元素，随着浏览器的滚动而滚动