《CSS权威指南》基础复习+查漏补缺 - 野兽'

前几天被朋友问到几个CSS问题，讲道理么，接触CSS是从大一开始的，也算有3年半了，总是觉得自己对css算是熟悉的了。然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司，事情不算多，于是拿起《CSS权威指南》进行"基础复习"+"查漏补缺"，本篇文章主要是总结了些自己认为CSS中值的注意的几个知识点(本文知识点仅限本书范围内，若要讲CSS全部样式，那本兽还是选择慢慢懵逼去~)。

选择器

这里要说明的是类选择器的嵌套选择与多类选择器的差别，顺便捎上了一级子元素的选择

类选择器基本写法：

<span style="color: #800000;">.your-class</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">...</span><span style="color: #008000;">*/</span>}

类选择器的嵌套选择写法：

<span style="color: #800000;">.first-class .second-class</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">...</span><span style="color: #008000;">*/</span>}

多类选择器基本写法：

<span style="color: #800000;">.first-class.second-class</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">...</span><span style="color: #008000;">*/</span>}

一级子元素的选择写法：

<span style="color: #800000;">.first-class > .second-class</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">...</span><span style="color: #008000;">*/</span>}

从代码看它们之间的区别：

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    .first-style.second-style</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> blueviolet</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .first-style .third-style</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> font-style</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> italic</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .first-style > .fourth-style</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> font-weight</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> bold</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>    
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="first-style second-style"</span><span style="color: #0000ff;">></span>HELLO<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="first-style third-style"</span><span style="color: #0000ff;">></span>hello<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="first-style"</span><span style="color: #0000ff;">><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="second-style"</span><span style="color: #0000ff;">></span>HELLO<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="first-style"</span><span style="color: #0000ff;">><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="third-style"</span><span style="color: #0000ff;">></span>hello<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="first-style"</span><span style="color: #0000ff;">><span style="color: #800000;">div</span><span style="color: #0000ff;">><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="third-style"</span><span style="color: #0000ff;">></span>Hello World<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="first-style"</span><span style="color: #0000ff;">><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="fourth-style"</span><span style="color: #0000ff;">></span>Hello World<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="first-style"</span><span style="color: #0000ff;">><span style="color: #800000;">div</span><span style="color: #0000ff;">><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="fourth-style"</span><span style="color: #0000ff;">></span>Hello World<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

得出结论：

· 类选择器的嵌套选择，选择的是first-style类下的所有包含second-style类的子元素(不论几级子元素)

· 一级子元素的选择，选择的是first-style下的一级子元素中包含second-style类的元素，再往里层嵌套的元素不算

· 多类选择器的选择，选择同时包含first-style和second-style类的元素

样式优先级

样式的优先级由选择器本身的组件确定，我们将优先值表述为4个部分，如：0.0.0.0

注意：前一部分的优先级大于后一部分的优先级，请无视他们的值之间的大小。如：0.0.1.0 大于 0.0.0.12，规则以此类推。

选择器的具体优先级如下：

· 对于选择器中给定的各个ID属性值，加 0.1.0.0;

· 对于选择器中给定的各个类属性值、属性选择或伪类，加 0.0.1.0;

· 对于选择器中给定的各个元素和伪元素，加 0.0.0.1;

· 结合符和通配符选择对优先级没有任何贡献。

用代码说明优先级：

<span style="color: #800000;">div</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> black</span>} <span style="color: #008000;">/*</span><span style="color: #008000;"> 0.0.0.1 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
div p</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">black</span>} <span style="color: #008000;">/*</span><span style="color: #008000;"> 0.0.0.2 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.my-div</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">black</span>} <span style="color: #008000;">/*</span><span style="color: #008000;"> 0.0.1.0 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
div.my-div</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> black</span>} <span style="color: #008000;">/*</span><span style="color: #008000;"> 0.0.1.1 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.my-div .my-p</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> black</span>} <span style="color: #008000;">/*</span><span style="color: #008000;"> 0.0.2.0 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.my-div p.my-p</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> black</span>} <span style="color: #008000;">/*</span><span style="color: #008000;"> 0.0.2.1 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
div.my-div p.my-p</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> black</span>} <span style="color: #008000;">/*</span><span style="color: #008000;"> 0.0.2.2 </span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
... 以此类推
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
#div-id</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> black</span>} <span style="color: #008000;">/*</span><span style="color: #008000;">0.1.0.0 </span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">
... 继续类推
</span><span style="color: #008000;">*/</span>

