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

了解CSS

CSS是什么？

Cascading Style Sheets 层叠样式表（用来定义页面元素的样式）
例如：设置字体和颜色，设置位置和大小，添加动画效果等

CSS基本结构

h1{ color:white; font-size:14px;}
h1:选择器（selector）
color:属性（property）
white：属性值（value）
font-size:14px:声明（declaration）

在页面中使用css的几种方式

外链（一般在head中用link引入外部样式）
嵌入（一般在head中引入如上css基本结构）
内联（直接在标签内引入样式例如:<p style="margin:10px 0">aaa</p> ）

选择器的种类（常用）

1.例如：p{} , h1{} ,div{}
id选择器：根据元素的id属性值选中一个元素
2. 类选择器：根据元素的class属性值选中一组元素（class是一个标签的属性，它和id类似，不同的是class可以重复使用）
3. 通配选择器：选中页面中的所有元素（*）
4. 复合选择器：直接组合，后代组合，亲自组合（A>B） 5. 兄弟选择器（A~B） 6. 相邻选择器（A+B）

颜色

RGB
HSL：H:色相，S:饱和度，L:亮度

字体

font-family

字体长度

px
em：em的值并不是固定的；em会继承父级元素的字体大小。

字体效果

font-style：normal/italic(斜体)

字重

font-weight：100~900

行高

line-height

空格

white-space：normal/nowrap/pre/pre-wrap/pre-line

深入CSS

CSS box-sizing 属性

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框

布局是什么？

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

布局相关技术

常规流（行级，块级，表格布局，flexbox，grid布局）
浮动
绝对定位

CSS ｜ 青训营笔记