前端之CSS | 青训营笔记

Traverse725
103 阅读8分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
本篇笔记只是针对个人不太熟悉的概念进行整理，不代表所有的重点内容。

Cascading Style Sheets 层叠样式表

1、CSS的意义与作用

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

2、CSS的工作流程

image.png

3、属性选择器

选择具有特定属性的标签。如：
<input type="password"/>
<style>
 input[type="password"]{ color:red; }
</style>
其中，[]中的等号若为^='...'，则选中属性值以该字符串内容为开头的该标签；
若为$='...'，则选中属性值以该字符串结尾为结尾的该标签；

4、伪类（pseudo-classes）

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

  • 状态伪类

    • 如a元素的:link表示初始状态；:visited表示访问网站后的状态；:hover表示鼠标悬浮状态；:active表示被鼠标按下时(?)的状态。
    • 如input元素的:focus表示正在输入的状态。

  • 结构性伪类

    • 根据元素在DOM树中的相对位置选中元素。
    • 如li:first-child为父级下的第一个孩子标签(第一个li)，li:last-child为为父级下的最后一个孩子标签(最后一个li)。

5、组合

image.png  , 逗号表示选择器组，具有相同的属性的选择器可以用逗号隔开，然后把相同的属性写在一起（避免重复写代码）

6、字体

  • font-family可以跟多个字体，因为不同设备所拥有的字体类型可能不一样，所以从前往后依次尝试加载字体，直至找到设备中有的字体类型为止。
  • 先写英文字体，再写中英文都支持的字体，否则后者会覆盖前者（类似word）
  • CSS支持的五种通用字体族（一个族内含有多种风格相近的字体） image.png
  • 也可以使用Web Fonts中的字体，联网下载资源，但是会造成性能开销。中文字体包可能比较大，可以对其进行裁切，只选择页面中会展示到的文字，减少开销。

7、其他字体属性

  • font-size

    • 使用关键字设置：如small、medium、large
    • 长度：如px、em
    • 百分数：相对父元素字体的大小

  • font-style

    • normol为一般正常字体，italic为斜体

  • font-weight

    • 100-900，逐百递增，其中400对应normal，700对应bold
    • 某些字体可能没有设计这么多的weight，所以导致100和300可能没有什么区别
    • 效果预览
      image.png

  • line-height

    • 行高，可设置为1.6等数字（表示多少倍的字体高度）

  • white-space

    • 对是否允许换行、是否合并空格进行一些设置
    • normal、nowrap、pre、pre-wrap、pre-line

8、继承

  • 某些属性（一般是与字体相关的）会自动继承其父元素的计算值，除非显式指定一个值。
  • 某些属性（一般是与宽高大小相关的）不会自动继承，此时可手动显式继承：在子元素的待继承样式中设置inherit属性即可。

9、初始值

  • CSS中，每个属性都有一个初始值
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可用initial关键字显式重置为初始值
    • 如：background-color:initial

10、CSS求值过程

image.png image.png 最终的值为实际值，即渲染时实际生效的值。

11、布局（Layout）

  • 盒模型

    • content
    • padding
      • 指定元素四个方向的内边距
      • 百分数相对于容器content的宽度（就算是上下的padding参照的也是宽度）
      •  一值赋所有；   先上下，后左右； 上右下左（顺时针赋值） image.png
    • border
      • 3个属性：border-width、border-style、border-color
      • 4个方向：border-top、border-right。border-bottom、border-left
      • 当width为0且4个方向的color不同时，可得到以正方形对角线分割而成的四个三角形。如果把某个方向的color设置为transparent，则可以得到各种造型的三角形组合
    • margin
      • 指定元素4个方向的外边距
      • 取值可以是长度、百分数、auto
      • 百分数相对于容器的宽度
      • auto可以使元素水平居中（因为左边距和右边距相等，浏览器自动取平均值）
      • collapse：当相邻的不同盒模型都有margin时，会自动取较大的一个margin作为二者的间距，而不会让二者的margin相加。便于排版。

  • 相关属性

    • width、height
      • 用于指定content box宽/高度
      • 取值为长度、百分数、auto
      • auto由浏览器根据其他属性确定
      • 百分数为相对于父容器content box的宽/高度
      • 父容器有指定宽/高度时，百分数才生效
    • overflow
      • visible 超出盒子边界的内容会直接显示
      • scroll 超出盒子边界的内容会用滚动条显示
      • hidden 超出盒子边界的内容不予显示
      • auto 如果超出就scroll，如果没超就visible
    • display
      • block 块级盒子
      • inline 行级盒子
      • inline-block 本身是行级，可以放在行盒中；可以设置宽高；但自身内容作为一个整体，不能被拆分到多行中
      • none 完全被忽略
    • position
      • static 常规流布局的默认值
      • relative
        • 在常规流内布局
        • 相对自身原本的位置进行偏移
        • 使用top、left、bottom、right设置偏移长度
        • 流内其他元素当它没有偏移一样布局
      • absolute
        • 完全脱离常规文档流
        • 相对最近的非static祖先（reletive/absolute/fixed）元素定位，逐级向上找，若一直找不到，最终会相对html根元素进行定位
        • 不会对流内元素布局造成影响
      • fixed
        • 完全脱离常规文档流
        • 相对于视口绝对定位
      • sticky
    • box-sizing
      • 设置为border-box，则会将padding和border都纳入content
      • 此时真正的content要等于width减去padding和border的值

