选择器

        -属性选择器

        根据元素的属性来获取元素

        语法:

.[属性名]
.[属性名=属性值]
.[属性名^=属性值](三角代表以什么字母为开头的)
.[属性名$=属性值](以什么结尾的)
.[属性名*=属性值]

伪元素

        伪元素用来表示一些特殊位置的元素

        为元素使用::(双冒号)开头

                

::before元素内部开始的位置
<div></div>
div::before

::after元素内部的结束位置

::selection 选中的内容

::first-letter第一个字母(字)

::first-line 第一行

2.css的特点

-继承

        就像后代会继承祖先的财产,后代元素也会继承到祖先元素的样式

        继承的存在大大的简化了我们的开发,利用可以在一个祖先元素上设置一些公共样式,这样其所有子元素就继承相同样式

        但是并不是所有的样式都会被继承,像背景\border\width\height......

-选择器的权重

        当使用不同的选择器选中同一个元素,并且为它同一个样式设置不同的值,这时就发生了样式冲突

        发生样式冲突时,哪个样式会生效由选择器优先级决定:

                -内联样式(1,0,0,0)

                -id选择器(0,1,0,0)

                -类和伪类(0,0,1,0)

                -元素选择器(0,0,0,1)

                -通配选择器(0,0,0,0)

                -继承的样式,没有优先级

        优先级在计算时,需要将所有有用到的选择器进行相加,然后在比较,优先级高的优先使用,如果优先级一样,则使用靠后的样式.

        !important可以在一个样式的最后添加它,这样该样式就会获得最高优先级,优先所有样式显示,慎用

-单位

长度单位

        像素(px)

                就是屏幕上一个一个的点

                         但是像素分为两种:css像素和物理像素

                在编写网页时,使用的是css像素,在pc端默认情况下(没有缩放)1css像素=1物理像素

                如果对pc端进行放大,或者在移动端开发 则1css像素会对应多个物理像素

        百分比(%)

                百分比会根据父元素指定的值来计算当前元素的值

                        一般在响应式的开发中,会使用百分比

                包含快

                        默认情况下,包含快就是离当前元素最近的块级祖先元素

        颜色单位

                颜色名

                        red,orange,yellow,blue green....

                rgb值

                        使用红绿蓝三种颜色的光的浓度来调配出不同的颜色

                        rgb(红色,绿色,蓝色)

                                取值范围0-255 /0%-100%

                        rgba()

                                a(alpha)表示不透明度,范围是0-1

                十六进制rgb值

                                语法:#红色绿色蓝色

                                范围 00-ff

                                例子:#ff0000👉#ff00

                hsl值

                                工业中设置颜色的方式

                                他通过三个值来设置颜色

                                h色相(0-360)

                                s饱和度(0%-100%)

                                l亮度(0%-100%)

盒子模型(box model)

        在css中,将每个元素都设置成了一个矩形的盒子

        每一个盒子从内到外由以下几个部分组成

               内容区

                        内容区相当于盒子的内部空间,所以的子元素都在父元素的内容区存在

                        使用width和height来设置内容区的宽度和高度

                内边距

                        内容区和边框的距离叫做内边距

                        padding-top

                        padding-right

                        padding-bottom

                        padding-left

                简写属性

                        padding

                        语法:

                                padding:上 右 下 左

                                padding:上 左 右 下

                                padding:上下 左右

                                padding:上下左右

                边框

                        边框是盒子可见框的边界,除了边框就不再属于盒子的可见框

                        可见框的大小,由内容区,内边距,边框共同决定

                        边框样式:

                                border-width

                                border-上style

                                border-color

                                border

                                border-top

                                border-left

                                border-bottom

                                border-right

                外边距(margin)

                        外边距不会影响盒子可见框的大小,但是会影响到盒子的位置

                        外边距的四个方向:

                                margin-top

                                margin-right

                                margin-bottom

                                margin-left

                        简写属性

                                margin

                        特殊

                                margin可以设置为负值,或者auto

                                

 水平方向的布局

        子元素在父元素中,水平方向的值必须要满足如下的等式

                margin-left +border-left +padding-left +width +padding-right +border-right +margin-right =父元素

        如果不满足等式,默认情况下会自动调整设置为auto属性值,使满足等式,如果所有的值都不是auto,则调整右外边距以满足等式(只有三个值才可以设置为auto:margin-right,marginleft,width)

        如果将左右外边距同时设置为auto,宽度固定,则子元素会自动在父元素中水平居中