理解CSS | 青训营笔记

用户9608586346079
200 阅读5分钟

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

一、走进前端技术栈-CSS

1. CSS 是什么？

  1. Cascading Style Sheets

  2. 用来定义页面元素的样式

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

例如：这是一段CSS代码

h1{
    color:white;
    font-size: 14px;
}

它由几个部分组成：

  • 选择器（Selector）
  • 属性（property）
  • 属性值（value）
  • 声明（declaration）

2. 在页面中使用CSS

在页面中使用css可以有三种方法：外链（推荐）、嵌入、内联（不推荐）。

3.CSS是如何工作的？

image-20230116102006687.png

4.选择器（Selector）

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

  • 使用多种方式选择元素

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

5.伪类(pseudo-classes)

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

  • 几种伪类

    • 状态伪类
    • 结构性伪类

6.组合(Combinators)

名称语法说明示例
直接组合AB满足A同时满足Binput : 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

7.其他属性

color（颜色）、font - family（字体）、font - size（字体大小）、 line - height（行高）

二、深入CSS（上）

1.选择器的特异度(Specificity)

id（伪）类标签
#nav .list li a:link122
.hd ul.links a022

2.继承

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

  • 一般来说，与文字相关的属性是可以继承的
  • 一般来说，与盒模型相关的属性是不可以继承的

显式继承 ：inherit

3.初始值

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

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

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

    • background-color:initial

4.CSS求值过程

image-20230116104324068.png

image-20230116104537943.png

5.布局（Layout）是什么？

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点积内容等信息来计算

6.宽度与高度

height

指定content box高度。

取值为长度、百分数、auto

auto取值由内容计算得来

百分数相对于容器的content box高度

容器有指定的高度时，百分数才生效

width

指定content box宽度

取值为长度、百分数、auto

auto由浏览器根据其它属性确定

百分数相对于容器的content box宽度

7.padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

image-20230116105151144.png

8.border

三种属性： border--width、border-style、border-color

四个方向： border-top、border-right、border-bottom、border-left

9.margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

10.overflow

visible：正常状态显示，溢出依旧显示

hidden : 溢出后隐藏

scroll：溢出后滚动

三、深入CSS（下）

1.行级与块级

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

2.display属性

block： 块级盒子

inline： 行级盒子

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

none： 排版时完全被忽略

3.常规流Normal Flow

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

image-20230116110317891.png

4.行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动((float)元素

5.块级排版上下文

  • Block Formatting Context(BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display:flow-root;

BFC内的排版规则

  1. 盒子从上到下摆放
  2. 垂直margin合并
  3. BFC内盒子的margin不会与外面的合并
  4. BF℃不会和浮动元素重叠

6.Flex Box是什么？

  • 一种新的排版上下文

  • 它可以控制子级盒子的：摆放的流向（→←↑↓）

    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

image-20230116110956496.png

image-20230116111007546.png

7.Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
  • flex-grow有剩余空间时的伸展能力
  • flex-shrink容器空间不足时收缩的能力
  • flex-basis没有伸展或收缩时的基础长度

8.flex

flex:1flex-grow:1
flex:100pxflex-basis:100px
flex:2 1flex-grow:2;flex-shrink:1
flex:1 100pxflex-grow:1;flex-basis:100px
flex:2 0 100pxflex-grow:2;flex-shrink:0;flex-basis:100px
flex:autoflex:1 1 auto
flex:noneflex:0 0 auto

9.display:grid

  • display:grid使元素生成一个块级的Grid容器
  • 使用grid-template相关属性将容器划分为网格
  • 设置每一个子项占哪些行列

10.float

position属性
static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对非static祖先元素定位
fixed相对于视口绝对定位

relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top、left、bottom、right设置偏移长度
  • 流内其它元素当它没有偏移一样布局

absolute

  • 脱离常规流
  • 相对于最近的非static祖先定位
  • 不会对流内元素布局造成影响

四、总结

  1. 充分利用好网络上的一些文档、视频，一定要把基础的知识学会、学好

  2. 保持好奇心，善用浏览器的开发工具。会用开发工具来调试也是一项必备的技能

  3. 持续学习，css的新特性还在不断的出现。

五、参考文档

W3C 简介 (w3school.com.cn)

MDN Web Docs (mozilla.org)

CSS 教程 | 菜鸟教程 (runoob.com)

avatar
文章
阅读
粉丝