理解CSS｜ 青训营笔记

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

一、本堂课重点内容：

  • CSS代码构成、使用方法
  • CSS流程之选择器、文本渲染
  • CSS选择器的特异性、继承
  • CSS求值过程、调试方法
  • CSS布局方式及相关技术
  • CSS行级、块级盒模型

二、详细知识点介绍：

1. CSS是什么

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

2. 基本构成

1
2
3
4
选择器 {
    属性名: 属性值:
    /*属性名与属性值组成的语句是一个声明*/
}

3. 在页面中使用CSS

1. 外链式

引入同一文件夹下的CSS文件，需要在头部写入即可引入CSS文件

2. 嵌入式

在头部将CSS样式内容写入标签中，一般适用于长沙市样式较少时

3. 内联式

直接在标签内引入style，并将CSS样式写入

4. 选择器

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

1. 类选择器

1
2
3
4
5
6
7
8
9
<li class="done">hello</li>
//
<style>
    .done {
		color: gray;
        text-decoration: line-through;
	}
</style>

**2.属性选择器 **

1
2
3
4
5
6
7
8
9
10
11
<label>用户名：</label>
<input value="zhao"disabled /
<label>密码：</1abel
<input value="123456"type="password"/>

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

5. 伪类

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

常用的几种状态：

  • hover：当鼠标经过该元素时
  • visited：当浏览过该标签时
  • link：当设置了链接时
  • focus：当获得焦点时

引用指定的子盒子时：

引用第一个子盒子时：first-child

引用最后一个子盒子时：last-child

注意：是给子元素的标签加引用，而不是父元素

6. 组合

名称 语法 说明 实例
直接组合 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

7. 选择器组

每个选择器之间用逗号隔开，其余同选择器用法

选择器组常用于当部分CSS属性值相同时。可以将属性写在选择器组内，避免代码重复冗杂。

8. 其他

  • 透明度：alpha，数值范围：0~1

  • 字体：font-family

  • font-size

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

  • 行高：line-height

    测量方法：从上一行文字底部到下一行文字最低端即为行高

  • 初始值：

    1. CSS中,每个属性都有一个初始值
      • background的初始值为transparent
      • margin-left的初始值为0
    2. 可以使用initial关键字显式重置为初始值
      • background-color：initial

  • 宽度：width

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

  • 高度：height

    • 指定content box高度
    • 取值为长度、百分数、auto
    • auto取值由内容计算得来
    • 百分数相对于容器的content box高度
    • 容器有指定的高度时，百分数才生效

  • 外边距：margin

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

  • 内边距：padding

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

    使用内边距时可能会有父盒子被撑开的问题，要把子盒子的值设置为父盒子的值减去两个padding的值

  • 边框：border

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

    • 三种属性
      • border-width
      • border-style：solid、dotted、dashed
      • border-color
    • 四个方向
      • border-top
      • border-right
      • border-bottom
      • border-left

  • 溢出部分：overflow

    属性值：visible、hidden、scroll

  • position属性

    • static 默认值，非定位元素
    • relative 相对自身原本位置偏移，不脱离文档流
      • 在常规流里面布局
      • 相对于自己本应该在的位置进行偏移
      • 使用top、left、bottom、right设置偏移长度
      • 流内其它元素当它没有偏移一样布局
    • absolute 绝对定位，相对非static祖先元素定位
      • 脱离常规流
      • 相对于最近的非static祖先定位
      • 不会对流内元素布局造成影响
    • fixed 相对于视口绝对定位

9. 调试CSS

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

10. 继承

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

显式继承：

1
2
3
4
5
6
7
8
9
* {
	box-sizing:inherit;
}
html {
	box-sizing:border-box;
}
.some-widget {
	box-sizing:content-box;
}

11. 布局

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

布局相关技术：

常规流：行级、块级、表格布局、FlexBox、Grid布局

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

行级排版上下文

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

块级排版上下文

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

  • 某些容器会创建一个BFC

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

浮动

绝对定位

12. 块级元素和行级元素

块级元素：不和其他盒子并列摆放，自己独占一行，适用于所有的盒模型

常见的块级元素标签有：body、div、ul、li、section、main、h1~6等

行级元素：和其它行级盒子一起放在一行或拆开成多行，不使用width、height等块级元素的属性值

常见的行级元素标签有：span、em、cite、code、strong等

13. FlexBox

  • 一种新的排版上下文
  • 可以控制子盒子的：摆放的流向、摆放顺序、盒子的宽度和高度、水平和垂直方向的对齐、是否允许折行
  • Flexibility
    • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
    • flex-grow有剩余空间时的伸展能力
    • flex-shrink容器空间不足时收缩的能力
    • flex-basis没有伸展或收缩时的基础长度

14. Grid布局

display：grid

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

三、实践练习例子：

1
2
3
4
5
6
7
8
<link rel="stylesheet" href="/style.css">
//
<style>
    li { margin: 0; list-style: none; }
    p { margin: 0; lem 0; }
</style>
//
<p style="margin: lem 0">apple</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
    h1 {
		color:orange;
		font-size:24px;
	}
	p {
        color:gray;
		font-size:14px;
		line-height:1.8;
	}
</style>
</head>
<body>
<h1>Web框架的架构模式探讨</h1>
1
2
3
4
5
6
7
8
html {
	font-size:24px;
}
.a {
	width:100%;
	padding:1em;
	border:3px solid #ccc;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
This is a paragraph of text with long word
Honorificabilitudinitatibus.Here is an image
<img src="https://assets.codepen.io/59477/cat.png"alt="cat">
And <em>Inline Block</em>
</div>
<style>
    div {
		width:10em;
		//overflow-wrap:break-word;
		background:#411;
    em {
		display:inline-block;
		width:3em;
		background:#33c;
    }
</style>        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
<style>
    .container {
		display:flex;
		border:2px solid #966;
    }
    .a,.b,.c {
		text-align:center;
		padding:1em;
	}
    .a {
		background:#fcc;
	}

四、课后个人总结：

  • 对元素的定位是CSS的重点，要理解定位方式的本质及核心，多尝试，多总结
  • CSS的另一个作用是对元素进行样式修饰，涉及到很多样式、属性、引用方法等要知道大致内容，在插件的提示下能够熟练应用