理解CSS | 青训营笔记

realian
85 阅读13分钟

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

这节课带大家了解 CSS 的概念和工作原理、各种 CSS 选择器以及盒模型和常用的布局方式。

课堂笔记

课程地址：

  1. 走进前端技术栈 CSS：掘金
  2. 深入 CSS - 上：掘金
  3. 深入 CSS - 下：掘金

ppt地址：理解 CSS（上）.pdf - 飞书云文档 (feishu.cn)

课前准备

可以提前学习下 CSS 中的一些基础概念

developer.mozilla.org/zh-CN/docs/…

一、本堂课重点内容：

  1. CSS 代码构成
  2. CSS 使用方法
  3. CSS 流程之选择器组、文本渲染
  4. CSS 选择器的特异度
  5. CSS 布局方式及相关技术
  6. 调试 CSS

二、详细知识点介绍：

什么是CSS?

Cascading Style Sheets ——层叠样式表，用来定义页面元素的样式，

CSS结构

image.png

在页面中使用CSS

外链(推荐)

 <link rel="stylesheet" href="/assets/style.css"

嵌入

 <style>
 li{
     margin:0;
     list-style:none;
 }
 </style>

内联

具体样式和标签绑定起来，不推荐，但可以和ui组件一起使用

 <p style="margin:1em 0">Example Content</p>

CSS如何工作？

image.png

选择器Selector

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

1.按照标签名、类名或id
2.按照属性
3.按照DOM树中的位置

