CSS基础笔记及经典面试题

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_43645678/article/details/93380452

1. CSS概述

1. CSS 指层叠样式表 (Cascading Style Sheets)
2. 样式定义如何显示 HTML 元素
3. 样式通常存储在样式表中
4. 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5. 外部样式表可以极大提高工作效率
6. 外部样式表通常存储在 CSS 文件中
7. 多个样式定义可层叠为一

2. CSS语法

结构：选择器 { 属性：值； 属性：值 }

注意：

1. 值的不同写法和单位。
2. 如果值为若干单词，则要给值加引号。
3. 如果要定义不止一个声明，则需要用分号将每个声明分开。
4. 空格和大小写不影响CSS样式。
5. 用逗号将需要分组的选择器分开，被分组的选择器可以分享相同的声明
6. 子元素从父元素继承属性

3. 选择器

1. 元素（类型）选择器

1. 文档的元素就是最基本的选择器。
2. 如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，
   比如 p、h1、甚至可以是 html 本身。

<style>
	html {color:black;}
	h1 {color:blue;}
	h2 {color:silver;}
</style>

2. 通配符选择器

该选择器可以与任何元素匹配，就像是一个通配符。

* {color:red;}

3. 选择器分组

1. 通过分组，创作者可将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
2. 可以将任意多个选择器分组在一起，对此没有任何限制。

h2, p {color:gray;}

4. 声明分组

1. 对声明分组，一定要在各声明的最后使用分号，因为浏览器会忽略样式表中的空白符。
2. 与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，
   也更易维护。

h1 {
	  font: 28px Verdana;
	  color: blue;
	  background: red;
  }

5. 派生选择器

1. 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
2. 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

li strong {
    font-style: italic;
    font-weight: normal;
  }

6. id 选择器

1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
2. id 选择器以 “#” 来定义。
3. id 属性只能在每个 HTML 文档中出现一次。
4. 在现代布局中，id 选择器常常用于建立派生选择器。
5. id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用。

<p id="intro">This is a paragraph of introduction.</p>

.important.warning {background:silver;}

类选择器与id选择器的区别

1. 只能在文档中使用一次：在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
2. 不能使用 ID 词列表：ID 选择器不能结合用，因为 ID 属性不许有以空格分隔的词列表。
3. ID 能包含更多含义：可以独立于元素来选择 ID。
4. 区分大小写：类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。
   HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配

7. 类选择器

1. 类选择器允许以一种独立于文档元素的方式来指定样式。
2. 在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。
3. 为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。
4. 在 CSS 中，类选择器以一个点号显示。
5. 类名的第一个字符不能使用数字。

.important {color:red;}

8. 多类选择器

1. 在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。
2. 把两个类选择器链接在一起，仅可选择同时包含这些类名的元素（类名的顺序不限）。
3. 如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
4. 在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

<p class="important warning">
	This paragraph is a very important warning.
</p>

.important.warning {background:silver;}

9. 属性选择器

1. 对带有指定属性的 HTML 元素设置样式。
2. 只有在规定 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。
3. 在 IE6 及更低的版本中，不支持属性选择。
4. 属性选择器在 XML 文档中很有用，因为 XML 语言针对元素和属性的用途
   指定元素名和属性名。

1. 简单属性选择

例：

a[href][title] {color:red;}

2. 根据具体属性值选择

注意：

1. 这种格式要求必须与属性值完全匹配。
2. 如果属性值包含用空格分隔的值列表，匹配就可能出问题。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

3. 根据部分属性值选择

1. 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
2. 如果忽略了波浪号，则说明需要完成完全值匹配。

p[class~="important"] {color: red;}

4. 特定属性选择类型

*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。

10. 后代选择器

后代选择器可以选择作为某元素后代的元素。

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

h1 em {color:red;}
h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。

11. 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

h1 > strong {color:red;}
选择作为 h1 元素子元素的所有 strong 元素

12. 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素 

13. CSS伪类

CSS 伪类用于向某些选择器添加特殊的效果。

伪类的语法：

selector : pseudo-class {property: value}

CSS 类与伪类搭配使用：

selector.class : pseudo-class {property: value}

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

1. 锚伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

