02 前端技术栈 - CSS | 青训营笔记

worldNebula
38 阅读7分钟

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

  1. 走进前端技术栈 - CSS
  • CSS 代码构成
  • CSS 使用方法
  • CSS 流程之选择器组、文本渲染
  • 调试 CSS
  1. 深入CSS （上）
  • CSS 选择器的特异度
  • CSS 继承
  • CSS 求值过程解析
  • CSS 布局方式及相关技术
  1. 深入CSS （下）
  • CSS 盒模型 - 行级
  • CSS 盒模型 - 块级

走进前端技术栈 - CSS

CSS是什么？

Cascading Style Sheets 用来定义页面元素的样式 设置字体和颜色 设置位置和大小 添加动画效果

image.png

在页面中使用CSS
外链、嵌入、内联 image.png image.png

CSS 是如何工作的 image.png

选择器Selector

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照 DOM树中的位置

通配选择器 image.png

标签选择器 image.png

id 选择器 image.png

类选择器 image.png

属性选择器 image.png

标签选择器与属性选择器的结合 - 具体属性值 image.png

标签选择器与属性选择器的结合 - 通配的属性值

  • href^="#" 属性值以'#'开头的将被匹配上
  • href=".jpg"属性值以′=".jpg" 属性值以''结尾的将被匹配上 image.png

伪类(pseudo-classes)

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类
    • 结构性伪类 image.png image.png

标签选择器与类选择器的组合 image.png

选择器的组合 （Combinators） image.png image.png

选择器组 image.png

颜色 - RGB
cdpn.io/webzhao/deb… image.png image.png

颜色 - HSL
更符合人对颜色的阅读习惯
cdpn.io/webzhao/deb… image.png image.png

内置颜色名字
cdpn.io/webzhao/deb… image.png

alpha 透明度
新版本的一般写rgb(0,0,0,1),老版本可能还要写全rgba()再传四个参数 cdpn.io/webzhao/deb… image.png

通用字体族
cdpn.io/webzhao/deb… image.png

font-family 使用建议

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面
  • serif与sans-serif不是某个具体字体，而是通用字体族，即某种风格（见上图）
  • 等宽字体常在编程时用到

若要严格使用某字体可用 web font

  • 但是会有一些系统上性能的开销
  • 对于中文字体也可以用web font，但是中文字体文件一般都比较大，应该用一些工具对字体文件进行裁剪，用的留下，不用的丢掉 image.png image.png

font-size

  • 关键字: small、 medium、large
  • 长度: px、em
  • 百分数: 相对于父元素字体大小 image.png

font-style：normal、italic image.png

font-weight 字重

  • 在CSS里面用100-900的数字表示其大小
  • 并不是所有字体都有这么多字重，看其被设计了多了种 image.png

line-height image.png image.png

font 属性写一块 image.png

text-align
cdpn.io/webzhao/deb… image.png

spacing
cdpn.io/webzhao/deb… image.png

text-indent
cdpn.io/webzhao/deb… image.png

text-decoration
cdpn.io/webzhao/deb… image.png

white-space
cdpn.io/webzhao/deb… image.png image.png

调试CSS

  • 右键点击页面，选择「检查」
  • 使用快捷键
    • ctrl+Shift+I( windows )
    • Cmd+Opt+I (Mac)

深入CSS （上）

image.png

选择器的特异度（Specificity） image.png image.png

继承: 某些属性会自动继承其父元素的计算值，除非显式指定一个值
在CSS中和文字相关的属性都可继承，和盒模型相关的一些属性不能继承 image.png

显示继承：将不可继承的变成可继承的
先令所有都inherit从父继承，再根据需要设置具体的属性值 image.png

初始值: 当往上找也没有对应值是就会自动使用初始值，也可手动用initial
image.png

CSS 求值过程
cdpn.io/webzhao/deb… image.png

在继承时，往上继承的是计算值而不是使用值 image.png

布局（Layout）

image.png

布局相关技术：常规流、浮动、绝对定位 image.png

盒子模型 - content-box
（若不设置box-sizing属性默认就是 content-box 的盒模式）
width、height的计算方式都是按照容器本身的font-size进行计算的，只是width、height实际所指要根据不同的盒模式改变，见下文
image.png

content-box 下的盒模型，width、height，及计算方法
（若不设置box-sizing属性默认就是 content-box 的盒模式）

content box 的 width、height

widthheight(注意最后一条，若容器高度设置为auto, content box设置为百分数, 则他们相互形成了依赖关系，auto根据content来设置大小，百分数又根据容器设置大小，这就冲突了)
image.pngimage.png

内边距 - padding

  • 一个数：四条边
  • 两个数：上下、左右
  • 四个数：顺时针（上右下左） image.png

border: 指定容器边框样式、粗细和颜色
cdpn.io/webzhao/deb… image.png image.png

