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

时间 2019-11-08

标签 css 核心概念一把基础部分栏目 CSS 繁體版

原文原文链接

封面图片来自Googlecss

一、基本语法

二、选择器

2.一、选择器类型

（1）、简单选择器

经过元素类型 tagName、*、.class 或 #id 匹配一个或多个元素。html

（2）、属性选择器

经过属性 / 属性值匹配一个或多个元素。css3

Presenceweb

类型	匹配结果
`[ attr ]`	匹配包含 `attr` 属性的全部元素
`[ attr = val ]`	匹配 `attr` 属性值为 `val` 的全部元素
`[ attr ~= val ]`	匹配 `attr` 属性中包含 `val` 词汇( `space-separated` )的全部元素

Substringchrome

类型	匹配结果
`[ 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，双冒号。express

（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.二、选择器优先级

优先级按如下规则递增：bash

通配符 * 、组合选择器( , > + - '')和否认伪类:not()对优先级没有影响（在 :not() 内部声明的选择器仍是会按照规则影响）
浏览器默认样式
元素类型选择器 tagName、伪元素选择器 ::
类选择器 .class、属性选择器 [ attr ]、伪类选择器 :
id选择器 #id
内联样式 < tagName style="" >
!important

三、值和单位

3.一、值

- 数值
- 百分比
- 颜色：背景颜色 background-color 文字颜色 color  边框颜色 border
    - colorName
    - HEX
    - RGB
    - HSL
    - RGBA HSLA
    - Opacity
- 函数
    - rgb() rgba() hsla() linear-gradient()
    - rotate() translate()
    - calc()
    - url()
复制代码

3.二、单位

-   px
-   em em are the most common **relative** unit you'll use in web development.
-   rem
-   ex ch
-   vw vh
-   无单位值
-   动画 s deg
复制代码

四、继承

五、盒模型

5.一、盒模型基础

margin：外边距，颜色透明
border：边框
padding：内边距，颜色透明
content：盒子内容
- width和height : Content的宽度和高度，默认为 auto，即浏览器自动计算。
- max-width/min-width min-height/max-height

注意！再提一下，设置元素的width和height，其实是设置的content区域的width和height。元素的实际尺寸还需计算padding、border和margin。有几种计算模型须要了解：ide

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.四、轮廓 outline

OUTSIDE the borders, to make the element "stand out".chrome-devtools

轮廓指的是边框外的区域，目的是为了设置使元素显得突出的样式

5.二、溢出 overflow

溢出 overflow 控制的是内容区域 content 太大而溢出一片区域时候的状况。

值	匹配结果
`visible`	默认值，溢出部分不会被裁减，内容区域 `content`会渲染到元素盒子以外
`hidden`	溢出部分会被裁减, 不可见
`scroll`	溢出部分会被裁减，但会出现滚动条以查看内容（始终存在垂直和水平滚动条）
`auto`	和`scroll`类似，但只会在必要时，出现滚动条（只有溢出的方向出现滚动条）

5.三、背景剪裁 background-Clip

background-clip: border-box|padding-box|content-box|initial|inherit;
复制代码

5.五、盒子类型 display

5.六、外边距合并

块级格式化上下文 `BFC`

BFC ( block-formatting contexts )

六、调式CSS

Chrome开发者工具使用指南 | Google Developer

七、媒体查询 `@media`

@media not|only mediatype and (expressions) {
  CSS-Code;
}
复制代码

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
复制代码

参考：