CSS概念【记录】

摘要：语法规则注释层叠优先级继承值块格式化上下文盒模型层叠上下文可替换元素外边距合并包含块视觉格式化模型布局模式语法属性值声明声明块规则规则集规则规则一个语句定义样式表使用的字符集告诉引擎引入一个外部样式表嵌套规则如果满足媒介查询的条件则条件规则

1、CSS语法

2、@规则

3、注释

4、层叠

5、优先级

6、继承

7、值

8、块格式化上下文

9、盒模型

10、层叠上下文

11、可替换元素

12、外边距合并

13、包含块

14、视觉格式化模型

15、布局模式

1、CSS语法

属性：property

值：value

CSS声明：property:value;

CSS声明块：{ property:value; }

CSS规则（CSS规则集）：element{ property:value; }

2、@规则

@规则：一个CSS语句

　　@charset：定义样式表使用的字符集

　　@import：告诉CSS引擎引入一个外部样式表

　　嵌套@规则：

　　　　@media：如果满足媒介查询的条件则条件规则组里的规则生效

　　　　@font-face：描述将下载的外部的字体

　　　　@keyframes：描述CSS动画的中间步骤

@charset "utf-8"; /* @charset只能是样式表中的第一个元素，且前面不能有任何字符，如果有多个@charset被声明，只有第一个有效 */

@import url("global.css"); /* @import规则必须先于所有其他类型的规则，@charset规则除外 */
@import url(global.css);
@import "global.css";
/* IE6+ */ @import url(global.css);
/* IE8+ */ @import url(global.css) screen;
/* IE9+ */ @import url(global.css) screen and (max-width:1024px);

/* IE9+ */ @media screen and (max-width:1024px){  }
/* IE9+ */ 

