这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
一、什么是CSS
CSS(层叠样式表),HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。CSS 可以用来更改内容的字体、颜色、大小、间距，添加动画等。
二、怎样使用
1.外部样式表，在<head>中我们将外部样式表链接到页面。
2.内部样式表,内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件[<head>]标签里的[<style>]标签之中。
3.内联样式,内联样式表存在于 HTML 元素的 style 属性之中。每个 CSS 表只影响放在这个的标签。
三、选择器
分类
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
四、基础知识
1.组合 (Combinators)
- 直接组合 AB 满足A同时满足B input:focus
- 后代组合 AB 选中B，如果它是A的子孙 nav a
- 亲子组合 A>B 选中B，如果它是A的子元素 section >p
- 相邻选择器 A+B 选中B，如果它紧跟在A后面 h2 +p
2.调试 CSS
右键点击页面，选择「检查」使用 快捷键
- Ctrl+Shift+I(Windows)
- Cmd+Opt+I I(Mac)
3.布局(Layout)
确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
4.布局相关技术
- 常规流：行级、块级、表格布局、FlexBox、Grid 布局
- 浮动
- 绝对定位
5.width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的 content box 宽度
6.height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto 取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效
7.margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