1. 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2. 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
3. 伪类名称对大小写不敏感。

2. 伪类与 CSS 类

<a class="red" href="css_syntax.asp">CSS Syntax</a>

a.red : visited {color: #FF0000}

3. :first-child 伪类

1. 可以使用 :first-child 伪类来选择元素的第一个子元素
2. 必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

<div>
	<p>These are the necessary steps:</p>
	<ul>
		<li>Intert Key</li>
		<li>Turn key <strong>clockwise</strong></li>
		<li>Push accelerator</li>
	</ul>
	<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。
第二个规则将作为某个元素第一个子元素的所有 li 元素变成大写。

4. :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body>

q:lang(no)
   {
   		quotes: "~" "~"
   }
:lang 类为属性值为 no 的 q 元素定义引号的类型

5. :first-line 伪元素

"first-line" 伪元素只能用于块级元素。
"first-line" 伪元素用于向文本的首行设置特殊样式。

p:first-line
  {
	  color:#ff0000;
	  font-variant:small-caps;
  }
浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化

下面的属性可应用于 “first-line” 伪元素：
background
color clear
font
letter-spacing line-height
text-decoration text-transform
vertical-align
word-spacing

6. :first-letter 伪元素

"first-letter" 伪元素只能用于块级元素。
"first-letter" 伪元素用于向文本的首字母设置特殊样式

p:first-letter
  {
	  color:#ff0000;
	  font-size:xx-large;
  }

下面的属性可应用于 “first-letter” 伪元素：
background border
color clear
font float
line-height
margin
padding
text-decoration text-transform
vertical-align (仅当 float 为 none 时)

7. :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容

h1:before
  {
  	content:url(logo.gif);
  }

8. :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容

h1:after
  {
  	content:url(logo.gif);
  }

4. CSS样式插入

1. 外部样式表

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

2. 内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3. 内联样式

<p style="color: sienna; margin-left: 20px">
	This is a paragraph
</p>

4. 多重样式

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

5. CSS样式

1. 背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

样式	属性值	描述
background-attachment	scroll, fixed	声明图像相对于可视区是固定的
background-color	red, blue…	设置背景色
background-image	none, url	设置一个背景图像
background-position	top, bottom, left, right, center, 100px, 50%	改变图像在背景中的位置
background-repeat	repeat-x, repeat-y, no-repeat	对背景图像进行平铺

css3 新背景属性

属性	描述
background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

2. 文本

CSS 文本属性可定义文本的外观。

样式	属性值	描述
text-align	left, right, center, justify, inherit	文本行互相之间的对齐方式
text-decoration	none, underline, overline, line-through, blink	文本装饰
line-height	100px	设置行高
text-indent	5em, -5em, 20%…	实现文本缩进
word-spacing	normal, url	改变字（单词）之间的标准间隔
letter-spacing	top, bottom, left, right, center, 100px, 50%	字符或字母之间的间隔
text-shadow	h-shadow, v-shadow, blur, color	设置文本阴影
text-transform	none, uppercase, lowercase, capitalize	处理文本的大小写
direction	ltr, rtl	块级元素中文本的书写方向, 表中列布局的方向, 内容水平填充其元素框的方向, 两端对齐元 素中最后一行的位置。
white-space	normal, pre, pre-wrap, pre-line, nowrap	用户代理对源文档中的空格、换行和 tab 字符的处理

3. 字体

CSS 字体属性定义文本的字体系列

样式	属性值	描述
font-family	Serif, Sans-serif, Monospace, Cursive, Fantasy	设置字体系列
font-size	small, medium, large, length, %, inherit	设置字体的尺寸
font-style	normal, italic, oblique, inherit	设置字体风格
font-variant	normal, small-caps, inherit	设定小型大写字母
font-weight	normal, bold, bolder, lighter, 200, inherit	设置字体的粗细

4. 链接

我们能够以不同的方法为链接设置样式。

状态	描述
a:link	普通的、未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标指针位于链接的上方
a:active	链接被点击的时刻

5. 列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

属性	描述
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

6. 表格

CSS 表格属性可以帮助您极大地改善表格的外观。
CSS Table 属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

7. 轮廓

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

属性	描述
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式。。
outline-width	设置轮廓的宽度。

6. CSS 框模型

1. CSS 框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

1. 背景应用于由内容和内边距、边框组成的区域。
2. 内边距、边框和外边距都是可选的，默认值是零。
3. 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
4. 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
5. 外边距可以是负值，而且在很多情况下都要使用负值的外边距。

2. CSS 内边距

CSS padding 属性定义元素边框与元素内容之间的空白区域。

1. padding 属性接受长度值或百分比值，但不允许使用负值。
2. 上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，
   而不是相对于高度。

属性	描述
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

3. CSS 边框

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

注意：

1. 如果要定义单边样式，必须把单边属性放在简写属性之后。
   因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。
2. 如果希望显示某种边框，就必须设置边框样式。
3. 默认的边框颜色是元素本身的前景色。
   如果没有为边框声明颜色，它将与元素的文本颜色相同。
4. 指定边框宽度：
   1. 长度值，比如 2px 或 0.1em；
   2. 3 个关键字, thin 、medium（默认值） 和 thick。

属性	描述
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-color	设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-width	用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-bottom	用于把下边框的所有属性设置到一个声明中。
border-left	用于把左边框的所有属性设置到一个声明中。
border-right	用于把右边框的所有属性设置到一个声明中。
border-top	用于把上边框的所有属性设置到一个声明中。

border-style 属性值

属性值	描述
none	默认无边框
dotted	定义一个点线边框
dashed	定义一个虚线边框
solid	定义实线边框
double	用于把左边框的所有属性设置到一个声明中。
groove	定义3D沟槽边框。效果取决于边框的颜色值
ridge	定义3D脊边框。效果取决于边框的颜色值
inset	定义一个3D的嵌入边框。效果取决于边框的颜色值
outset	定义一个3D突出边框。 效果取决于边框的颜色值

css3 新增边框

属性	描述
border-image	设置所有边框图像的速记属性。
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow	附加一个或多个下拉框的阴影

4. CSS 外边距

设置外边距的方法是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

1. margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
2. margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
3. 值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的。
4. margin 设置一个百分比数值，百分数是相对于父元素的 width 计算的。
5. margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。

属性	描述
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

5. CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

1. 当一个元素出现在另一个元素上面时，
   第一个元素的下外边距与第二个元素的上外边距会发生合并。
2. 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），
   它们的上和/或下外边距也会发生合并。
3. 假设有一个空元素，它有外边距，但是没有边框或填充。
   在这种情况下，上外边距与下外边距会发生合并.
4. 只有普通文档流中块框的垂直外边距才会发生外边距合并。
   行内框、浮动框或绝对定位之间的外边距不会合并。

7. CSS 定位和浮动

1. CSS定位概述

基本思想：
允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、
另一个元素甚至浏览器窗口本身的位置。

可以使用 display 属性改变生成的框的类型.

1. (将 display 属性设置为 block，可以让行内元素（比如 a 元素）表现得像块级元素一样)
2. (把 display 设置为 none，让生成元素没有框, 该框及内容不再显示，不占用文档空间。)
3. (把文本添到块级元素（比如 div）开头。即使没把文本定义为段落，它也当作段落对待)

CSS position 属性

属性值	描述
static	默认值。无定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative	生成相对定位的元素，相对于其正常位置进行定位。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。
inherit	规定应该从父元素继承 position 属性的值。

2. CSS相对定位

1. 相对定位元素的定位是相对其正常位置。
2. 移动相对定位元素，但它原本所占的空间不会改变。
3. 相对定位元素经常被用来作为绝对定位元素的容器块。

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

运行效果

3. CSS绝对定位

1. 绝对定位的元素位置相对于最近的已定位父元素,如果没有已定位的父元素,
   那么它位置相对于 html
2. absolute 定位使元素的位置与文档流无关，因此不占据空间。
3. absolute 定位的元素和其他元素重叠。

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box { 
   display: inline-block; 
   background: red; 
   width: 100px; 
   height: 100px; 
   float: left; 
   margin: 20px; 
   color: white; 
}

#three { 
   position: absolute; 
   top: 20px; 
   left: 20px; 
}

