【JavaWeb学习】CSS (其他)

继承

继承发生在祖先和后代之间，为一个元素设置的样式同时也会应用到它的后代元素上，因此可以将通用样式设置在祖先元素上。
背景相关、布局相关等样式不会被继承。

选择器的权重

通过不同选择器选中了相同的元素并且为同一个样式设置了不同的值时，发生样式冲突。
内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承来的样式
比较优先级时，将所有选择器的优先级相加 ( 分组选择器单独计算 )。
在某一个样式后添加 !important ，可以将它提到最高的优先级。

p{
	color: red !important;
}

长度单位

像素

前端开发中像素要分两种情况讨论：CSS像素和物理像素。编写网页时所用的都是CSS像素，浏览器在显示网页时将CSS像素转换为物理像素后进行呈现。一个CSS像素最终由多少个物理像素显示是由浏览器决定的。默认情况下，在PC端，一个CSS像素 = 一个物理像素。
视口 viewport是屏幕中用来显示网页的区域。可以通过查看视口的大小来观察并计算CSS像素和物理像素的比值。
放大或缩小网页时视口宽度改变，物理宽度不变 ，因此可以通过改变视口大小来改变CSS像素和物理像素的比值。
不同的屏幕中单位像素的大小是不同的，像素越小屏幕越清晰。
默认情况下，移动端的网页都会将视口设置为 980 CSS像素，以确保PC端的网页可以完整显示。
但如果网页的宽度超过了980，移动端的浏览器会自动对网页进行缩放，以显示完整。
所以基本大部分网页都可以在移动端正常浏览，但往往体验极差。
为了解决这个问题，大部分网站都会为移动端专门设计网页。

百分比

可以将属性值设置为相对于父元素属性值的百分比。

em

相对于字体的大小计算，会随着字体大小的改变而改变；
1em = 1font-size

rem

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

颜色单位

RGB： 通过调整三种颜色的浓度来调色，值在0~255之间

background-color: rgb(100, 255, 150);
background-color: #9CDCFE;

RGBA： 在RGB的基础上加了不透明度

background-color: rgba(100, 255, 150, .7);
/* 1 完全不透明； 0 完全透明 */

HSL： 色相( 0 ~ 360 )、饱和度( 0 ~ 100% )和亮度( 0 ~ 100% )

background-color: hsl(202, 71%, 67%);

HSLA： 在HSL的基础上加了不透明度

background-color: hsla(202, 71%, 67%, .7);

文档流

网页是一个多层的结构，一层叠着一层，通过CSS可以分别为每一层创建样式，用户只能看到最上面的一层。
这些层中，最下面的一层称为文档流，是网页的基础，我们创建的元素默认在文档流中排列。
元素的两个状态：
在文档流中
不在文档流中（脱离文档流）
元素在文档流中的特点：

• 块元素
  在页面中独占一行
  默认宽度是父元素的全部
  默认高度是全部子元素的高度
• 行内元素
  不会独占一行，只占自身的大小
  在页面中自左向右水平排列，如果一行之中不能容纳所有的行内元素，则元素会自动换行
  默认高度和宽度都被内容撑开

浏览器的默认样式

通常情况下，浏览器会为元素设置一些默认样式，默认样式的存在会影响页面的布局，因此通常编写网页时要去除浏览器的默认样式（PC端要去除，移动端通常默认样式是一样的，不用管）。
可以从浏览器的开发者模式里找到要去除的样式，然后改它的代码。

由于默认样式中需要去除的一般都是 margin 和 padding，因此常用 *{} 来进行去除。

*{
    margin: 0px;
    padding: 0px;
}

或者导入已经准备好的重置样式表：reset.css 去除浏览器的默认样式，normalize.css 对默认样式进行了统一。