image.png

  • 常规流（Normal Flow）

    • 根元素、浮动和绝对定位的元素会脱离常规流，其他元素都在常规流之内（in-flow）
    • 行级盒子 Inline Level Box
      • 和其他行级盒子一起放在一行，或拆开成多行
      • 盒模型中的width、height属性不适用（因为宽高很多时候由内容的长短大小决定）
      • 由行级元素（标签）生成，行级元素的内容分散在多个行盒（line box）中。行级元素中可放span、em、strong、cite、code等标签
      • display设置为inline就是行级盒子
    • 块级盒子 Block Level Box
      • 不和其它盒子并列摆放（独占一列）
      • 所有的盒模型属性都能用
      • 由块级元素（标签）生成，块级元素中可放body、article、div、main、section、h1-6、p、ul、li等标签。
      • display设置为block就是块级盒子
    • 排版上下文
      常规流中的盒子，在某种排版上下文中参与布局
      • 行级排版上下文（Inline Formatting Context IFC）
        只包含行级盒子的容器会创建一个IFC，排版规则为：
        • 盒子在一行内水平摆放
        • 一行放不下时，换行展示
        • text-align   决定行内盒子的水平对齐
        • vertical-align 决定行内盒子的垂直对齐
        • 会避开浮动（float）的元素
      • 块级排版上下文（Block Formatting Context BFC）
        某些元素会创建一个BFC，如：
        • 根元素
        • 浮动、绝对定位
        • Flex子项和Grid子项
        • overflow的值不是visible的块级盒子
        • display:folw-root或inline-block;
          BFC的排版规则：
        • 盒子从上到下摆放
        • BFC内垂直margin合并（collapse）
        • BFC间的margin不会合并
        • BFC不会和浮动元素重叠
      • Flex排版上下文
        • 一种新的排版上下文，能够控制子级盒子的：
          摆放流向（→ ← ↑ ↓ 4种）；摆放顺序；盒子宽度和高度；
          水平和垂直方向的对齐；是否允许换行
        • display:flex 即可设置；默认从左往右排列盒子
        • 分为主轴（→）和侧轴（↓）
          • justify-content，控制主轴排版方式
            image.png
          • align-items，控制侧轴排版方式
            image.png
        • Flexibility
          可以设置子项的弹性。当容器有剩余空间时，会伸展；若容器空间不够时，会收缩。
          • flex-grow  有剩余空间时的伸展能力
          • flex-shrink 容器空间不足时的收缩能力
          • flex-basis  没有伸展或收缩时的基础长度
          • 伸展/收缩规则：容器总长减去所有基础长度后的剩余/不足，按照伸展/收缩能力的比例进行分配。
          • 各种简写形式及含义： image.png
      • Grid排版上下文
      flex是单一流向，grid是二维分布
      生成grid容器的流程：
      • display:grid使元素生成一个块级的grid容器
      • 使用grid-template相关属性（columns列，rows行）将容器划分为网格
      • 设置每一个子项占哪些行/列
      • 还可用网格线（grid line）来设置子项所占的网格区域（grid area）
      • Table排版上下文
  • 浮动
    主要用来实现文字环绕图片的效果，其余的已经可以被flex和grid取代。
  • 绝对定位
    position:absolute 绝对定位的父元素会为其子元素创造一个新的流
avatar
文章
阅读
粉丝