运行效果

4. CSS固定定位

1. 固定定位与绝对定位相似，但元素的包含块为 viewport 视口。
2. 该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
3. Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
4. Fixed定位使元素的位置与文档流无关，因此不占据空间。
5. Fixed定位的元素和其他元素重叠。

5. CSS粘性定位

1. 粘性定位可以被认为是相对定位和固定定位的混合。
2. 元素在跨越特定阈值前为相对定位，之后为固定定位。
3. 粘性定位常用于定位字母列表的头部元素。

6. CSS浮动

1. CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
2. 一个浮动元素尽量向左或向右移动，直到外边缘碰到包含框或另一个浮动框边框为止。
3. 浮动元素之前的元素将不会受到影响。浮动元素之后的元素将围绕它。
4. 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
5. 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
6. 假如一行上只有极少空间可供浮动元素,这元素会跳至下一行,
   这过程持续到某一行有足够空间为止。

属性值	描述
left	表明元素必须浮动在其所在的块容器左侧
right	表明元素必须浮动在其所在的块容器右侧
none	表明元素不进行浮动
inline-start	表明元素必须浮动在其所在块容器的开始一侧
inline-end	表明元素必须浮动在其所在块容器的结束一侧

7. CSS浮动问题

1. 背景不显示：
   由于浮动产生，如果父级设置CSS背景颜色或图片,父级不能被撑开,导致背景不能显示
