这是我参与「第四届青训营 」笔记创作活动的的第2天
前端基础班第二节：了解 CSS 的概念和工作原理、各种 CSS 选择器以及盒模型和常用的布局方式。
一.什么是CSS
- Cascading Style Sheets
- 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
二.在页面中使用css
- 外链式
<link rel="" href=""> - 嵌入式
<style></style> - 内联式
<p style=""></p>
三.css是如何工作的
四.选择器Selector
- 找出页面中的元素，以便设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
- 通配选择器 *{}
- 标签选择器
- id选择器
- 类选择器
- 属性选择器 [属性]{}、[属性=‘属性值’]{}
五.伪类
- 不基于标签和属性定位元素
- 几种伪类
-
状态伪类 （:link、:visited、:hover、:active、:focus） -
结构性伪类
-
六.组合
七.颜色
- RGB
- HSL
八.字体font-family
- 通用字体族
- 大小font-size
-
关键字 -
长度 px、em -
百分数
-
- 字重font-weigt 100-900
- 行高line-height
- white-space
九.选择器的特异度
十.继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值
- 显式继承
- 初始值
十一.布局
- 确定内容大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
- 相关技术：常规流、浮动、绝对定位
- 高度height
- 内边距padding
-
指定元素四个方向的内边距 -
百分数相对于容器的宽度
-
- 边框border
-
指定边框样式、粗细和颜色
-
-
外边距margin
-
在垂直方向上取边距值大的
-
-
overflow
-
块级与行级
- display属性
