CSS 知识点整理

本文是我整理的关于CSS的部分基础知识点，适合正在准备前端工作面试的人做简单回顾。

1. 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。^[1]

2. 隐藏元素 - display:none或visibility:hidden

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。^[1]

3. 块和内联元素

利用CSS我们可以摆脱HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
dipslay:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性^[2]

4. Position

position 属性的五个值：

static -- HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
relative -- 相对定位元素的定位是相对其正常位置。相对定位元素经常被用来作为绝对定位元素的容器块。注意relative最小化使用原则。（具体解释参考https://segmentfault.com/a/1190000014877050）
fixed -- 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
absolute -- 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
sticky -- 粘性定位的元素是依赖于用户的滚动，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。(点击查看实例) ^[1]

5. Overflow

overflow 属性的五个值：

visible -- 默认值。内容不会被修剪，会呈现在元素框之外。
hidden -- 内容会被修剪，并且其余内容是不可见的。
scroll -- 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto -- 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit -- 规则应该从父元素继承 overflow 属性的值。^[1]

6. Float

Float 会使元素向左或向右移动，其周围的元素也会重新排列。Float 往往是用于图像，但它在布局时一样非常有用。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

6.1 彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

6.2 清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。^[1]

例如：

CSS 代码：

.thumbnail

{

    float:left;

    width:110px;

    height:90px;

    margin:5px;

    background: silver;

}

.text_line

{

    clear:both;

    margin-bottom:2px;

}

HTML 代码：

<div class="thumbnail"></div>

<div class="thumbnail"></div>

<div class="thumbnail"></div>

<div class="thumbnail"></div>

<h3 class="text_line">-----这里清除浮动-----</h3>

<div class="thumbnail"></div>

<div class="thumbnail"></div>

<div class="thumbnail"></div>

<div class="thumbnail"></div>

效果如下：

-----这里清除浮动-----

7. 水平居中

7.1 margin:auto;

设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

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

7.2 text-align: center;

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

8. 垂直居中

8.1 利用padding

比如，如果想要一段文字在一个div中垂直居中，可以设置这个模块上下padding相同。

8.2 line-height

可以设置 line-height 属性值和 height 属性值相等来使 div 元素垂直居中。^[1]

关键代码：

.center {

    line-height: 200px;

    height: 200px;

}

/* 如果文本有多行，添加以下代码: */

.center p {

    line-height: 1.5;

    display: inline-block;

    vertical-align: middle;

}

8.3 postion 和 transform

关键代码：

.center {

    height: 200px;

    position: relative;

    border: 3px solid green;

}

.center p {

    margin:;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

9. 伪类/伪元素

a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。^[1]

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

10. CSS 组合选择符

在 CSS3 中包含了四种组合方式:

后代选择器 -- 以空格分隔 (div p)
子元素选择器 -- 以大于号分隔 (div>p)
相邻兄弟选择器 -- 以加号分隔 (div+p)，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
后续兄弟选择器 -- 以破折号分隔 (div~p)，后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。^[1]

11. CSS 媒体类型

@media 规则允许在相同样式表为不同媒体设置不同的样式。^[1]

媒体类型	描述
all	用于所有的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

12. CSS 属性选择器

注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。^[1]

下面是包含标题（title）的所有元素的例子：

[title]{ }

下面是标题 title='example' 的所有元素的例子:

[title=example] {}

下面是包含hello的title属性的元素的例子，使用（~）分隔属性和值:

[title~=hello] { }

下面是包含en的lang属性的元素样式的例子，适用于en、en-us、en-gb等，使用（|）分隔属性和值:

[lang|=en] { }

参考资料：