css基础知识2

4.css三大特性

a.层叠行

是浏览器处理冲突的一个能力。如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 【也就是咱们常说的样式覆盖】

b.继承性

作用：子元素可以继承父元素的样式。 特殊性：

• 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。

• 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。

• a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。

• h标签的字体大小不能修改，必须对h标签本身进行修改。

c.css优先级

1.什么是优先级

优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 那个属性优先执行

2.怎么判断优先级

a、如果使用的是同类型的选择器，那么谁写在后面就听谁的。就近原则

b、如果使用的是不同类型的选择器，那么会按照选择器的优先级来层叠。

!important>行内样式【一半不适用】>id>class>标签>*>继承>浏览器默认属性

3.!important

a、!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 。

b、!important必须写在属性值后面分号前面，与属性值之间加上一个空格 。

c、!important前面的感叹号不能省略 。

4.优先级的权重计算

权重计算规则

（1）行内样式，如: style=””，权值为1，0，0，0。

（2）ID选择器，如：#content，权值为0，1，0，0。

（3）类，伪类和属性选择器，如.content E:link E[attr]，权值为0，0，1，0。

（4）元素选择器和伪元素选择器，如div p ::before，权值为0，0，0，1。

（5）通配符、子选择器、相邻选择器等的。如*、>、+,权值为0，0，0，0。

（6）继承的样式没有权值。!important的权重最高

元素的分类

a.块级元素

块级元素的特征:独自占据一行或者多行，可以设置宽度高度等属性，如果宽度不设置默认为父级元素的百分之百

常见的块级元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form>等

b.行内元素

行内元素的特征:不能独自占据一行,不能设置宽度和高度，只靠自身内容的大小来支撑元素

常见的行内元素:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

c.行内块级元素

行内块级元素的特征:不能独自占据一行,能设置宽度和高度

常见的行内块级元素:<img>、<input>

为什么学习元素的分类：因为项目中有需求【元素之间的相互转化 参照小米商城】

 

如何进行的转化：display

inline【把元素转化为行内元素（只能是块级元素来转）】/inline-block【把元素转化为行内块级元素(块级元素和行内元素都可以转化为我的行内块级元素)】【下列列表中的li转】/block【把元素转化为块级元素【行内元素和行内块级元素都可以转化为我的块级元素】】【想让图片或者其它元素实现换行或者占据高度宽度时】/none

背景设置

1.背景颜色（background-color）

设置背景颜色透明的语法格式
background-color:颜色;
background-color:transparent;

延申：颜色设置的方法【颜色的英语/16进制颜色/rgb(,,)/rgba(,,,透明度)】

2.背景图片（background-image）

background-image:url('图片的路径')

3.背景平铺（background-repeat）

background-repeat:repeat[默认]/repeat-x[沿着x轴平铺]/repeat-y[沿着y轴平铺]/no-repeat[不平铺]

4.背景位置（background-position）

background-position:
英文:a.一个left/right/top/bottom时，另外一个值默认居中 b.两个值时，会按照值得英文翻译排布
百分比:a.一个值时距离左边按照百分比【宽度的百分比】，距离上面是百分之五十b.两个值都有，第一个值代表距离左边的距离，第二代表距离上面的距离
像素值:a.一个值时距离左边的像素值，距离上面是百分之五十b.两个值都有，第一个值代表距离左边的像素值，第二代表距离上面的像素值

5.背景附着(background-attachment)

background-attachment:fixed

6.背景缩写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

7.背景缩放（background-size）

a.像素值或者百分比
b.cover【平铺满整个背景，溢出部分隐藏】
c.contain【按照背景图片全部显示出来的最大比例放大】

8.多背景

a.background-image后面需要跟两个及以上url
b.合理安排每个背景图片【后宫佳丽】

9.背景渐变

线性渐变background:linear-gradient(to 方向[可以不写，默认为从上到下],,,,...)
径向渐变background:radial-gradient(circl[可以不写，默认情况,颜色])