1, 基本语法
- mdn
- w3cSchool https://www.w3schools.com/CSS/css_syntax.asp
2, 选择器
2.1, 选择器类型
(1), 简单选择器
通过元素类型 tagName,*,.class 或 #id 匹配一个或多个元素.
(2), 属性选择器
通过 属性 / 属性值 匹配一个或多个元素.
Presence
类型 | 匹配结果 |
---|---|
[ attr ] | 匹配包含 attr 属性的所有元素 |
[ attr = val ] | 匹配 attr 属性值为 val 的所有元素 |
[ attr ~= val ] | 匹配 attr 属性中包含 val 词汇 ( space-separated ) 的所有元素 |
Substring
类型 | 匹配结果 |
---|---|
[ attr ^= val ] | 匹配 attr 属性中以 val 开头的所有元素 |
[ attr |= val ] | 匹配 attr 属性中以 val 或者 val- 开头的所有元素 |
[ attr $= val ] | 匹配 attr 属性中以 val 结尾的所有元素 |
[ attr *= val ] | 匹配 attr 属性中包含 val 的所有元素 |
(3), 伪类和伪元素
伪类: 匹配元素的相关状态和属性, 如 :hover :first-child :nth-child() , 单冒号.
伪元素: 匹配元素的相关位置, 如 ::after ::first-letter ::selection, 双冒号.
(4), 组合选择器
组合选择器: 组合使用多个选择器.
类型 | 组合 | 匹配结果 |
---|---|---|
选择器组 | A , B | 匹配 A or B 选择器规则 |
后代选择器 | A B | 匹配 B 选择器规则,且 B 是 A 的后代(子孙) |
子代选择器 | A > B | 匹配 B 选择器规则,且 B 是 A 的子代(必须是直接子代) |
相邻兄弟选择器 | A + B | 匹配 B 选择器规则,且 B 是 A 的弟弟(AB 属于同一父代,且 B 紧跟 A 的后面) |
任一兄弟选择器 | A - B | 匹配 B 选择器规则,且 B 是 A 的任意弟弟(AB 属于同一父代,且 B 在 A 之后,不一定紧挨) |
2.2, 选择器优先级
优先级按以下规则递增:
通配符 * , 组合选择器 ( ,> + - '') 和否定伪类: not()对优先级没有影响(在 :not() 内部声明的选择器还是会按照规则影响)
浏览器默认样式
元素类型选择器 tagName, 伪元素选择器 ::
类选择器 .class, 属性选择器 [ attr ], 伪类选择器 :
id 选择器 #id
内联样式
- <tagName style="">
- !important
3, 值和单位
3.1, 值
- 数值
- 百分比
- 颜色: 背景颜色 background-color 文字颜色 color 边框颜色 border
- - colorName
- - HEX
- - RGB
- - HSL
- - RGBA HSLA
- - Opacity
- 函数
- - rgb() rgba() hsla() linear-gradient()
- - rotate() translate()
- - calc()
- - url()
3.2, 单位
- - px
- - em em are the most common **relative** unit you'll use in web development.
- - rem
- - ex ch
- - vw vh
- 无单位值
- 动画 s deg
4, 继承
5, 盒模型
5.1, 盒模型基础
margin: 外边距, 颜色透明
border: 边框
padding: 内边距, 颜色透明
content: 盒子内容
width 和 height : Content 的宽度和高度, 默认为 auto, 即浏览器自动计算.
- max-width/min-width
- min-height/max-height
注意! 再提一下, 设置元素的 width 和 height, 实际上是设置的 content 区域的 width 和 height. 元素的实际尺寸还需计算 padding,border 和 margin. 有几种计算模型需要了解:
w3c 标准盒模型
- Total element width = width + left padding + right padding + left border + right border + left margin + right margin
- Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
IE 盒模型
5.4, 轮廓 outline
OUTSIDE the borders, to make the element "stand out".
轮廓 https://www.w3schools.com/css/css_outline.asp 指的是边框外的区域, 目的是为了设置使元素显得突出的样式
5.2, 溢出 overflow
溢出 overflow 控制的是内容区域 content 太大而溢出一片区域时候的情况.
值 | 匹配结果 |
---|---|
visible | 默认值,溢出部分不会被裁减,内容区域 content 会渲染到元素盒子之外 |
hidden | 溢出部分会被裁减, 不可见 |
scroll | 溢出部分会被裁减,但会出现滚动条以查看内容(始终存在垂直和水平滚动条) |
auto | 和 scroll 相似,但只会在必要时,出现滚动条(只有溢出的方向出现滚动条) |
5.3, 背景剪裁 background-Clip
background-clip: border-box|padding-box|content-box|initial|inherit;
5.5, 盒子类型 display
- Display
- Differences between display: none; and visibility: hidden
5.6, 外边距合并
块级格式化上下文 BFC
- BFC ( block-formatting contexts )
- Understanding CSS Layout And The Block Formatting Context
- how to create BFC | MDN
- CSS: What is Block Formatting Context (BFC)?
6, 调式 CSS
Chrome 开发者工具使用指南 | Google Developer
7, 媒体查询 @media
- @media not|only mediatype and (expressions) {
- CSS-Code;
- }
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
- @media queries introductions | w3cSchool
- @media rule in our CSS reference | w3cSchool
参考:
- CSS | mdn https://developer.mozilla.org/zh-CN/docs/Web/CSS
- CSS | w3cSchool https://www.w3schools.com/css/css_boxmodel.asp
学习 CSS 布局 http://zh.learnlayout.com/frameworks.html
CSS 布局十八般武艺都在这里了 | 知乎 https://zhuanlan.zhihu.com/p/25565751
w3cSchool CSS 布局 https://www.w3schools.com/css/css_align.asp
来源: https://juejin.im/post/5c739f5b6fb9a049af6de706