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

Day02——理解css

css介绍

css是什么？

css片段：

在页面中使用CSS

CSS是如何工作的

选择器Selector

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

通配选择器 *
标签选择器 ****div
id选择器 #logo (id唯一）
类选择器 .logo (可以出现多次）
属性选择器 [disabled]、input[type="password"]

a[href^="#"] 匹配以#号开头的href值

a[href$=".jpg"] 匹配以.jpg号结尾的href值
伪类选择器
- 不基于标签和属性定位元素
- 几种伪类
  - 状态伪类 a:link、a:visited、input:focus……
  - 结构性伪类 li:first-child、li:last-child

组合选择器
选择器组

选择器规则（优先级问题）

特异度

字体

颜色

直接指定、RGB、HSL、rgba(透明度)

字体

font-family(可以指定多种，浏览器顺序渲染出第一个能应用的，最后一种通常指定通用字体族）

Web Fonts(在站内查找字体）

属性

属性继承

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

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

显示继承 —— inherit（让不可继承的属性变成可继承）

初始值

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

background-color的初始值为transparent
margin-left的初始值为О

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

background-color: initial

CSS 求值过程

布局

布局相关技术

常规流 、 浮动 、 绝对定位

常规流

width、height

width

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

height

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

padding

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

·百分数相对于容器宽度

border

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

三种属性

border-width
border-style
border-color

四个方向

border-top
boder-right
border-bottom
border-left

margin

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

使用margin:auto水平居中

box-sizing: border-box

overflow

visible``hidden``scroll

块级vs.行级

diaplay

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

常规流Normal Flow

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

行级排版上下文

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

块级排版上下文

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

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

Flex Box

一种新的排版上下文
它可以控制子级盒子的:
- 摆放的流向(→ ↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

相关属性： flex-direction 、 justify-content 、 align-items 、 align-self 、 order
Flexibility
- 可以设置子项的弹性:当容器有剩余空间时，会伸展﹔容器空间不够时，会收缩。
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度s45