@font-face {
    font-family: iconfont;
    src: url(iconfont.eot); /* IE9 */
    src: url(iconfont.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */
    url(iconfont.woff) format(woff), /* Chrome、Firefox */
    url(iconfont.ttf) format(truetype), /* Chrome、Firefox、Opera、Safari、Android、IOS 4.2+ */
    url(iconfont.svg#iconfont) format(svg); /* IOS 4.1- */
}

@keyframes animate { /* IE10+ */
    from {
        width: 0;
        margin-left: 0;
    }
    to {
        width: 100%;
        margin-left: 100%;
    }
}

3、注释

/* 单行注释 */
/*
    多行注释
    注释无法嵌套，也就是说，一旦遇到第一个*/记号，就一定会结束注释
 */

4、层叠

层叠算法决定如何找出要应用到每个文档元素的每个属性上的值，层叠算法是先于优先级算法的

1　　用户代理

2　　用户代理　　!important

3　　用户

4　　页面作者

5　　CSS动画

6　　页面作者　　!important

7　　用户　　　　!important

5、优先级

通配选择器（*）、关系选择符（+、>、~、 ）、否定伪类:not()对优先级没有影响，但是在:not()内部声明的选择器会影响优先级

1　　元素选择器、伪元素

2　　类选择器、属性选择器、伪类

3　　ID选择器

4　　内联样式

5　　!important

6、继承

当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值，只有文档根元素取该属性的概述中给定的初始值

当元素的一个非继承属性没有指定值时，则取属性的初始值

7、值

初始值：默认值

指定值：赋值、继承值、初始值

计算值：通过指定值计算出来

　　　　计算值所需要的计算通常包括将相对值转换成绝对值（em单位或百分比）

　　　　对于有些属性，这些元素的百分比与需要布局确定后才能知道的值有关，它们的百分比值会转换成百分比的计算值

　　　　（top、width、min-width、margin、padding、background-position、text-indent等）

使用值（应用值）：计算值，或计算布局（尺寸比如auto或百分数换算为像素值）

实际值：应用值的近似值，例如，一个用户代理可能只能渲染一个整数像素值的边框（实际值）

解析值：对于大多数属性，它是计算值，但对于一些旧属性（包括宽度和高度），它是使用值

/*
            width:auto; width:1920px; border-width:1.01px; font-size:2em;
    初始值：auto        auto          medium               medium
    指定值：auto        1920px        1.01px               2em
    计算值：auto        1920px        1.01px               32px
    使用值：1920px      1920px        1.01px               32px
    实际值：1920px      1920px        1px                  32px
    解析值：1920px      1920px        1.01px               32px
*/

8、块格式化上下文

布局过程中生成块级盒子的区域，浮动元素与其他元素的交互限定区域

浮动定位和清除浮动时只会应用于同一个BFC内的元素，浮动不会影响其它BFC中元素的布局，外边距折叠也只会发生在属于同一BFC的块级元素之间

1　　根元素或包含根元素的元素

2　　浮动元素

3　　绝对定位元素

4　　行内块元素

5　　表格单元格（元素的display为table-cell）

6　　表格标题（元素的display为table-caption）

7　　匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group、inline-table）

8　　overflow值不为visible的块元素

9　　弹性元素（display为flex或inline-flex元素的直接子元素）

10　　网格元素（display为grid或inline-grid元素的直接子元素）

9、盒模型

当对一个文档进行布局时，浏览器渲染引擎会根据CSS-Box模型（CSS Basic Box model）将所有元素表示为一个矩形盒子（box），CSS决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸等）

对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由line-height属性决定

1　　内容区域content area

2　　内边距区域padding area

3　　边框区域border area

4　　外边距区域margin area

10、层叠上下文

层叠上下文是HTML元素的三维概念

1　　根元素

2　　z-index值不为auto的绝对/相对定位

3　　一个z-index值不为auto的flex项目，即：父元素display:flex|inline-flex

4　　opacity属性值小于1的元素

5　　transform属性值不为none的元素

6　　position:fixed

11、可替换元素

可替换元素的展现不是由CSS来控制的，这些元素是一类外观渲染独立于CSS的外部对象

1　　典型的可替换元素有img、object、video和表单元素，如textarea、input

2　　某些元素只在一些特殊情况下表现为可替换元素，例如audio和canvas

3　　通过CSS content属性来插入的对象被称作匿名可替换元素

4　　一部分可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些CSS属性用到

12、外边距合并

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（外边距合并）

浮动元素和绝对定位元素的外边距不会折叠（因为这里触发了BFC，overflow值不为visible的块元素除外，其只会与子元素发生折叠）

如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和

如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值

1　　相邻元素之间

2　　父元素与其第一个或最后一个子元素之间：如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的margin-top分开，或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的margin-bottom分开，那么这两对外边距之间会产生折叠，此时子元素的外边距会溢出到父元素的外面

3　　空的块级元素：如果一个块级元素中不包含任何内容，并且在其margin-top与margin-bottom之间没有边框、内边距、行内内容、height、min-height将两者分开，则该元素的上下外边距会折叠

13、包含块

元素的尺寸和位置受其包含块的影响，大多数情况下，包含块就是这个元素最近的祖先块元素的内容区

计算height、top、bottom中的百分值，是通过包含块的height的值，如果包含块的height值根据它的内容变化，且包含块的position属性的值为relative或static，那么，这些值的计算值为0

计算width、left、right、padding、margin这些属性由包含块的width属性的值来计算它的百分值

1　　如果position属性为static或relative，包含块就是由它的最近的祖先块元素或格式化上下文的内容区的边缘组成的

2　　如果position属性为absolute，包含块就是由它的最近的position的值不是static的祖先元素的内边距区的边缘组成

3　　如果position属性为fixed，包含块就是由viewport组成的

4　　如果position属性为absolute或fixed，包含块也可能是由满足以下条件的最近祖先元素的内边距区的边缘组成的：transform属性值不为none的元素

5　　根元素所在的包含块是一个被称为初始包含块的矩形

14、视觉格式化模型

CSS视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则，根据CSS盒子模型将文档中的元素转换为一个个盒子

1　　块级元素：display为block、list-item、table

2　　块级盒子：由块级元素生成，一个块级元素至少会生成一个块级盒子，但也有可能生成多个（列表项元素）

3　　块容器盒子：有些块容器盒子也不是块级盒子（非替换行内块和非替换表格单元格）

4　　块盒子：如果一个块级盒子同时也是一个块容器盒子，则称其为块盒子（表格和可替换元素之外的块级盒子）

5　　匿名块盒子：CSS选择器不能作用于匿名盒子，所以它不能被样式表赋予样式，也就是说，此时所有可继承的CSS属性值都为inherit，而所有不可继承的CSS属性值都为initial

6　　行内级元素：display为inline、inline-block、inline-table

7　　行内级盒子：由行内级元素生成，分为行内盒子和原子行内级盒子

8　　行内盒子：display:inline的非替换盒子

9　　原子行内级盒子：display:inline的可替换盒子或display为inline-block、inline-table生成的盒子

15、布局模式

CSS布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法

1　　块布局：用来布置文件

2　　行内布局：用来布置文本

3　　表格布局：用来布置表格

4　　定位布局：用来对那些与其他元素无交互的定位元素进行布置

5　　弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面

6　　网格布局：用来布置那些与一个固定网格相关的元素