那么有人会注意到，在0.0.0.0的4个部分中，第一个始终没使用到。它是怎么用的呢？

一般来说，第一个0是为内联样式声明保留的，它比其他声明的特殊性都高。
如：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="/*...*/"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!-- </span><span style="color: #008000;">1.0.0.0 --></span></span>

本节还存在"!important"问题

"!important"放在样式声明之后，即分号之前。并且它没有特殊的优先级值。那么它的优先如何处理呢？看以下代码：

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
　　.impt</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> black !important</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="impt"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="color:red"</span><span style="color: #0000ff;">></span>hello world<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

得出结论：
"!important"声明的重要性超出了所有其他声明。

CSS正常流及元素

正常流

这里指西方语言文本从左向右、从上向下显示，也是我们熟悉的传统HTML文档的文本布局。要让一个元素不在正常流中，唯一的方法就是使之成为浮动/定位元素。

非替换元素

如果元素内容包含在文档中，则称之为非替换元素。如：

替换元素

指用作为其他内容占位符的一个元素。如：、

块级元素

在正常流中，会在其框之前或之后生成"换行"，通过声明"display:block"可以让元素生成块级框。

行内元素

这些元素不会在之前或之后生成"行分隔符"，它们是块级元素的后代，通过"display:inline"可以让元素生成一个行内框。

margin 外边距

1.外边距垂直合并

垂直相邻的外边距会进行合并。两个外边距中较小的一个会被较大的一个合并(你也可以理解为"重叠")。

具体效果看例子：

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    .first-div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .second-div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="first-div"</span><span style="color: #0000ff;">></span>this is div-1<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="second-div"</span><span style="color: #0000ff;">></span>this is div-2<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

2.margin样式顺序

<span style="color: #800000;">.your-class</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"><top> <right> <bottom> <left> </left></bottom></right></top></span>}

顺序可以这样记：从12点钟开始，顺时针一圈。

缩写规则：

· 如果缺少左外边距的值，则使用右外边距的值

· 如果缺少下外边距的值，则使用上外边距的值

· 如果缺少右外边距的值，则使用上外边距的值

缩写代码：

<span style="color: #800000;">.first-margin</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 50px</span>;} <span style="color: #008000;">/*</span><span style="color: #008000;"> 50px 50px 50px 50px </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.second-margin</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 50px 20px </span>;} <span style="color: #008000;">/*</span><span style="color: #008000;"> 50px 20px 50px 20px </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.third-margin</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 50px 30px 10px</span>;} <span style="color: #008000;">/*</span><span style="color: #008000;"> 50px 30px 10px 30px </span><span style="color: #008000;">*/</span>

3.margin应用于行内元素的效果

当margin应用于行内元素，则对水平面有影响，对垂直面无任何影响。

效果代码：

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
　　.mar-strong</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px 0</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mar-strong"</span><span style="color: #0000ff;">></span>hello world<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> </span></span></span>

既然这里提到margin与行内元素之间的关系，我们也顺便看下padding与行内元素的关系吧。

当padding应用于行内元素，则对水平面有影响，对垂直面无影响(在没有设置background的情况下)。

看例子：

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
　　.mar-strong</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span><span style="color: #0000ff;"><span style="color: #800000;">strong </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mar-strong"</span><span style="color: #0000ff;">></span>hello world<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #000000;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span></span>