2. 边框不撑开:
   如果父级设置CSS边框属性,由于子级使用float属性,产生浮动,父级不被撑开,
   导致边框不随内容被撑开.
3. margin padding设置值没正确显示:
   浮动导致父级子级之间设置css padding, margin属性值不正确
   特别是上下边的padding和margin不能正确显示。

8. CSS清除浮动

1. 对父级设置适合CSS高度
2. clear:both清除浮动：

• 新建样式选择器CSS命名为“.clear”,对应选择器样式为“clear:both”
  在父级“”结束前加此div引入“class=“clear””样式

3. 父级div定义 overflow:hidden:

• 因为overflow:hidden属性相当于是让父级紧贴内容，
  这样即可紧贴其对象内内容（包括使用float的div盒子），
  从而实现了清除浮动。
• 对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。
  优点是可以很少CSS代码即可解决浮动产生。

CSS clear 属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

8. CSS 对齐问题

1. 使用 margin 属性来水平居中对齐

可通过将左和右外边距设置为 “auto”，来对齐块元素。

.center
{
	margin-left:auto;
	margin-right:auto;
	width:70%;
	background-color:#b0e0e6;
}
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素

1. 除非已经声明 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
2. 如果宽度是 100%，则对齐没有效果。

2. 文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

.center {
    text-align: center;
    border: 3px solid green;
}

3. 图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中

img {
    display: block;
    margin: auto;
    width: 40%;
}

4. 使用 position 属性进行左和右对齐

绝对定位元素会被从正常流中删除，并且能够交叠元素。
当使用 position 属性时，请始终设置 !DOCTYPE 声明

.right
{
	position:absolute;
	right:0px;
	width:300px;
	background-color:#b0e0e6;
}

5. 使用 float 属性来进行左和右对齐

当使用 float 属性时，请始终设置 !DOCTYPE 声明

.right
{
	float:right;
	width:300px;
	background-color:#b0e0e6;
}

6. 使用 padding 垂直居中对齐

.center {
    padding: 70px 0;
    border: 3px solid green;
}

7. 使用 line-height 垂直居中对齐

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

8. 使用 position 和 transform 垂直居中对齐

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

9. CSS 尺寸属性

属性值	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

10. CSS 分类属性

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，
相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

属性值	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

display 属性

display 属性规定元素应该生成的框的类型。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
table	此元素会作为块级表格来显示，表格前后带有换行符。
inline-table	此元素会作为内联表格来显示，表格前后没有换行符。
inherit	规定应该从父元素继承 display 属性的值。

11. CSS3 2D转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

浏览器兼容问题

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。

2D Transform 方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。包含数学函数，旋转、缩放、移动及倾斜元素
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x,y)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

12. CSS3 3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

浏览器兼容问题

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

3D Transform 方法

函数	描述
matrix3d	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

13. CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

