理解CSS笔记 | 青训营笔记

xBeho1der
98 阅读5分钟

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

了解CSS

CSS是什么

Cascading Style Sheets 用于定义页面元素的样式

页面中使用CSS方法

  • 外链（实现内容与样式代码的分离）
  • 嵌入（实现组件式的开发）
  • 内联（不需要写选择器，给确定的当前元素写样式，较不推荐）
<style>

h1{

color: green;

font-size: 24px;

}

p{

color: cornflowerblue;

font-size: 14px;

line-height: 1.8;

}

</style>

CSS工作原理

  • 加载HTML->解析HTML->加载CSS->解析CSS->创建DOM树->展示页面

CSS的元素

选择器Selector

  • 通配选择器*
  • 标签选择器
  • ID选择器（id唯一）
  • 类选择器（类型名可以多次出现）
  • 属性选择器（可以加入约束条件）
  • 伪类选择器（当前所处的，常用的有状态性和结构性两类，状态性表示需要处于某种特定状态如链接是否访问过、输入框是否focus等，结构性表示处于DOM树中某个特定位置）

组合Combinators

  • 直接组合 AB 同时满足
  • 后代组合 A B 选中B如果是A的子孙
  • 亲子组合 A>B 选中B如果是A的子元素
  • 兄弟选择器 A~B 选中B如果再A后且和A同级
  • 相邻选择器 A+B 选中B如果它紧跟在A后面
代码示例

选择器组：用“,”把选择器分隔开

颜色

RGB

  • rgb(num-r,num-g,num-b)
  • #rrggbb 用16进制（00～ff）表示rgb

HSL

  • Hue色相0-360
  • Saturation饱和度0-100% 越高越鲜艳
  • Lightness亮度0-100% 越高颜色越亮

指定特定颜色

透明度alpha 0~1(实际上是不透明度)

#rrggbblf
rgba( , , ,alpha)
hsla( , , ,alpha)

字体font

通用字体族：

在设定font- family时在最后添加一个通用字体族(default)
英文字体写在中文字体前面
  • Serif
  • Sans-Serif
  • Cursive
  • Fantasy
  • Monospace

使用Web-Fonts

  • 指定字体名字和URL，浏览器下载之后进行渲染，性能会相对下降
  • 中文字体时可以进行裁切

font-size

  • 关键字 small、midium、large
  • 长度 px、em相对大小
  • 百分数

其他属性

  • font-style
  • font-weight 100-900 normal-400 bold-700 需要字体本身支持多种字重
  • line-height 默认line-height不适合阅读 使用无单位数字即为字体大小的倍数
  • letter-spacing
  • word-spacing
  • 默认情况下多个连续的空格和换行会被视为一个，可通过white-space设置

调试CSS时使用检查

深入CSS

继承、布局相关话题

特异度Specificity

  • 优先级由特异度决定，特异度越高越优先(id、(伪)类、标签)
  • 可以先写基础样式，特殊样式可以通过覆盖实现

继承

  • CSS中某些属性继承父元素计算值
  • 宽度一般无法继承
  • color、font-size一般可以继承

显式继承

  • 通过通配选择器选定标签后设定标签的属性为 inherit

初始值

  • 当一个元素为不可继承&未设定属性时会默认设定为初始值，也可以通过initial关键字设定

CSS求值过程

  • fittering->声明值
  • cascading->层叠值
  • defaulting->指定值
  • resolving->计算值 浏览器不进行实际布局的情况下能得到的最具体的值
  • formatting->使用值 进行实际布局时使用的值，不会有相对值或关键字
  • constraining->实际值

布局Layout

  • 常规流(行级、块级、表格布局、FlexBox、Grid布局)
  • 浮动
  • 绝对定位

盒模型

width、height

  • 指定content box宽(高)度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其他属性确定
  • 百分数相对于容器的content box宽(高)度
  • 容器有指定的高度时，百分数才生效

padding

  • 指定元素四个方向的那边句
  • 百分数相对于容器宽度
  • 设定四个值为上开始顺时针、两个值为上下和左右

border

  • 样式、粗细和颜色
  • 四个方向 border-top/right/bottom/left
  • 三个属性 border-width/style/color

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • margin:auto 水平居中
  • margin collapse 垂直方向上会合并，取较大的边距值

box-sizing可以对border-box设置，实际项目border-box使用更多

可以通过overflow设置超出盒子的文本显示方式，scroll/auto/hidden

块级 vs. 行级

块级

  • 不和其他盒子并排摆放
  • 适用所有的盒模型属性
  • 生成块级盒子
  • display:block

Block Formatting Context

  • 某些容器会创建一个BFC
  • 相关排版规则

行级

  • 和其他行级盒子一起放在一行或拆开成多行
  • 盒模型中的width、height不适用
  • 生成行级盒子，内容分散在多个line box中
  • display:inline

Inline Formatting Context

  • 只包含行级盒子的容器会创建一个IFC
  • 相关排版规则
display属性
block、inline、inline-block本身是行级，但是可以设置宽高、none

Flex Box

  • 新的排版上下文，子元素受flex相关属性控制，而不是IFC BFC
  • 可以控制子级盒子的多种属性
  • flexibility可以设置子项的弹性，flex-grow/shrink/basis

可使用justify-content控制主轴方向对齐,可使用align-items控制侧轴方向对齐

Grid布局

  • display:grid使元素生成一个块级的Grid容器
  • 使用grid-template-columns/rows相关属性将容器划分为网格
  • 设定占据哪些行和列grid-roe/column-start/end或grid-area

float浮动

  • 实现图片环绕文字的特性

position属性

  • static 默认值
  • relative 相对原本位置偏移，流内其他元素当他没有偏移一样布局
  • absolute 绝对定位
  • fixed 相对于视口view 绝对定位

学习CSS的建议

  • 充分利用MDN和W3C CSS规范

PS：本笔记为本人课程过程中的记录与部分思考，仅供参考，欢迎友好交流。

avatar
文章
阅读
粉丝