以上例子可以去掉padding或者background看看布局上有什么影响来验证。请慎重处理这三者之间的关系哦。

background-attachment

这里稍微提下这个属性。

background: scroll || fixed || inherit

初始值：scroll

看效果代码：

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
　　.div-bg</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3000px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
　　.bg-attachment</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> background-image</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url(img/1.jpg)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background-attachment</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> fixed</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background-repeat</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> no-repeat</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background-position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-bg bg-attachment"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

从上面例子可以看到，当滚动页面的时候，背景图始终居中跟随滚动。

浮动与清除

元素浮动

· CSS允许所有元素浮动

· 浮动元素周围外边距不会合并

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    .div-float</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-float"</span><span style="color: #0000ff;">></span>HELLO WORLD<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-float"</span><span style="color: #0000ff;">></span>hello world<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

· 浮动元素会生成一个块级框，不论这个元素本身是什么。

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    .span</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .span-float</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>    
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="span span-float"</span><span style="color: #0000ff;">></span>HELLO WORLD<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="span span-float"</span><span style="color: #0000ff;">></span>hello world<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span></span></span></span>

清除浮动

清除浮动可由clear属性完成。

clear: left || right || both || none || inherit

初始值: none

这里我们主要说明下left、right和both。分别是清除左边浮动元素(左边不让你浮动)、清除右边浮动元素(右边不让你浮动)和清除左右两边的浮动(两边都不让存在浮动元素)。

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    .div-mar</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div-red</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div-yellow</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> yellow</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

    .div-float-left</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div-float-right</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> right</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

    .div-clear-both</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> clear</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> both</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div-clear-left</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> clear</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div-clear-right</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> clear</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> right</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-mar div-red div-float-left"</span><span style="color: #0000ff;">></span>HELLO WORLD<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-mar div-yellow div-float-left div-clear-right"</span><span style="color: #0000ff;">></span>Hello World<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

可以对以上[class*="div-red"]元素进行左右浮动，再用[class*="div-yellow"]元素进行清除浮动。

元素定位

元素的定位可以通过使用position属性。

positon: static || relative || absolute || fixed || inherit

初始值： static

static(静态/正常定位)

正常生成元素框。

relative(相对定位)

元素偏移某个距离，元素仍保持其未定位之前的形状。

absolute(绝对定位)

元素从文档流完全删除，并相对其包含块定位。

fixed(固定定位)

元素框的表现类似于absolute，不过其包含块是视窗本身。

元素relative/absolute/fixed定位的同时，会为其后代元素建立一个包含块。

什么是包含块？

在HTML中，根元素就是html元素。

· "根元素"的包含块由用户代理建立

· 对于一个非根元素，如果其position值为relative或static，则包含块由最近的块级框、表单元格或行内块祖先框的内容边界构成

· 对于一个非根元素，如果其position值为absolute，包含块设置为最近的position值不是static的祖先元素

"visibility:hidden"与"display:none"的区别

当我们设置一个元素visibility为hidden的时候，元素处于不可见状态，但元素仍然会影响到文档的布局(元素仍存在，只是看不见)。

当我们设置一个元素display为none的时候，元素不显示，并从文档流中删除(元素不存在，可用于渲染优化)。 

"content" 生成内容

使用content属性插入内容或属性值。

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    .div-content:before</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> content</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> "[ "attr(value)" ] "</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div-content:after</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">content</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">" hello world"</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-content"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="H"</span><span style="color: #0000ff;">></span>ello World<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

附上在写的时候突然想到的一个问题

在不同元素内的子元素使用z-index的时候受不受父(祖先)元素之间关系的影响？

<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    .div-out</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> black</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">border-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid white</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div-index-1</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .div-index-2</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> yellow</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>    
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-out"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-index-1"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>    
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-out"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div-index-2"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

得出结论：不受影响。

新手文章，有问题可交流讨论，不喜勿喷~~~ 觉得本文还行的就小手点个赞给个鼓励吧~