CSS学习笔记 3.继承.选择器权重.像素.百分比

一、继承
样式的继承：我们为一个元素设置的样式也会继承到他的后代元素上
继承是发生在祖先和后代之间的
利用继承更方便开发，将通用的样式统一设置在共同的的祖先元素上，这样只需设置一次可让所以的元素都具有该样式

<div>//是p的父亲元素
我是一个div
<p>//
我是div中的p元素
<span>我是p元素中的span</span>//div是它的祖先元素  p是它的父亲元素
</p>
<span>我是div中的span元素</span>//是p的兄弟元素
</div>

div{
color:red;/*指给div设置了样式  但是它的后代元素都会继承该样式*/
}

并不是所以的样式都会被继承 比如：与背景相关的 与布局相关的

div{
background-color:red;/*背景颜色是红色   这个就不会被后代元素继承*/
}

二、选择器的权重
样式的冲突：当我们通过不同的选择器，选中相同的样式，并为相同的样式设定不同的值的时候，这就发生了样式的冲突。
当发生了样式的冲突的时候，应用哪个样式，由选择器的权重决定（选择器的优先级）。

p{
color:red;
}
.balabala{
color:green;
}

<p class="balabala"> 这里会发生样式的冲突 </p>  

此时会发生冲突 但表现颜色为绿色 说明类选择器优先级高于标签选择器（元素选择器）

选择器的优先级
1内联样式
2id选择器
3类和伪类选择器
4元素选择器（标签选择器）
5通配选择器
6继承的样式 （直接没有优先级）

比较选择器时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示。（有复和选择器的时候 ）
如果优先级计算相同，则优先考虑靠下的样式。

可以再某一个样式的后面添加!important 这样该样式就会获得一个最高的优先级，甚至超过内联样式。
注意： 在开发中使用 ！important一定要慎用 因为很难再修改该样式，修改该样式会非常的麻烦（一般情况下不用）

p#lol{
color:red!important;/*表示既是p标签id又是lol的语句  它的样式是红色且优先级最高*/
}

三、像素和百分比
长度单位：像素
屏幕（显示器）实际上是由一个个小点点构成的，
不同的屏幕像素大小是不同的，像素越小，显示的效果越清晰，
故如果是200px在不同的设备上显示的效果都会不一样。

.box1{
width:50px;/*宽度   box1表示是用于向方框添加一个或多个阴影，并设置阴影位置、尺寸、颜色等。*/
height:50px;/*长度（高度）*/
background-color:red;/*背景颜色是红色*/
}

<p class="box1">  </p>

百分比
可以将元素设置为相对于其相对于父元素的百分比（此处父元素说法并不严谨，方便理解）
语法

.box2{
width:50%;/*表示box2的宽度是其父元素的百分之五十*/
height:50%;
background-color:red;
}

设置百分比可以跟随父元素的改变而改变