封面图片来自Google
1、基本语法
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".
轮廓指的是边框外的区域,目的是为了设置使元素显得突出的样式
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
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">
参考: