[学习交流] CSS重要知识点笔记

一：选择器的权重和优先级CSS 选择器有很多，不同的选择器的权重和优先级不一样，对于一个元素，如果存在多个选择器，那么就需要根据权重来计算其优先级。

权重分为四级，分别是：

代表内联样式，如 style="xxx"，权重为 1000
代表 ID 选择器，如#content，权重为 100
代表类、伪类，如 .content、:hover，权重为 10
代表标签选择器，如 div、p，权重为 1

需要注意的是：通用选择器（*）的权重为 0 。!important 权重为最高。权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。

二：盒模型
所谓的盒子模型就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
它由内容（content）、边框（border）、内边距（padding）和外边距（margin）组成。

盒模型的宽度计算方式：

1.固定宽度的盒子

[HTML] 纯文本查看 复制代码

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">
    黑马程序员杭州前端基础班第一期
</div>

以上代码放在浏览器中运行，可以看到文字内容的宽度刚好是 300px，也就是我们设置的宽度。

因此，在盒模型中，我们设置的宽度都是内容的宽度，不是整个盒子的宽度。而整个盒子的实际宽度是：内容宽度 + padding 宽度 + border 宽度。我们任意改变其中一个值，都会导致盒子宽度的改变。

2.充满父容器的盒子

默认情况下，div 是 display: block;，如果不给它设置宽度，那么它的宽度会充满整个父盒子。这时它的整个宽度就包括内容宽度 + padding 宽度 + border 宽度 + margin 宽度。

如果父盒子宽度不变，我们手动增大 margin、border 和 padding 中的任意一项，都会导致内容宽度的减少。

3.包裹内容的盒子
这种情况下比较简单，内容的宽度按照内容计算，盒子的宽度将在内容宽度的基础上，再计算 padding 宽度 + brder宽度 + margin 宽度。

4.相邻的两个盒子垂直外边距重叠
如下图所示，两个 div 的 margin 是 20px，那么两个 div 之间纵向的距离是多少呢？按照常理来说应该是 20 + 20 = 40，但实际结果仍然是 20px。因为纵向的 margin 是会重叠的，如果两个 div 的纵向 margin 不一样大的话，margin 大的会把小的“吃掉”。

解决方案：尽量只给一个盒子添加 margin 值。

5.嵌套块元素垂直外边距合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。如下图所示，图 1 为合并前的效果，图 2 为合并后的效果。

解决方案：给父元素设置 border-top 或者 padding-top 或者 overflow:hidden;。

三：浮动 float
float 被设计出来的初衷是用于文字环绕效果，即一个图片一段文字，图片 float:left 之后，文字会环绕图片。但是，后来大家发现结合 float + div 可以实现之前通过 table 实现的网页布局，因此就被 “误用” 于网页布局了。

为什么 float 会导致父元素塌陷？

1.破坏性
float 的破坏性 —— float 破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象发生是因为被设置了 float 的元素会脱离文档流。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。

2.包裹性
包裹性也是 float 的一个非常重要的特性，大家用 float 时一定要熟知这一特性。我们先来看一个例子：

如上图，普通的 div 如果没有设置宽度，它会撑满整个屏幕。而如果给 div 增加 float:left 之后，它突然变得紧凑了，宽度发生了变化，把内容中的三个字包裹了——这就是包裹性。为 div 设置了 float 之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。

注意，此时 div 虽然体现了包裹性，但是它的 display 样式是没有变化的，还是 display:block。
float 为什么要具有包裹性？其实答案还是得从 float 的设计初衷来寻找，float 是被设计用于实现文字环绕效果的。文字环绕图片比较好理解，但是如果想要让文字环绕一个 div 呢？此时 div 不被 “包裹” 起来的话，就无法实现环绕效果了。

3.清空格
float 还有一个大家可能不是很熟悉的特性——清空格。请看下面例子：

在没有添加 float:left 之前，正常的 img 中间是会有空格的，因为多个 img 标签会换行，而浏览器识别换行为空格，这也是很正常的。在添加了 float:left 之后，就使得 img 之间没有了空格，4 个 img 紧紧挨着。
如果大家之前没注意，现在想想之前写过的程序，是不是有这个特性。为什么 float 适合用于网页排版？就是因为 float 排版出来的网页严丝合缝，中间连个苍蝇都飞不进去。
“清空格” 这一特性的根本原因是 float 会导致节点脱离文档流结构。它都不属于文档流结构了，那么它身边的什么换行、空格就都和它没了关系，它就尽量往一边靠拢，能靠多近就靠多近，这就是清空格的本质。