浏览器兼容问题

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 属性。
Chrome 25 以及更早的版本，需要前缀 -webkit-。

过渡属性

属性	描述
transition	用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

14. CSS3 动画

通过 CSS3，我们能够创建动画，这可在网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

@keyframes 规则用于创建动画。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

浏览器兼容问题

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

如何实现css3动画

1. 当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
2. 必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
3. 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
   1. 规定动画的名称
   2. 规定动画的时长

实例

@keyframes myfirst
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@keyframes myfirst
{
	from {background: red;}
	to {background: yellow;}
}

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

css3 动画属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode	规定对象动画时间之外的状态。

15. CSS3 多列

通过 CSS3，您能够创建多个列来对文本进行布局

浏览器兼容问题

Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本不支持多列属性。

多列属性

属性	描述
column-count	规定元素应该被分隔的列数。
column-fill	所有动画属性的简写属性，除了 animation-play-state 属性。
column-gap	规定列之间的间隔。
column-rule	设置所有 column-rule-* 属性的简写属性。
column-rule-color	规定列之间规则的颜色。
column-rule-style	规定列之间规则的样式。
column-rule-width	规定列之间规则的宽度。
column-span	规定元素应该横跨的列数。
column-width	规定列的宽度。
columns	规定设置 column-width 和 column-count 的简写属性。

16. CSS3 用户界面

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

浏览器兼容问题

Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-
所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。

用户界面属性

属性	描述
appearance	允许您将元素设置为标准用户界面元素的外观
box-sizing	允许您以确切的方式定义适应某个区域的具体内容。
icon	为创作者提供使用图标化等价物来设置元素样式的能力。
nav-down	规定在使用 arrow-down 导航键时向何处导航。
nav-index	设置元素的 tab 键控制次序。
nav-left	规定在使用 arrow-left 导航键时向何处导航。
nav-right	规定在使用 arrow-right 导航键时向何处导航。
nav-up	规定在使用 arrow-up 导航键时向何处导航。
outline-offset	对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
resize	规定是否可由用户对元素的尺寸进行调整。

CSS 经典面试题

1. 介绍一下 CSS 的盒子模型？

1. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
2. 两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 pading;

2. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？

• id 选择器（ # myid）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul < li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = “external”]）
• 伪类选择器（a: hover, li: nth – child）
• 可继承的样式： font-size font-family color, UL LI DL DD DT;
• 不可继承的样式：border padding margin width height ;
• 优先级就近原则，同权重情况下样式定义最近者为准;
• 载入样式以最后载入的定位为准;
• 优先级为: !important > id > class > tag important 比内联优先级高

3. 为什么要初始化 CSS 样式?

1. 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的。
2. 如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
3. 初始化样式会对 SEO 有一定的影响，但力求影响最小 的情况下初始化。
4. 最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

4. div+css 的布局较 table 布局有什么优点？

1. 改版的时候更方便 只要改 css 文件。
2. 页面加载速度更快、结构化清晰、页面显示简洁。
3. 表现与结构相分离。
4. 易于优化（seo）搜索引擎更友好，排名更容易靠前。

5. 什么是外边距重叠？重叠的结果是什么？

1. 外边距重叠就是 margin-collapse。
2. 在 CSS 中，相邻两个盒子（可能是兄弟关系也可能是祖先关系）的外边距
   可以结合成一个单独的外边距
3. 这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

6. rgba()和 opacity 的透明效果有什么异同？

同：rgba()和 opacity 都能实现透明效果

异：

1. opacity 作用于元素，以及元素内 的所有内容的透明度
2. rgba()作用于元素的颜色或背景色（设置 rgba 透明元素的子元素不会继承透明效果！）

7. position 的 absolute 与 fixed 共同点与不同点

1. static: 无特殊定位，对象遵循 HTML 定位规则

2. absolute: 将对象从文档流中拖出，用 left ， right ， top ， bottom 等属性做绝对定位。
   而其层叠通过 css z-index 属性定义。此时对象不具有边距，但仍有补白和边框

