理解CSS | 青训营笔记

王腊肠
141 阅读4分钟

image.png

由于本节课知识点实在太多，全部归纳起来要花费很长时间，故选取了听课时最疑惑的点进行思考，希望能帮到有同样困惑的同学们~

层叠（Cascading）和层叠规则

层叠，顾名思义就是一层叠在一层上。如下图所示，它是一种用于解决冲突的规则。 image.png image.png
三大层叠规则还可以细分为若干个小的规则，也依次有优先级的递变关系。这些小的规则可以用一句话总结：作用到的对象越具体的，出现最晚的优先级更大。
三大注意事项

  • 选择器尽量少用id（降低代码可读性和可复用性）
  • 尽量不用!important（容易造成混乱）
  • 自定义样式加在引用库样式后面（如果两个或多个规则应用于同一个元素，并且具有相同的选择器权重，则最后出现的规则将覆盖前面的规则）

盒模型

实现三角形

image.png

相信有很多刚接触CSS的同学第一眼看到这段代码及其生成的图形时跟我一样是非常懵的，其实搞懂了border的原理这个困惑便会消散。

image.png CSS中的border上下左右部分的分割是如同上图红线标注的那样。此时再看老师上课的例子，content部分width和height均为零，相当于无content，那么此时border就是个正方形，而上下左右四个部分正好是这个正方形平均切成了四块。这时候摘掉左右两边的两块（上方的未定义），不就剩下了最下面的那块三角形了嘛！

举一反三

image.png

当CSS样式改为如上图所示，是不是很容易想出三角形绕顶点逆时针旋转90度了呢？

image.png

外边距重叠

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 详细介绍可看这位博主写的文章

边距重叠针对的是垂直方向的，水平方向不会出现边距重叠的问题！

看一个例子：
html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <div>
        <div class="wlc3"></div>
        <div class="wlc2"></div>
        <div class="wlc1"></div>
    </div>
</body>

</html>

CSS代码：

.wlc3 {
    width: 100px;
    height: 100px;
    margin-bottom: 60px;
    background: teal;
}

.wlc2 {
    width: 100px;
    height: 100px;
    margin-top: 60px;
    background: goldenrod;
}

.wlc1 {
    width: 100px;
    height: 100px;
    margin: 0;
    background: burlywood;
}

最终呈现的效果：

image.png

按F12检查后发现绿色和金黄色两者之间的边距并不是60px+60px，而是取了两者最大值，也就是60px。

内联级格式化上下文(IFC)

vertical-align 属性设置元素的垂直对齐方式。css中的vertical-align 属性只能用于 行内元素 和 置换元素（例如 图像和表单输入框）,此属性不继承。详见请看：css之 vertical-align用法详解

移动端的viewport

这个问题把我绕了半天才懂...... 首先我们要了解DPR的概念：

image.png

如果网页设计中用的px均为设备px，那会造成不同设备的观看效果相差很大的后果。比如在PC上看起来很小的图案到了手机上可能变得很大。因此，采用的都是css px。

image.png

image.png

viewport通俗的说就是一个放大镜，网页就相当于报纸，我们可以控制viewport的宽度和放缩比例来看网页。scale相当于放大镜放缩比例，而width相当于放大镜的宽度。
而关于常见的移动端viewport的设置，上图已经说明非常清晰，下面对第一种情况不好之处进行补充解释：

保持scale为1的缺点：如果设备的dpr（设备像素比）大于1，例如2或3，那么一个CSS像素将会映射到多个设备像素上，导致绘制的线条在设备上显示的不够精细。假设在一个DPR为2的Retina屏幕上，我们使用1个CSS像素宽度来绘制一个横向边框。由于1个CSS像素将被映射为4个物理像素，浏览器将会绘制4个物理像素宽度的线条，其中2个物理像素是黑色的，另外2个物理像素是透明的。这样，边框线条看起来会比较模糊或者失真，因为我们的眼睛会同时看到黑色和透明的像素。

avatar
文章
阅读
粉丝