清除浮动的方法
清楚浮动的本质是为了解决父盒子因为子盒子浮动而引起的内部高度为0的问题。清楚浮动之后，父盒子会根据浮动的子盒子自动检测高度。父盒子有了高度，就不会影响下面的标准流了。

1.额外标签法（隔墙法）
在浮动元素末尾添加一个空标签，并给他设置 style 属性 clear: both;
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。

2.父级添加overflow属性方法
可以给父级添加：overflow 为 hidden | auto | scroll 都可以实现。
优点：代码简洁
缺点：内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。

3.使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了。使用方法如下：

[CSS] 纯文本查看 复制代码

.clearfix:after {  
     content: ""; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
}   

 .clearfix {*zoom: 1;}   /* IE6、7 专用 */

优点：符合闭合浮动思想，结构语义化正确。
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

4.使用双伪元素清除浮动
使用方法：

[CSS] 纯文本查看 复制代码

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点：代码更简洁。
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

四：定位 position
position 用于网页元素的定位，可设置 static/relative/absolute/fixed 这些值，其中 static 是默认值。

1.relative
相对定位 relative 可以用一个例子很轻松的演示出来。例如我们写 4 个 ，出来的样子大家不用看也能知道。

然后我们给第三个 设置 position:relative 并给定 top 和 left 值，看这个 有什么变化。

通过浏览器运行的结果，我们得到两个信息：

1）第三个 发生了位置变化，分别向右向下移动了 10px
2）其他的三个 位置没有发生变化

可见，relative 会导致自身位置的相对变化，而不会影响其他元素的位置、大小。这是 relative 的要点之一。还有第二个要点，就是 relative 产生一个新的定位上下文。

2.absolute
还是刚才的案例，我们把第三个 改为 position:absolute; ，暂时注释掉 top 和 left 值，看看会发生什么变化。

从浏览器运行的结果中，我们能看出几点信息：

1）absolute 元素脱离了文档结构。和 relative 不同，其他三个元素的位置重新排列了。只要元素脱离文档结构，它就会产生破坏性，导致父元素坍塌。（float 元素也会脱离文档结构。）

2）absolute 元素具有 “包裹性”。之前 的宽度是撑满整个屏幕的，而此时 的宽度刚好是内容的宽度。

3）absolute 元素具有 “跟随性”。虽然 absolute 元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实地待在它原本的位置，因为我们此时没有设置 top、left 的值

4）absolute 元素会悬浮在页面上方，会遮挡住下方的页面内容

最后，通过给 absolute 元素设置 top、left 值，可自定义其内容，这个都是平时比较常用的。这里需要注意的是，设置了 top、left 值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。

3.fixed
其实 fixed 和 absolute 是一样的，唯一的区别在于 :absolute 元素是根据最近的定位上下文确定位置，而 fixed 根据 window 确定位置。

那么，relative、absolute 和 fixed 分别依据谁来定位？
relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

fixed 元素的定位是相对于 window 边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

absolute 的定位相对于前两者要复杂许多。如果 absolute 设置了 top、left，浏览器会根据什么区确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了 position:relative/absolute/fixed 的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。

五：如何实现居中对齐

1.如何实现水平居中
行内元素用 text-align:center; 即可。
块级元素用 margin: 0 auto; 或者 margin: auto; 都可以实现。
绝对定位元素可结合 left 和 margin 实现，但是必须知道宽度，代码如下：

[CSS] 纯文本查看 复制代码

.container {
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

2.如何实现垂直居中

行内元素可以设置 line-height 的值等于 height 值来实现。

绝对定位元素，可结合 left 和 margin 实现，但是必须知道尺寸。代码如下：

[CSS] 纯文本查看 复制代码

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

优点：兼容性好。
缺点：需要提前知道尺寸。

绝对定位第二种垂直居中可结合 transform 实现。代码如下：

[CSS] 纯文本查看 复制代码

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

优点：不需要提前知道尺寸。
缺点：兼容性不好，不支持低版本浏览器。

绝对定位第三种实现垂直居中的方法，结合 margin: auto ，不需要提前知道尺寸，兼容性好。代码如下：

[CSS] 纯文本查看 复制代码

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

以上为 CSS 部分重要知识点，也是面试常考问题，在此分享给大家，希望能够帮助大家加深对于这些知识点的理解。

黑马安好 · 黑马安好

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] CSS重要知识点笔记

1 个回复