CSS了解与深入 ｜ 青训营笔记

DavidLiuNEU
196 阅读7分钟

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

了解CSS

CSS概念

cascading style sheet级联样式表

用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

基本写法

截屏2022-07-23 11.32.58

使用CSS的方法

  • 外链

    <link rel="stylesheet" href="/assets/stles.css">

    实际项目最推荐这种

  • 嵌入，写在style标签里

    <style>
    li { }
</style>

  • 内联

    直接在style属性里面写样式

CSS工作原理

截屏2022-07-23 11.37.48

选择器 Selector

找出页面中的元素，以便给他们设置样式

使用多种方式选择元素

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

通配选择器

*

<style>
    * {
        color: red;
    }
</style>

标签选择器

直接写标签名即可

id选择器

#

类选择器

.

属性选择器

[]方括号

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

伪类(pseudo-classes)

:

不基于标签和属性定位元素

几种伪类

  • 状态伪类

    1. link
    2. visited
    3. hover
    4. active
    5. focus
    <a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

  • 结构性伪类

    1. first-child
    2. last-child
    <ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

组合 (Combinators)

名称语法说明示例
直接组合AB满足A同时满足B（标签选择器写在前面）input:focus
后代组合A B选中B，如果它是A的子孙（可以隔多代）nav a
亲子组合A > B选中B，如果它是A的子元素（不可隔代）section > p
兄弟选择器A ~ B选中B，如果它在A后且和A同级（选中是弟弟，可以间隔）h2 ~ p
相邻选择器A + B选中B，如果它紧跟在A后面（不可间隔）h2 + p

选择器组

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}
 
[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

颜色

RGB

三原色

问题：特征无法与常用的关联起来

HSL

优点：更直观

alpha (不)透明度

font-family 字体

写在越靠前的优先级越高

最后一个写通用的字体族

使用建议

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面

font-size

line-height

white-space

截屏2022-07-23 12.18.46

调试CSS

  • 右键，选择”检查“
  • 使用快捷键
    • Ctrl+shift+I
    • cmd+opt+I

关于预处理器

less、sass

可以直接嵌套去写，嵌套的地方可以简化写法，但是麻烦在于需要编译，有开销

postcss预处理器

未来：layer分层css、shadow dom

calc工作场景用的很多

ssr用的挺多

next用多一些，不过公司内部有自研的ssr框架

深入CSS

选择器的特异度

决定优先级

一个元素可以属于多个类，在class里面通过空格间隔即可

如果发送冲突时，最终会展示特异度最高的

继承

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

可以（自动）继承

  1. 文字相关的，如：
    • color
    • font-size

不可（自动）继承的

  1. 和模型相关的，如：
    • 宽度
    • box-sizing

显式继承：可以通过显示继承的声明，使不可自动继承的属性可以被自动继承

初始值

CSS 中，每个属性都有一个初始值

  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0

可以使用 initial 关键字显式重置为初始值

  • background-color: initial

CSS求值过程

布局

布局是什么

img

  • 确定内容的大小和位置的算法

  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

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

CSS盒模型

box-model

width （内容的）宽度

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box 宽度

height（内容的）高度

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效（如容器高度是auto时，就不可生效了，因为这样就循环依赖了）

padding 内边距

指定元素四个方向的内边距

百分数相对于容器宽度

padding: 10px 四边内边距都是10px

padding: 10px 20px 先上下、后左右

border 边框

容器边框样式、粗细和颜色

border-style 样式：实线虚线

border-width粗细：宽度

border-color颜色：

可以四个边框颜色的边框和颜色都不一样：把width和height设置为0，可以生成多种形状的三角形

margin 外边距

要点

margin: auto会自动取中间值，那就会实现水平居中

margin collapse：如两个元素的上下间距会合并，取最大值（在垂直方向）

在做排版时带来一些方便

box-sizing: border-box

border-box

实际项目中，用border-box用的比较多

*{box-sizing: border-box}

Overflow

  • visible，直接显示溢出内容
  • hidden，隐藏溢出内容
  • scroll，超出会显示拉条可以上下滑动
  • auto，自动的，超出就滑动

块级 vs 行级

Block Level BoxInline Level Box
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用

行级的盒子有些属性不能适用，如：

  • 宽度、高度，因为行级的box的宽度和高度是由里面的内容决定的
块级元素行级元素
生成块级盒子- 生成行级盒子
- 内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1-6、p、ul、li 等span、em、strong、cite、code 等
display: blockdisplay: inline

em原子属性的块

可以通过display属性来改变他的块级或行级

display

block块级盒子
inline行级盒子
inline-block本身是行级，可以放在行盒中；可以设置宽高；
作为一个整体不会被拆散成多行，如img，本质是一个inline里面生成一个 block
none排版时完全被忽略

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文 IFC

  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素*

块级排版上下文 BFC

  • Block Formatting Context (BFC)
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

经常用于清除浮动的技巧：在图片外面包裹一个BFC则可以防止他浮动

都是块级则从上往下，如果都是行级则从左往右

匿名盒子

布局

Flex Box

用的最多，相对简单，大家比较熟悉

一种新的排版上下文

它可以控制子级盒子的：

  • 摆放的流向 ( → ← ↑ ↓ )（默认从左到右）flex-direction
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

主轴、侧轴

flex-direction

justify-content

img

Flexibility 弹性

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

flex-grow 有剩余空间时的伸展能力

flex-shrink 容器空间不足时收缩的能力

flex-basis 没有伸展或收缩时的基础长度

Grid

css布局中最强大的武器，基本上所有的布局都可以实现，彻底解决了布局问题

fr：fraction份数，宽度自动计算平分

float

文字会绕过图片

这个是在flex和grid之前使用的，现在基本上只有一个使用场景：就是图文混排

position

fix：比如说，导航栏永远固定在最上方（现在有一个新的类似的属性时sticky，如本来不在顶部滚动到顶部后就粘在那里固定了）

avatar
文章
阅读
粉丝