首页 > > 网页制作 > css >

CSS概念【记录】

2019-01-08 08:22:35来源：博客园阅读 ()

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+ */ <link rel="stylesheet" href="global.css" media="screen and (max-width:1024px)">

@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将两者分开，则该元素的上下外边距会折叠