CSS 知识点整理（一）

时间：2019-03-01 19:25:33 收藏：0 阅读：166

本文是我整理的关于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: 0;
    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属性选择一个开始值

参考资料：

原文：https://www.cnblogs.com/zhenqichai/p/frontend-css-key-points.html