当四条边框颜色不同时
CSS技巧：若margin、padding、content的width、height, 而只保留border则可得到四个三角形，若将其他设置为透明则得到一个三角形
cdpn.io/webzhao/deb… image.png

margin - 外边距
image.png

使用margin:auto水平居中 image.png

margin collapse
只看代码分析两个div相距是否是200px? 否，为100px
原因：margin在垂直方向上有一个边距重叠/合并，即collapse，取两者最大的边距，而不是简单的相加
有利：文字排版，如段落之间、标题与段落只取决于最大，而不是相加；
不利：由于在同一个BFC会合并，解决办法就是再创建一个BFC放于这个两个BFC，就不会再有合并
演示地址(需左击下预览窗口才会显示) codepen.io/webzhao/emb… image.png

border-box 下的盒模型，width、height，及计算方法（包含padding在内）
（更符合直觉）
里面的content只能是宽高减去border再减去padding之后的计算结果
image.png

box-sizing: border-box
注意：无论什么盒子模式，width、height的计算方式都是按照容器本身的font-size进行计算的
默认是content-box, 所以width:100%后实际的盒子被撑大，已经超出自觉的100%
codepen.io/webzhao/emb… image.png

overflaw - 控制文字溢出容器本身大小后的那部分怎样去展示
cdpn.io/webzhao/deb… image.png

深入CSS （下）

块级 vs. 行级 image.png

盒子是css里面的概念，块级盒子，行级盒子
元素是html里面的概念 image.png

display 属性
注意理解 inline-block属性值，可理解为在inline里面放了一个block，再用inline-block来呈现
image.png

常规流 Normal Flow
image.png

行级排版上下文(IFC)
实例：codepen.io/webzhao/emb…
'Honorificabilitudinitatibus'是一个原子，虽然超出了容器范围，但是默认不能再拆分换行了, 可以通过overflow-wrap来处理
image.png image.png

块级排版上下文(BFC)
image.png

BFC内的排版规则
由于在同一个BFC里面margin会合并，解决办法就是再创建一个BFC放于这个两个BFC，分属两个不同的BFC, margin就不会再有合并
实例：codepen.io/webzhao/emb…

在常规流里面，一个盒子内，只能都是块级或都是行级。

  • 若都是块级，从上往下摆放就OK；
  • 若都是行级，就从左到右一个行盒一个行盒去摆放就ok；
  • 若一个盒子里面，比如div里面既有块级和行级的盒子，在实例里面浏览器会将行级的两段文字用匿名的盒子包起来(在html/css看不到，在css的排版引擎里面能够观察到)，然后再排版。

在实例中，还有要注意的是第一个border里面只有右边border没有，因为被拆成两行了，最后那段文字就是最左边的border没有。
image.png image.png

Flex Box - 一种新的排版上下文
codepen.io/webzhao/emb… image.png image.png

flecx-direction image.png

flex概念 - 主轴与侧轴 image.png

justify-content image.png

align-items
默认值：stretch
baseline: 对子元素进行基线的对齐，图为选择文字进行baseline设置
注意：align-items 是对容器进行设置的。
image.png

align-self
如图，在对容器设置一个属性值后，容器里面的元素可以另外设置一个属性值，如容器为flex-start，容器某一元素为flex-end
image.png

order
image.png

flexibility image.png

flex-grow
A和B的按照容器减去未压缩的c的剩余width的2/3,1/3进行分配width，同时A和B的width并不是2倍的关系，只是按照剩余空间进行比例划分的
image.png

flex-shrink
a的flex-shrink设置的是0，为刚性，即压不动 image.png

flex属性值写一块 image.png

Grid 布局 image.png

display: grid image.png

划分网络 演示地址：cdpn.io/webzhao/deb…
单位 'fr': fraction, 1fr表示一份, 2fr表示两份 image.png

grid line 网格线 - 通过指定网格线将元素放进格子里面
image.png

grid area 网络区域
演示地址：cdpn.io/webzhao/deb… image.png image.png

float 浮动定位
现在一般用于文字图片这种浮动对齐，其余交给flex或grid布局来完成
演示地址：codepen.io/webzhao/emb… image.png image.png

绝对定位 image.png

position: relative image.png

position: absolute image.png

position: absolute 演示地址：codepen.io/webzhao/emb…
image.png

position: fixed 的用法
与absolute进行区别，absolute是找最近的非static祖先进行定位
fixed是相对于窗口(view point)进行定位, 用于固定元素
首页 导航 返回顶部 这些元素固定在页面的位置
演示地址: codepen.io/webzhao/emb…

学习CSS的几点建议

  • 充分利用 MDN 和 w3C CSS 规范
  • 保持好奇心，善用览器的开发者工具
  • 持续学习，CSS新特性还在不断出现
avatar
文章
阅读
粉丝