这是我参与「第四届青训营」笔记创作活动的的第2天，今天花了两个多小时学习了CSS，感觉自己向着前端工程师更近了一步。
一、基础CSS
基本代码
h1{
//选择器 Selector
color: white;
//属性、属性值
font-size:14px;
}
在页面中使用CSS
- 外链 link 推荐 内容和样式的分离
- 嵌入
<style>……</style> - 内联 写在标签中的style属性中，不需要写选择器
选择器
- 找出页面中的元素，以便给他们设置样式
- 使用多种方式选择元素
-
按照标签名、类名或id
-
按照属性
-
按照DOM树中的位置
- 选择器分类
-
通配选择器
* -
标签选择器
h -
id选择器
#logo -
类选择器
.done -
属性选择器
[disabled] a[href^=”#”] a[href$=”.jpg”] -
伪类选择器 （通过父级节点的相对位置选中）
- 选择器组
颜色
颜色-RGB
- rgb(143, 172, 135)
- #8fac87
颜色-HSL
hsl(18,66%,61%)
- 色相 0-360
- 饱和度 0-100%
- 亮度 0-100%
名称
- blue
- white
- red
- 不透明度 alpha越低越透明
字体
font（简写）font-family、font-size、font-style、font-weight
其他
行高 line-height white-space
二、深入CSS
选择器的优先级
选择器可能选择到同一条元素
继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值
文字相关一般可以继承，和模型相关的一些属性都是不可继承，例如：宽度
显示继承
* {
box-sizing: inherit;
}
初始值
- CSS中，每个属性都有初始值
- 可以使用initial关键字显式重置为初始值
布局（Layout）
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容的信息来计算
布局相关技术
Box（默认content-box，如果设置了box-size:border-box，则表示包括border和padding在内的大小）：margin（外边距，四个方向）、border（边框样式、粗细和颜色以及四个方向）、padding（内边距有四个方向）、content（height、width）
- width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
- height
- 指定content box高度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
- 容器有指定高度时，百分数才生效
超出容器的内容可以设置overflow
常规流 （display 行级 块级 表格布局 FlexBox Grid布局）
ps：通过网格线识别位置
浮动float
图片可以浮动在文字上