3. relative: 对象不可层叠, 但将依据 left, right, top, bottom 等属性在正常文档流中偏移位置

   A：共同点：

   • 改变行内元素的呈现方式，display 被置为 block；
   • 让元素脱离普通流，不占据空间；
   • 默认会覆盖到非定位元素上

   B 不同点：

   • absolute 的”根元素“是可以设置的，而 fixed 的”根元素“固定为浏览器窗口。
   • 当你滚动网页，fixed 元素与浏览器窗口之间的距离是不变的。

8. px 和 em 的区别。

px 和 em 都是长度单位。

区别：

1. px 的值是固定的，指定是多少就是多少，计算比较容易。
2. em 得值不是固定的，并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是 16px。
所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。

9. display:none 与 visibility:hidden 的区别是什么？

1. display : 隐藏对应的元素但不挤占该元素原来的空间。
2. visibility: 隐藏对应的元素并且挤占该元素原来的空间。

区别：

1. 使用 CSS display:none 属性后，HTML 元素(对象)的宽度、高度等属性值都将“丢失”
2. 使用 visibility:hidden 属性后，HTML 元素(对象)仅仅是在视觉上看不见(完全透明),
   而它所占据的空间位置仍然存在。

10. 简述 border:none 以及 border:0 的区别，并给出使用建议。

• border:none 表示边框样式无。 border:0 表示边框宽度为 0;
• 当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为 0.
• 当定义边框时,必须定义边框的显示样式.
• 因为边框默认样式为不显示 none,所以仅设置边框宽度,由于样式不存在,
  边框的宽度也自动被设置为0.

11. display: block;和 display: inline;的区别

block 元素特点：

1. 处于常规流中时，如果 width 没有设置，会自动填充满父容器
2. 可以应用 margin/padding
3. 在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4. 处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
5. 忽略 vertical-align

inline 元素特点 ：

1. 水平方向上根据 direction 依次布局
2. 不会在元素前后进行换行
3. 受 white-space 控制
4. margin/padding 在竖直方向上无效，水平方向上有效
5. width/height 属性对非替换行内元素无效，宽度由元素内容决定
6. 非替换行内元素的行框高 由 line-height 确定，
7. 替换行内元素的行框高由 height,margin,padding,border 决定
8. 浮动或绝对定位时会转换为 block
9. vertical-align 属性生效

12. PNG, GIF, JPG 的区别及如何选

GIF:

• 8 位像素，256 色
• 无损压缩
• 支持简单动画
• 支持 boolean 透明
• 适合简单动画

JPEG：

• 颜色限于 256
• 有损压缩
• 可控制压缩质量
• 不支持透明
• 适合照片

PNG：

• 有 PNG8 和 truecolor PNG
• PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画
• 适合图标、背景、按钮

13. 浮动元素引起的问题和解决办法？

浮动元素引起的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：

1. 使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决 2、3 问题。

2. 对于问题 1，添加如下样式，给父元素添加 clearfix 样式：  
	.clearfix:after{
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	} 
			
	.clearfix{
		display: inline-block;
	} /* for IE/Mac */ 

清除浮动的几种方法：

1. 额外标签法，<div style="clear:both;"></div>
  （缺点：不过这个办法会增加额外的标签 使 HTML 结构看起来不够简洁。）  
  
2. 使用 after 伪类  
	#parent:after{     
		content:".";     
		height:0;     
		visibility:hidden;     
		display:block;     
		clear:both; 
	} 
	
3. 浮动外部元素  

4. 设置 overflow 为 hidden 或者 auto 

14. 解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1. 使用空标签清除浮动。
   这种方法在所有浮动标签后添加一个空标签定义 css clear:both. 弊端是增加无意义标签
2. 使用 overflow。
   给包含浮动元素的父标签添加 css 属性 overflow:auto; zoom:1; zoom:1 用于兼容 IE6。
3. 使用 after 伪对象清除浮动。
   该方法只适用于非 IE 浏览器。
   该方法必须为需要清除浮动元素的伪对象设置 height:0，否则该元素比实际高若干像素

15. CSS优化、提高性能的方法有哪些？

1. 避免过度约束
2. 避免后代选择符
3. 避免链式选择符
4. 使用紧凑的语法
5. 避免不必要的命名空间
6. 避免不必要的重复
7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
8. 避免！important，可以选择其他选择器
9. 尽可能的精简规则，你可以合并不同类里的重复规则