和大家一起分享一下css的基础知识

1:选择器: 

1:标签选择器:标签名{css属性名:属性值;}

标签选择器选择的是该标签名所有标签,而不是单独某一个标签选择器无论嵌套关系有多深,都能找到对应的标签.

 2:类选择器:标签名{css:属性:值;}

◆:谁调用谁生效,不调用,不生效.  ◆:一对多,一个类选择器可以被多个标签同时调用 , ◆:多对一 ,多个类选择器可以作用到同一个标签上' '

类选择器的命名规范:不能使用纯数字或英文,不推荐使用纯英文 , 不能使用特殊符号 , _和-作为连接符使用. 

 3:id选择器:ID属性值{css属性名:属性值;}

 具有唯一性 ,谁调用,谁生效 . 一个标签只能使用一次id选择器 , 一个标签可以同时调用类选择器和ID选择器.

◆:所有标签上都有ID属性 ,id属性值类似与身份证号码 ,在一个页面是唯一的 ,不可重复的! 一个标签上只能有一个ID属性;一个ID选择器只能选中一个标签 .

 4:配符选择器:

*代表所有 ,选择页面的标签设置相同的样式,  不用调用. 开发中使用极少 ,只会在特殊情况下才会用到,常用于去除标签默认的margin和padding

 5:字体

 6:背景:分为背景颜色 , 背景图片 ,平铺与位置 ,background连写

 7:文本修饰:text-decoration 

 

8: 后代选择器:

后代选择器 ,是为了选择父元素里面的子元素 ◆:父元素在前 , 子元素在后 ,用空格连在一起 ,◆:只要能代表 父元素子元素 ,可以是任意选择器等的组合 .

 9:子代选择器:

选择父元素 的直接下一级(亲儿子)  父元素在前 , 亲儿子在后 ,用>号连在一起

 10:[◆并集选择器:多个选择器通过逗号连在一起 ,设置相同的样式 ,注意:并集选择器 最后一个不严加逗号.]  [◆:交集选择器: 标签 + 类 (ID) 选择器 满足2个条件 , 同时调用了后边的类(ID) 选择器]  [◆:hover 伪类选择器  鼠标悬停到标签上的状态]

11:元素的显示模式:

[◆:块元素 ;div p h1-h6 ui ol dl dt dd form header nav artice footer  独占一行, 块元素不设置宽度的时候 默认父元素的宽度 ,不设置高度的时候 ,默认高度为0 , 内容撑开高度 ,可以设置宽高] 

[◆:行内元素: a, span , strong  ,  b  ,em  ,i  ,deel , s i , ins , u  ,一行可以显示多个, 内容撑开宽高 , 代码换行生成缝隙 , 行内元素不能设置宽高]

[◆:行内块元素: img , input , textarea , button , select , 一行可以设置多个  可以设置宽高,代码换行自动生成缝隙 ]

 12:圆角边框: 让四个盒子变得圆润 ,增加页面细节, 提升用户观感体验, [属性名: border-radius] 常见取值: 数值 + px ,百分比

取值规划:从左上角开始赋值 ,然后顺时针赋值, 没有赋值的看对角 ! [border-radius:左上角 , 右上角 , 右下角 , 左下角]以左上角起顺时针的方向 .

 13:文字阴影:阴影可以增加设置 , 每组阴影取值之间以逗号隔开 , 属性名:box-shadow

 

14:盒子阴影: 属性名:text-shadow 

 15:定位:设置偏移值, 分为两个方向 ,水平和垂直方向一个使用即可 ,选取的原侧一半就近原则,

静态定位:默认值,就是之前认识的标准流, 不能通过方位属性进行移动, 之后说的定位不包括静态定位, 一般指 :相对,绝对,固定.

相对定位:自恋性定位,相对于自己之前的位置进行移动, 特点:需要配合方位属性实现移动,默认相对于浏览器可视取域进行移动 在页面中不占位置,

绝对定位:拼爹型定位,相对于静态定位的父元素进行定位移动 , 需要配合全方位属性实现移动,

默认相对于浏览器可视区域进行移动,

在页面中不占位置→已经脱标

16:清除浮动的方法:

1:直接给父元素高度 , 优点:简单粗暴 ,方便 , 缺点:有些布局中不能固定父元素高度,

 

 

2:额外标签法:在浮动的对象的父元素里面最后添加一个块元素  给添加的块级元素设置clear.botth

 

 

3:单伪元素类似于额外标签法 ,用css创建一个为标签,用伪元素替代额外标签法

 

4:双伪元素: 优点：项目中使用，直接给标签加类即可清除浮动

 

5:给父元素设置overflow:hidden:直接给父元素设置 overflow : hidden    优点：方便

 

6:扩展:——直接给受影响的盒子设置clear:both;

    

17:css特性:

1:继承性:

◆:特性：子元素有默认继承父元素样式的特点(仅限文本类的属性)
控制文字的属性都能继承,不是控制文字的都不能继承   

◆:可以继承的常见属性(文字控制属性都可以继承) 

◆:相同的选择器才会有层叠性

2:层叠性:

◆:给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效样式(样式冲突—则会覆盖)

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上(样式不冲突—则叠加) 

 ◆:注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3:优先级:

 4:权重叠加计算: