CSS总结

1：CSS是什么？是编程语言吗？

CSS（Cascading StyleSheet，可译为“层叠样式表”）是一组格式设置规则，用来表现HTML或XML等文件样式，样式定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间，极大提高工作效率。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。多个样式定义可层叠为一。它不是编程语言。

2：CSS的作用是什么？

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

3：如何使用CSS？

插入样式表的方法有三种:

外部样式表(External style sheet)：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。

内部样式表(Internal style sheet)：当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

内联样式(Inline style)：当样式仅需要在一个元素上应用一次时要使用内联样式。

4：什么是多重样式？

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

5：多重样式的优先级是？

内联样式）Inline style > （内部样式）Internal

style sheet >（外部样式）External style sheet > 浏览器默认样式

6：CSS的选择器有哪些？

id 选择器， class 选择器，标签选择器，属性选择器，包含选择器，子选择器，兄弟选择器，全局选择器，相邻选择器，继承选择器，组合选择器，伪类选择器，分组选择器，嵌套选择器

7：CSS的常用属性有哪些？

背景属性；文本属性；字体属性；链接属性；列表属性；表格属性；盒子模型属性：内边距属性，边框属性，轮廓属性，外边距属性；尺寸属性；display属性；visibility属性，定位属性；overflow属性； Float(浮动)属性；clear属性；对齐属性；

8：什么是盒子模型？

css ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

在CSS中，盒子模型 又称框模型(Box Model)，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。如图：

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

9：媒体类型的作用是？

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 

10：定位的方式有哪几种？

CSS中定位分为以下几种：

static（默认）： 这是页面元素position属性的默认值，元素将按照浏览器对网页中元素的排列规则排列。

relative（相对定位）：相对自身原来位置的定位！如果以前没有设置position或者position值为static，那么设置relative后，元素的left，right，top，bottom的位置参照自身原来的位置进行移动。

absolute（绝对定位）：这个大家应该都很了解，即脱离文档流的定位。定位参照物为自己的父级，但是自己的父级必须拥有position属性（父级position属性为static也不行，必须为absolute，relative，fixed中的一个）。如果自己的父级没有设置position属性，会一直向上寻找有position属性且不为static的的祖先元素，直到body元素。

fixed（固定定位）：这个属性是元素以相对浏览器窗口为基准进行定位的，无论怎样移动你的滑动条，它都会固定在相对于浏览器窗口的固定位置，另外要注意，它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top，bottom，left，right也是相对于浏览器窗口而言的。

sticky 定位：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

11：伪类和伪元素的区别

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息.伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。伪类用单冒号:表示；而伪元素用双冒号::表示。

12：CSS3添加了哪些特性？

1.选择器2.框模型3.背景和边框4.文本效果5.2D/3D 转换6.动画7.多列布局8.用户界面

13：谈谈弹性盒子模型和之前盒子模型的区别？

CSS3弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS 盒子模型(Box Model)：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

14：如何做多媒体查询？

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法:

@media mediatype and|not|only (mediafeature) {

CSS-Code;

}