这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

重点内容

CSS概念
使用方式
选择器
选择器组合
权重、继承
布局

CSS

概念

CSS是用来定义页面元素的样式，包括设置字体大小，位置，动画等。

构成

选择器
属性值
声明

使用方式

外链
嵌入
内联

HTML如何使用CSS

加载html
解析html
加载css
解析css
创建dom树
展示页面

选择器

可以使用多种方式选择元素。

按照标签名、类名
按照属性
按照DOM树中的位置

大致可将选择器分为：通配选择器、标签选择器、ID选择器、类选择器、属性选择器、伪类选择器(状态型、结构型)。

选择器组合

直接组合AB
后代组合A B
亲子组合 A > B
兄弟选择器 A ~ B
相邻选择器 A + B
选择器组 A , B

颜色

RGBA：A是透明度
HSL：H是色相，S是饱和度，L是亮度

字体

一般需要设置多个字体，用作备选。一般先写英文字体再写中文字体。中文字体一般较大，需要进行裁切。

@font-face{
    font-family: "...";
    scr: url(...);
}
h1 {
    font-family: ...
}

通用字体族

衬线体
无衬线体
手写体
Fantasy
等宽字体

其他样式

font-size：字体大小
font-weight（大部分字体中文字体缺少字重）
line-height：行高
white-space

权重

越特殊，权重越高。

计算方式如下：

id
（伪）类
标签

!important 可以强制设置优先值最高。优先值最高的是层叠值。

继承

某些属性会自动继承其父元素的在计算值，除非显式指定一个值。

font-size
color

不可继承变可继承

* {
    box-sizing: inherit;
}

初始值

css中每个属性都有初始值，可以使用initial显式设置初始值。

布局

常规流
浮动
绝对定位

常规流

行级、块级、表格布局、FlexBox、Grid布局

盒模型

一个盒子就是一个容器，每个盒子都有margin、border、padding、width、height。

width取值可以为长度、百分数、auto。容器有确定高度，百分数才能生效，它是依赖关系。

margin collapse ：边距取大，不是简单叠加。

box-sizing:border-box：宽高是border外面的，真实的，符合直觉的。

行级/块级

块级元素：display:block

常见如body、div、main、section

行级元素：display:inline

常见如span、code

inline-block：本身是行级，可以设置宽高，作为一个整体不会被拆成多行。可以放在行盒子。

排版

IFC、BFC

当一个地方既有块级又有行级，浏览器会创建匿名标签包裹块级，使得所有都变成行级。

FLEX BOX

它可以控制子集盒子的摆放方向、顺序、宽高、对齐方式、是否折行。

对齐

会根据flex-direction改变

主轴对齐：justify-content
侧轴对齐：align-items

Flexibility

可以设置子项的弹性。

flex-grow：有剩余空间时的伸展能力。
flex-shrink：容器空间不足时收缩的能力。
flex-basis：没有伸展或收缩时的基础长度。

GRID

简单理解就是二维网格。基本上所有布局都能够通过grid、flex布局实现。

Float

可以设置文字图片环绕。

Position

默认值：static

relative：相对自身位置偏移，不脱离文档流。 absolute：绝对定位，相对非static祖先元素定位 fixed：相对于视口绝对定位

实践例子

input[type="radio"]{
    margin:1rem;
}

a[href^="#"]{
...
}

a[href$=".jpg"]{
...
}

课后总结

CSS其实内容非常多，特性非常杂。一般在编写CSS常常需要考虑不同浏览器的兼容性，不同浏览器，不同设备的显示效果都不一样。调试起来也是比较麻烦的。

参考

link.juejin.cn/?target=htt…

CSS | 青训营笔记