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

CSS简介

CSS是什么？

Cascading Style Sheets

用来定义页面元素的样式

设置字体和样式
设置位置和大小
添加动画效果

CSS如何使用？

外链：<link rel="stylesheet" href="/assets/style.css">
嵌入：

   <style>
      h1{margin:0;list-style:none;}
      p{margin:lem 0;}
   </style>

内联：<p style="margin:lem 0">Example Content</p>

CSS如何工作？

选择器Selector

方式：

- 按照标签名（h1，p，……）
- 类名（class="name";.name{}）
- id（id="logo"；id值唯一，#logo{}）
按照属性（只要有此属性：[disabled]{ }）（有特定属性：input[type="password"]；^=：开头匹配；$=：结尾匹配）
按照DOM树中的位置

通配选择器：*（可匹配所有）

伪类：不基于属性和标签定位元素，有状态伪类和结构性伪类。

状态伪类（link：默认；visited：访问过；hover：鼠标移上去；active：鼠标按下去）（：focus{}）
结构性伪类 first/last-child

组合

选择器组

body,h1,h2,h3,h4,h5,h6,ul,ol,li{
  margin:0;
  padding:0;
}
[type="checkbox"],[type="radio"]{
  box-sizing:border-box;
  padding:0;
}

颜色

RGB

红绿蓝

rgb(255,0,0)
#ff0000

HSL

hsl(18,100%,50%)

alpha透明度

#ff0000ff
rgba(255,0,0,1)
hsla(0,100%,5o%,1)

字体font

h1{
  /*粗细 大小 行高 字体族*/
  font:boil 14px 1.7 Helvetica,sans-serif;
}
p{
  font:14px serif;
}

字体font-family

使用建议：

字体列表可设置多个（以备不同设备使用），最后写上通用字体族
英文字体放在中文字体前面

通用字体族

使用Web Fonts

字体大小font-size

关键字：small、medium、large
长度：px（像素，默认20px）、em（倍数关系）
百分数：相对于父元素字体大小

字体样式font-style

默认值：normal 斜体：italic

字体粗细（自重）font-weight

并不适用于所有字体

100~900
400-normal
700-bold

行高line-height

以倍数表示（1.6=32px）

对齐text-align

left
center
right
justify（两端对齐/分散对齐）

间距spacing

letter-spacing（字母间）
word-spacing（单词间）

首行缩进text-indent

装饰text-decoration

none
underline（下划线）
line-through（删除线）
overline（上划线）

空白符white-space

normal：HTML里默认将换行与空格合并为一个空格
nowrap：强制不换行
pre：保留所有空格和换行
pre-wrap：保留空格，但一行显示不下时自动换行
pre-line：合并空格，保留换行

调试CSS

右键点击页面，选择【检查】
使用快捷键

Ctrl+Shift+I(Windows)
Cmd+Opt+I(Mac)

CSS深入

选择器的特异度（Specificity）

继承

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

显式继承inherit

*{
   box-sizing:inherit;
 }
html{
   box-sizing:border-box;
}
.some-weight{
   box-sizing:content-box;
}

初始值

CSS中每个属性都有初始值(background-color的初始值为transparent；margin-left的初始值为0)
可以使用initial关键字显式重置为初始值（background-color：initial）

CSS求值过程

布局

是什么？

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

布局相关技术

盒模型

weight

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

height

指定 context box 高度
取值为长度、百分数、auto
auto由浏览器根据其它属性确定
百分数相对于容器的 content box 高度
容器有指定的高度时，百分数才生效

padding

指定元素四个方向的内边距（上右下左）
百分数相对于容器宽度

border

指定容器边框样式（none，实线solid，虚线dashed，点状dotted）、粗细和颜色
组合

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto（水平居中margin:auto）
百分数相对于容器宽度
margin collapse 边距合并（取两者之间大的值，而不是简单相加）

box-sizing：border-box

overlow

visible：超出部分依然显示
hidden：截掉超出盒子的部分
scroll：滚动条
auto：超出则可滚动；未超出则不显示滚动条

盒模型中常见布局规则

display属性

常规流 Normal Flow

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

行级排版上下文

Inline Formatting Context（IFC）
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示（单词如需换行：overflow-wrap:break-word）
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

可以控制子级盒子的：

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

Flexibility

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

Grid布局

二维

display：grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占那些行/列划分网络：(fr可以理解为一份)

grid line 网格线：

grid-area 网格区域

.a{grid-area:1/1/3/3;}
.a{grid-row-start:1;
   grid-column-start:1;
   grid-row-end:3;
   grid-column-end:3;}

float 浮动

可实现文字环绕图片效果（如float:left）

绝对定位

position属性

static：默认值，非定位元素
relative：相对于自身原本位置偏移，不脱离文档流。（使用top、left、bottom、right设置偏移长度，流内其它元素当它没有偏移一样布局）
absolute：绝对定位，相对最近的非static祖先元素定位（使用top、left、bottom、right设置，脱离常规流，不会对流内元素布局造成影响）
fixed：相对于视口绝对定位（滚动时固定位置）

学习CSS的几点建议

充分利用MDN和M3C CSS规范
保持好奇心，善用浏览器的开发者工具
保持学习

理解CSS ｜ 青训营笔记