CSS核心概念一把梭-基础部分

3,621

封面图片来自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:盒子内容
    • widthheight : Content的宽度和高度,默认为 auto,即浏览器自动计算。
    • max-width/min-width min-height/max-height

注意!再提一下,设置元素的widthheight,实际上是设置的content区域的widthheight元素的实际尺寸还需计算paddingbordermargin。 有几种计算模型需要了解:

  • 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 )

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">

参考: