前端的初学日记（CSS篇）Day1附加篇-CSDN博客

本文链接：https://blog.csdn.net/Mothes/article/details/128563091

文章介绍了CSS中的样式继承原则，指出并非所有样式都能继承，并详细解释了选择器的权重计算规则。此外，还探讨了不同的长度单位，如像素、百分比、em和rem，以及颜色表示方法，包括RGB、十六进制和HSL。最后，文章提到了文档流和布局概念，区分了块元素和行内元素的特点。

摘要由CSDN通过智能技术生成

样式的继承

继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式，但是注意并不是所有的样式都会被继承，比如背景相关的，布局相关的，这些样式不会被继承。可以去css表中查找会不会继承（inherited——no就是不会继承）font-size能继承
例：

 <style>
   p{
   color:red;
   }
  </style>
</head>
<body>
<p>我是一个p元素
  <span>我是p里的span</span>
  </p>
</body>

选择器的权重

样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时发生了样式的冲突，发生冲突时，应用哪个样式由选择器的权重（优先级）决定。
内联样式：1,0,0,0 优先级
id选择器： 0,1,0,0
类和伪类选择器：0,0,1,0
元素选择器：0,0,0,1
通配选择器：0,0,0,0（*{}设置谁都会被覆盖）
继承的样式：没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先。分组选择器是单独计算的。
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器，跨越不了数量级。如果优先级计算相等则优先级用靠下的样式。
可以在某一个样式的后面添加 !important 则此时该样式会获取到最高的优先级，甚至超过内联样式
注意：在开发中慎用！（设置了改不了，改起来很麻烦，尽量别用）

单位

长度单位

长度单位：像素px
屏幕（显示器）实际上是有一个一个的小点点构成，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样。
百分比： % 百分比可以将属性值设置为相对于其父元素属性的百分比，设置百分比可以使子元素跟随父元素的改变而改变
格式如下：

 <style>
    .box1{
          width:200px;
          height:200px;
          background-color:orange;
   }
   .box2{
     width:50%;
     height:50%;
     background-color:#bfa;
   }
  </style>
</head>
<body>
<div class="box1">
  <div class="box2"></div>
</div>

em是相对于元素的字体大小来计算的（自身的）em会根据字体的大小的改变而改变。
1em=1font-size

<style>
.box3{
     width:10em;
     height:10em;
     background-color:greenyellow;
   }
  </style>
</head>
<body>
  <div class="box3">1</div>
  </body>

.box3{
     width:10em;
     height:10em;
     background-color:greenyellow;
     font-size:50px
   }

rem相对于根元素的字体大小来计算的

<style>
    html{
     font-size:3rem;
   }
  </style>
</head>
<body>
  <div class="box3">1</div>
</body>

颜色单位

在CSS中可以直接使用颜色名来设置各种颜色，比如：red、orange、yellow…
RGB值：RGB通过三种颜色的不同浓度来调配出不同的颜色（意义：R-red、G-green、B-blue）
每一种颜色的范围在0-255（0%-100%）可以下载faststoneCapture分析颜色数值
语法：RGB（红，绿，蓝）其中白色：（255,255,255）黑色（0,0,0）

<style>
   .box1{
     width:200px;
     height:200px;
     background-color:rgb(255,0,0);  
   }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>

需要四个值，前三个跟RGB一样第四个表示不透明，值：1表示完全不透明 0表示完全透明 .5表示半透明

十六进制的RGB值
语法：#红色绿色蓝色
颜色浓度通过调节00-ff （background-color:#ff0000）
如果颜色的两位重复可以进行简写 #aabbcc——#abc
HSL值：工业设计用的比较多，同样也有HSLA
H：色相（取值范围0-360）
S：饱和度颜色的浓度0%-100%
L：亮度颜色的亮度0%-100%
A：透明度

Layout布局

文档流：（normal flow）网页是一个多层结构，一层压一层，通过css可以为每一层设置样式，作为用户只看到最上层，这些层中最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。
对于我们来说，元素主要有两个状态：在文档流中/不在文档流中（脱离文档流）
元素在文档流中有什么特点：
块元素：块元素会在页面中独占一行（页面上自上向下垂直排列），默认宽度是父元素的全部（会把父元素撑满）默认元素是被内容撑开（子元素）
行内元素：行内元素不会独占一行，只占自身的大小，行内元素在页面中自左向右水平排列。如果一行之中不能容纳下所有的行内元素，则元素会换到第二行（与书写习惯一直）
行内元素的默认宽度和高度都是被内容撑开