1.通配选择器*{}（所有）
2.标签选择器h1{}、p{}
3.id选择器#logo（唯一）
4.类选择器.logo
5.属性选择器
[disabled]{}(有这个属性）
input[type="password"]{}(属性等于某一个值时)
a[href^="#"]{}(属性匹配上某一个值如a标签的href是以#开头)
a[href$=".jpg"]{}(属性匹配上某一个值如a标签的href是以.jpg结尾)
6.伪类选择器（不基于标签和属性定位，包含 状态伪类 和 结构性伪类）
（1）状态伪类：
a:link未访问的链接，默认状态
a:visited已访问的链接
a:hover鼠标挪动到链接上
a:active激活的链接（鼠标在链接上长按住未松开）
注意：
1.当这4个超链接伪类选择符联合使用时，应注意他们的顺序，推荐顺序为： a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效（覆盖问题）
2.为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中
:focus当前拥有输入焦点的元素（能接收键盘输入）选中聚焦

（2）结构伪类：(之前整理的更全hh)

 E:first-child     作为父元素的第一个子元素的元素E
 E:last-child     作为父元素的最后一个子元素的元素E
 E:root     选择匹配元素E所在文档的根元素（多指html）
 E F:nth-child(n)    选择父元素E的第n个子元素F
 E F:nth-last-child(n)    选择元素E的倒数第n个元素F
 E:nth-of-type(n)    选择父元素内具有指定类型的第n个E元素
 E:nth-last-of-type(n)   选择父元素内具有指定类型的倒数第n个E元素
 E:first-of-type     选择父元素内具有指定类型的第1个E元素
 E:last-of-type     选择父元素内具有指定类型的最后一个E元素
 E:only-child     选择父元素内只包含一个子元素，且匹配为E元素
 E:only-of-type      选择父元素只包含一个同类型的子元素，且匹配为E元素
 E:empty    选择没有子元素的元素，而且该元素也不包含任何文本节点

image.png

image.png

组合

image.png

选择器组

当有多个选择符应用相同的样式时，可以使用群组选择符，用,分开
选择符1，选择符2，选择符3{属性：属性值;}
#top,#news,div,#bottom,.nav{width:960px; margin:0 auto;}

颜色

 GRB       #8fac87、rgb(143,172,135)         红绿蓝
 HSL       hsl(211,66%,55%)                  色相(0-360) 饱和度(0-100%) 亮度(0-100%)
 关键字     blue、grey
 alpha     #ff0000ff、rgba(255,0,0,1)、hsla(0,100%,50%,1)  不透明度，1为不透明，0为透明

字体

font-family

body{font-family:optima,Grorgia,serif;}
1.浏览器逐层匹配字体，从前往后没有这种字体就匹配下一种字体，通常最后加上通用字体族
通用字体族：Serif衬线体、Sans-Serif无衬线体、Cursive手写体、Fantasy、Monospace等宽字体
2.通常将英文字体写在中文字体前面

Web Fonts

使用@font-face 关键字下载网络字体到本地
但会产生性能上的开销

 <h1>Web fonts are awesome!</h1>
 <style>
   @font-face {
     font-family: "Megrim";
     src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
   }
   h1 {
     font-family: Megrim, Cursive;
   }
 </style>

font-size

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

font-style

font-style：italic(倾斜)/normal（常规显示）;

font-weight

加粗：{font-weight:bolder(更粗)、lighter（更细）/bold（加粗）/normal（常规）/100-900;}
说明：在css规范中，把字体的粗细分为9个等级，分别为100——900
一般
400 normal
700 bold
600-900加粗字体
100-400变细

line-height

image.png

字体简写

font:bold 14px/1.7 Helvetica,sans-serif;

顺序：斜体 粗细 大小/行高 字体族

text-align

left     把文本排列到左边。默认值：由浏览器决定。
right    把文本排列到右边。
center   把文本排列到中间。
justify  实现两端对齐文本效果。
inherit  规定应该从父元素继承

spacing

字间距{letter-spacing:value;}控制英文字母和汉字的字距。（英文字母和字母）

词间距{word-spacing:value;}控制英文单词词距。（通用于英文词和词之间的间距）

text-indent

首行缩进：{text-indent:value;}
text-indent可以取负值
text-indent属性只对第一行起作用

text-decoration

none            默认。定义标准的文本。
underline       定义文本下的一条线。
overline        定义文本上的一条线。
line-through    定义穿过文本下的一条线。
blink           定义闪烁的文本。
inherit         规定应该从父元素继承 text-decoration 属性的值。

white-space

normal 默认。空白会被浏览器忽略。
pre 空白换行会被浏览器保留
nowrap 强制不换行
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 继承从父元素继承

选择器的特异度

选择器的特异度决定选择器的优先级

选择符的权重
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重为 0001
class选择符的权重为 0010
伪类选择符的权重为 0010
id选择符的权重为 0100
内联样式的权重为 1000
a:hover{} 10
包含选择符的权重：为各选择符的权中之和（仅用于包含选择符之间的比较）
如#header div .box{} 100+1+10=111

继承

一般文字相关的属性会自动继承父元素

显示继承

inherit能将不可继承的变为可继承的

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}

CSS 中，每个属性都有一个初始值，可以使用 initial 关键字显式重置为初始值background-color:initial

CSS求值过程

image.png

image.png

image.png

布局Layout

布局相关技术：常规流（行级、块级、表格布局、FlexBox、Grid布局）、浮动、绝对定位

盒模型

image.png

height

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

padding

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

border

指定容器边框样式、粗细和颜色
border:3px solid red; (1px solid #ccc)

border-style:

none 无边框
solid 实线
dashed 线状虚线
dotted 点状虚线
double 双线

border的三种属性

border-width 边框大小
border-style 边框类型
border-color 边框颜色

border的四个方向

border-top    上边框
border-right  右边框
border-bottom 下边框
border-left   左边框

margin

指定元素四个方向的外边距
margin:auto实现水平居中

margin collapse：margin在垂直方向上有边距的合并
上方的盒子margin-bottom: 100px;，下方的盒子margin-top: 100px;，两盒子之间的间距为100px，只会取两者中大的，而不是简单的相加

box-sizing:border-box

content-box定义的width和height，其对象是content
而border-box定义的width和height，其对象是border

image.png

/*a实际显示边框超出100%，页面会有滚动条*/
.a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
/*b整个边框不会超出页面，不会有滚动条*/
  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

overflow

visible：默认值。不剪切内容也不添加滚动条
auto：在必需时对象内容才会被裁切或显示滚动条
hidden：不显示超过对象尺寸的内容
scroll：总是显示滚动条

块级与行级

块级盒子行级盒子
不和其他盒子并列摆放和其他行级盒子一起放在一行或拆开成多行
使用所有的盒模型属性盒模型中的width、height不适用
块级元素行级元素
生成块级盒子生成行级盒子，内容分散在多个行盒中
body、article、div、main、section、h1-6、p、ul、li等span、em、strong、cite、code等
display:blockdisplay:inline

盒子概念是css中的，元素概念是html中的，在html中可以通过display属性将盒子进行更改

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

1.inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，
    不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
    如果要设置margin和padding属性,只能设置左右,不能设置上下
	可设置padding-bottom	
    示例元素：span,b,i,a,u,sub,sup,strong,em   
2.block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，
    可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
    示例元素：div,h1-h6,ul,ol,dl,p
3、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，
    可以设置margin和padding。
    示例元素：input,button,img
4.none 此元素不会被显示

行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则：
盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动(float)元素*
单词、inline block、图片不能被拆成两行，使用overflow-wrap:break-word实现单词拆散换行

块级排版上下文

Block Formatting Context (BFC)
以下容器会创建一个BFC：
根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow 值不是 visible 的块盒
display: flow-root;
BFC 内的排版规则： 盒子从上到下摆放
垂直 margin 合并
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠

Flex Box

display:flex
一种新的排版上下文
它可以控制子级盒子的：
摆放的流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许拆行

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
justify-content

justify-content属性定义了项目在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start（默认值）： 左对齐
flex-end：            右对齐
center：              居中
space-between：       两端对齐，项目之间的间隔都相等
space-around：        每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly:         均匀排列每个元素,每个元素之间的间隔相等

image.png

align-items

align-items属性定义项目在侧轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

image.png

Flexibility

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

flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

.container {
    display: flex;
  }
.a, .b, .c {
    width: 100px;
  }
.a {
    flex-grow: 2;
  }
.b {
    flex-grow: 1;
}
剩余的空间按照2:1分配到a和b
flex的缩写

image.png

Grid布局

flex box是单一方向上的，grid是二维的网格

image.png

display:grid

1.display:grid 使元素生成一个块级的Grid容器
2.grid-template相关属性将容器划分为网格
例1：
	grid-template-columns: 100px 100px 200px;
	grid-template-rows: 100px 100px
	三行两列的网格，每列分别为100px,100px,200px,每行100px
例2：
	grid-template-columns: 30% 30% auto;
	grid-template-rows: 100px auto
	三行两列的网格，每列分别为30%，30%，自动填满，每行分别为100px,自动填满
例3：
	grid-template-columns: 100px 1fr 1fr;
	grid-template-rows: 100px 1fr
	三行两列的网格，第一列100px，第二三列分别占剩下一等分，第一行100px,第二行占剩下的
3.设置每一个子项占哪些行/列
grid line网格线

image.png

方法1：
.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}
方法2：
.a {
  grid-area: 1/1/3/3;
}
表示：行开始1，列开始1，行结束3，列结束3 的区域

image.png

浮动float

使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
clear:both;clear 属性指定元素两侧不能出现浮动元素

定位position

static     默认值，非定位元素,对象遵循HTML原则（标准流）
relative   相对自身原本位置偏移，不脱离文档流,流内其他元素当它没有偏移一样布局
absolute   绝对定位，相对非 static 祖先元素定位,将对象从文档流中脱离出来
		  使用left/right/top/bottom等属性相对其 相对定位（绝对定位）的父盒子 进行定位
           如果不存在这样的父对象，则依据body对象
           不会对流内元素布局造成影响
           子绝父相，如果父盒子没有相对定位，那么就相对body定位
fixed      相对于视口绝对定位，比如导航固定，不随页面滚动而改变位置

三、课后个人总结：

这节课主要学习了css的使用、属性以及布局，大部分内容进行了复习，也学习了之前没了解过的web fonts、box-sizing:border-box、grid布局，系统了解了行级/块级排版上下文，内容看似简单，但是实现起来会遇到很多问题，需要细心。css的属性和属性值有很多，并且会不断产生新特性，需要不断复习和学习。

四、引用参考：

青训营课程——CSS

五、课后阅读

avatar
文章
阅读
粉丝