-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ | - | - | - | - |
| - | - | - | - |
| - | - | - | - |
-
-```
-
-不能选择：
-
-```html
- 我是div的儿子
-
-
-```
-
-
-### 2.序选择器
-
-> IE8开始兼容；IE6、7都不兼容
-
-设置无序列表`-
-
-
-
我是div的重孙子
-
-
- `中的第一个`
- `为红色：
-
-```html
-
-```
-
-设置无序列表`
- `中的最后一个`
- `为红色：
-
-```css
- ul li:last-child{
- color:blue;
- }
-```
-
-序选择器还有更复杂的用法，以后再讲。
-
-由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
-
-```html
-
-
-
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
- 项目 -
我是一个标题
-我是一个段落
-我是一个段落
-我是一个段落
-我是一个标题
-我是一个段落
-我是一个段落
-我是一个段落
-我是一个标题
-我是一个段落
-我是一个段落
-我是一个段落
-我是一个标题
-``` - - -效果如下： - - - - -这种选择器作用不大。 diff --git a/02-CSS/04-CSS选择器：伪类.md b/02-CSS/04-CSS选择器：伪类.md new file mode 100644 index 0000000..7021f0a --- /dev/null +++ b/02-CSS/04-CSS选择器：伪类.md @@ -0,0 +1,371 @@ + + + + +### 4、伪类选择器（待定） + +对于``标签，其对应几种不同的状态： +- `link`：超链接点击之前 +- `visited`：超链接点击之后 +- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） +- `hover`：鼠标放到某个标签上的时候 +- `active`：点击某个标签没有松鼠标时 + +CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种： + - 静态伪类：**只能用于超链接** + - 动态伪类：针对所有标签都适用 + +下面来分别讲一下这两种伪类选择器。 + +**（1）静态伪类：** + +用于以下两个状态： + - `link`：超链接点击之前 + - `visited`：超链接点击之后 + + > **注意：上面这两个状态只能使用于超链接**。 + +举例： + +```html + +``` + +效果： + + + +上图中，超链接点击之前是红色，点击之后是绿色。 + + +问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？ +答： + +**`a{}`和`a:link{}`的区别：** + + - `a{}`定义的样式针对所有的超链接(包括锚点) + - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点) + +**（2）动态伪类: ** + +用于以下几种状态： + - `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点） + - `hover`：鼠标放到某个标签上的时候 + - `active`：点击某个标签没有松鼠标时 + + > 注意：上面这三种状态针适用于所有的标签。 + +举例： + +```html + +``` + +效果： + + + + +利用这个`hover`属性，我们同样对表格做一个样式的设置： +表格举例： + +```html + + + + + + + + +Document + + + + ++
+ + + +``` + +效果： + + + + + + + + + + + +## 一些 CSS3 选择器 + +> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。 + +PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。 + + + +### 浏览器的兼容性问题 + +IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下： + +- windows xp 操作系统安装的IE6 +- windows vista 操作系统安装的IE7 +- windows 7 操作系统安装的IE8 +- windows 8 操作系统安装的IE9 +- windows10 操作系统安装的edge + +浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。 + +为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接： + +-+ ++ + + + + ++ + + + + ++ + + + ++``` + +不能选择： + +```html +我是div的儿子
+++``` + + +### 2.序选择器 + +> IE8开始兼容；IE6、7都不兼容 + +设置无序列表`-
+
-
+
我是div的重孙子
+
+
- `中的第一个`
- `为红色：
+
+```html
+
+```
+
+设置无序列表`
- `中的最后一个`
- `为红色：
+
+```css
+ ul li:last-child{
+ color:blue;
+ }
+```
+
+序选择器还有更复杂的用法，以后再讲。
+
+由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
+
+```html
+
-
+
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
- 项目 +
我是一个标题
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个标题
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个标题
+我是一个段落
+我是一个段落
+我是一个段落
+我是一个标题
+``` + + +效果如下： + + + + +这种选择器作用不大。 + + +### css精灵 + diff --git a/02-CSS/03-CSS样式表的继承性和层叠性.md b/02-CSS/05-CSS样式表的继承性和层叠性.md similarity index 100% rename from 02-CSS/03-CSS样式表的继承性和层叠性.md rename to 02-CSS/05-CSS样式表的继承性和层叠性.md diff --git a/02-CSS/06-CSS属性：行高&超链接&background.md b/02-CSS/06-CSS属性：行高&超链接&background.md deleted file mode 100644 index 31dba16..0000000 --- a/02-CSS/06-CSS属性：行高&超链接&background.md +++ /dev/null @@ -1,475 +0,0 @@ - - -## 行高和字号 - -### 行高 - -CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 - - -如下图所示： - -20170808_2216.png - -上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。 - -文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么： - -20170808_2220.png - -为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。 - - -### 单行文本垂直居中 - -小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。 - -上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要设置盒子的padding。如下： - -20170808_2240.png - - -### font字体属性 - -**1、字号、行高、字体三大属性：** - -（1）字号： - -``` - font-size:14px; -``` - -（2）行高： - -``` - line-height:24px; -``` - -（3）字体：（font-family就是“字体”，family是“家庭”的意思） - -``` - font-family:"宋体"; -``` - -上面这三个属性，我们可以使用一行代码来实现：（字号 font-size、行高 line-height、字体 font-family） - -``` - font: 14px/24px “宋体”; -``` - - - -**2、字体属性的说明：** - -（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置： - -``` - font-family: "华文彩云"; -``` - -上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。 - -页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。 -英语：Arial 、 Times New Roman - - -（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下： - -``` - font-family: "微软雅黑","宋体"; -``` - -上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。 - -备选字体可以有无数个，用逗号隔开。 - - -（3）我们要将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体： - -``` - font-family: "Times New Roman","微软雅黑","宋体"; -``` - -上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于`smyhvae哈哈哈`这段文字，`smyhvae`会采用Times New Roman字体，而`哈哈哈`会采用微软雅黑字体。 - -可是，如果我们把中文字体写在前面：(错误写法) - -``` - font-family: "微软雅黑","Times New Roman","宋体"; -``` - -上方代码会导致，中文和英文都会采用微软雅黑字体。 - - -（4）所有的中文字体，都有英语别名。 - -微软雅黑的英语别名： - -``` - font-family: "Microsoft YaHei"; -``` - -宋体的英语别名： - -``` - font-family: "SimSun"; -``` - -于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成： - -``` - font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; -``` - - -（5）行高可以用百分比，表示字号的百分之多少。 - -一般来说，百分比都是大于100%的，因为行高一定要大于字号。 - -比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”;`。`200%`可以理解成word里面的2倍行高。 - -反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。 - - - - -## 超级链接的美化 - - -> 超级链接就是a标签。 - -### 伪类 - -**伪类**：同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。 - -类是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。 -伪类用冒号来表示。 - -a标签有4种伪类，要求背诵。如下： - -``` - a:link{ - color:red; - } - a:visited{ - color:orange; - } - a:hover{ - color:green; - } - a:active{ - color:black; - } -``` - -上方代码解释如下： - -- `:link` 表示“链接”，用户没有点击过这个链接的样式。 -- `:visited` 表示“访问过的”， 用户访问过了这个链接之后的样式。 -- `:hover` 表示“悬停”，用户鼠标悬停的时候链接的样式。 -- `:active` 表示“激活”， 用户用鼠标点击这个链接，但是不松手，此刻的样式。 - -上面的代码，看一下动图的效果： - - - -记住，这四种状态，在css中，必须按照固定的顺序写： - -> a:**l**ink 、a:visited 、a:hover 、a:active - -如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。 - - - -### 超链接的美化 - -超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。 - -我们一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。 - -举个例子。如果效果： - -20170810_2235.gif - -为了实现上面这个效果，完整版代码如下： - -```html - - - - -Document - - - - - - -``` - -上方代码中，我们发现，当我们在定义`a:link`和 `a:visited`这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下： - -```css - .nav ul li a{ - display: block; - width: 120px; - height: 50px; - } - /*两个伪类的属性，可以用逗号隔开*/ - .nav ul li a:link , .nav ul li a:visited{ - text-decoration: none; - background-color: purple; - color:white; - } - .nav ul li a:hover{ - background-color: orange; - } -``` - -如上方代码所示，最标准的写法，就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是： - -> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下： - - -```css - .nav ul li a{ - display: block; - width: 120px; - height: 50px; - text-decoration: none; - background-color: purple; - color:white; - } - .nav ul li a:hover{ - background-color: orange; - } - -``` - -当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。 - - -## background系列属性 - -### background-color背景颜色属性 - -css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。 - -比如红色可以有下面的三种表示方法： - -``` - background-color: red; - background-color: rgb(255,0,0); - background-color: #ff0000; -``` - - - -下面分别介绍。 - -**1、用英语单词来表示：** - -能够用英语单词来表述的颜色，都是简单颜色。比如红色： - -``` -background-color: red; -``` - - -**2、rgb表示法：** - -rgb表示三原色“红”red、“绿”green、“蓝”blue。 - -光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。 - -比如红色： - -``` -background-color: rgb(255,0,0); -``` - -黑色： - -``` -background-color: rgb(0,0,0); -``` - -颜色可以叠加，比如黄色就是红色和绿色的叠加： - -``` -background-color: rgb(255,255,0); -``` - - -**3、十六进制表示法：** - -比如红色： - -``` -background-color: #ff0000; -``` - - -PS:所有用#开头的值，都是16进制的。 - -这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。 - -问：16进制中28等于10进制多少？ -答：2*16+8 = 40。 - - -16进制中的af等于10进制多少？ -答：10 * 16 + 15 = 175 - - -所以，#ff0000就等于rgb(255,0,0)。 - -`background-color: #123456;`等价于`background-color: rgb(18,52,86);` - - -**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下： - -比如： - -``` - background-color:#ff0000; -``` - -等价于： - -``` - background-color:#f00; -``` - -比如： - -``` - background-color:#112233; -``` - -等价于： - -``` - background-color:#123; -``` - -但是，比如下面这个是无法简化的： - -``` - background-color:#222333; -``` - -再比如，下面这个也是无法简化的： - -``` - background-color:#123123; -``` - -几种常见的颜色简写可以记住。如下： - -``` - #000 黑 - #fff 白 - #f00 红 - #222 深灰 - #333 灰 - #ccc 浅灰 -``` - - - -### background-image属性 - - - - -### background-repeat属性 - - - -### background-position属性 - - - - -**CSS精灵：** - - - -### - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/02-CSS/04-盒子模型.md b/02-CSS/06-盒子模型.md similarity index 100% rename from 02-CSS/04-盒子模型.md rename to 02-CSS/06-盒子模型.md diff --git a/02-CSS/05-浮动.md b/02-CSS/07-浮动.md similarity index 92% rename from 02-CSS/05-浮动.md rename to 02-CSS/07-浮动.md index 56b133c..fa9358a 100644 --- a/02-CSS/05-浮动.md +++ b/02-CSS/07-浮动.md @@ -1,971 +1,975 @@ - - - -> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7297736.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。 - - - -## 标准文档流 - - -宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。 - - -### 标准文档流的特性 - -**（1）空白折叠现象：** - -无论多少个空格、换行、tab，都会折叠为一个空格。 - -比如，如果我们想让img标签之间没有空隙，必须紧密连接： - -``` -
-```
-
-
-**（2）高矮不齐，底边对齐：**
-
-举例如下：
-
-
-
-
-**（3）自动换行，一行写不满，换行写。**
-
-
-### 块级元素和行内元素
-
-学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
-
-- 行内元素
-- 块级元素
-
-
-我们可以举一个例子，看看块级元素和行内元素的区别：
-
-
-
-
-上图中可以看到，`h1`标签是块级元素，占据了整行，`span`标签是行内元素，只占据内容这一部分。
-
-现在我们尝试给两个标签设置宽高。效果如下：
-
-
-
-上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素`h1`生效。于是我们可以做出如下总结。
-
-**行内元素和块级元素的区别：**（非常重要）
-
-行内元素：
-
-- 与其他行内元素并排；
-- 不能设置宽、高。默认的宽度，就是文字的宽度。
-
-块级元素：
-
-- 霸占一行，不能与其他任何元素并列；
-- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
-
-
-
-
-**行内元素和块级元素的分类：**
-
-在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
-
-从HTML的角度来讲，标签分为：
-
-- 文本级标签：p、span、a、b、i、u、em。
-- 容器级标签：div、h系列、li、dt、dd。
-
-> PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
-
-现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
-
-- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
-
-- 块级元素：所有的容器级标签都是块级元素，还有p标签。
-
-我们把上面的分类画一个图，即可一目了然：
-
-
-
-
-
-### 块级元素和行内元素的相互转换
-
-我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
-
-#### 块级元素可以转换为行内元素：
-
-一旦，给一个块级元素（比如div）设置：
-
-```
-display: inline;
-```
-
-那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
-
-- 此时这个div不能设置宽度、高度；
-- 此时这个div可以和别人并排了。
-
-举例如下：
-
-
-
-
-#### 行内元素转换为块级元素：
-
-同样的道理，一旦给一个行内元素（比如span）设置：
-
-```
-display: block;
-```
-
-那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
-
-- 此时这个span能够设置宽度、高度
-- 此时这个span必须霸占一行了，别人无法和他并排
-- 如果不设置宽度，将撑满父亲
-
-举例如下：
-
-
-
-标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！**脱离标准流**！
-
-
-css中一共有三种手段，使一个元素脱离标准文档流：
-
-- （1）浮动
-- （2）绝对定位
-- （3）固定定位
-
-这便引出我们今天要讲的内容：浮动。
-
-
-## 浮动
-
-> 浮动是css里面布局用的最多的属性。
-
-现在有两个div，分别设置宽高。我们知道，它们的效果如下：
-
-
-
-此时，如果给这两个div增加一个浮动属性，比如`float: left;`，效果如下：
-
-
-
-这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。
-
-浮动想学好，一定要知道三个性质。接下来讲一讲。
-
-
-### 性质1：浮动的元素脱标
-
-脱标即脱离标准流。我们来看几个例子。
-
-证明1：
-
-
-
-上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个``标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个``还在自己的层面上遵从标准流进行排列。 - -证明2： - - - -上图中，一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。** - - -### 性质2：浮动的元素互相贴靠 - -我们来看一个例子就明白了。 - -我们给三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果： - - - - -上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。 -如果没有足够的空间靠着1号大哥，3号自己去贴左墙。 - -不过3号自己去贴墙的时候，注意： - - - - -上图显示，3号贴左墙的时候，并不会往1号里面挤。 - -同样，float还有一个属性值是`right`，这个和属性值`left`是对称的。 - - -### 性质3：浮动的元素有“字围”效果 - -来看一张图就明白了。我们让div浮动，p不浮动。 - - - -上图中，我们发现：**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。 - -关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：**永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。** - - -### 性质4：收缩 - -收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。 - -举例如下： - - - - -上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩 - - -### 浮动的补充（做网站时注意） - - - - -上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了： - - - - - -### 布置一个作业 - -布置一个作业，要求实现下面的效果： - - - - -为实现上方效果，代码如下： - -```html - - - - -Document - - - - --- - -logo-语言选择- -- -- - - - - -``` - -其实，这个页面的布局是下面这个网站： - - - - - -## 浮动的清除 - -> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。 - -### 前言 - -通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。 - -比如说一个网页有header、content、footer这三部分。就拿content部分来举例，如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。 - -从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。 - -下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下： - - - - -上面这个例子很简单。可如果我们给里面的`- `标签加浮动。效果却成了下面这个样子： - -代码如下： - -```html - - - - -
-``` - -``` -ul li.no1{ - _margin-left:20px; -} -``` - -PS：双倍margin的问题，面试经常问哦。 - - - -### IE6的3px bug - - - -解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用padding，而不是margin）。所以，如果你出现了3px bug，说明你的代码不标准。 - - -IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲IE6的兼容性问题，就是为了增加面试的成功率，不是为了成为IE6的专家。 - - - -## Fireworks和others - -### Fireworks - -fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。 - -标尺的快捷键：Ctrl + Alt+ R - - -### others - - - -首行缩进两个汉字： - -``` -text-indent: 2em; -``` - -上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。 - - - - -第四天：定位 - -第五天：背景、表格 - -第六天：切图 - - - - -## 我的公众号 - -想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 - -扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： - - - - - + + + +> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7297736.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。 + + + + +## 文本主要内容 + +- 标准文档流 + - 标准文档流的特性 + - 行内元素和块级元素 + - 行内元素和块级元素的相互转换 +- 浮动的性质 +- 浮动的清除 +- 浏览器的兼容性问题 +- 浮动中margin相关 +- 关于margin的IE6兼容问题 + +## 标准文档流 + + +宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。 + + +### 标准文档流的特性 + +**（1）空白折叠现象：** + +无论多少个空格、换行、tab，都会折叠为一个空格。 + +比如，如果我们想让img标签之间没有空隙，必须紧密连接： + +``` +Document - - - ----
-
- 生命壹号1 -
- 生命壹号2 -
- 生命壹号3 -
- 生命壹号4 -
-- - -``` - -效果如下： - - - - -上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。 - -这便引出我们要讲的：清除浮动的第一种方式。 -那该怎么解决呢？ - - -### 方法1：给浮动元素的祖先元素加高度 - - - -造成前言中这个现象的根本原因是：li的**父亲div没有设置高度**，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。 - -撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。 - -好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象： - - - - -给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象： - - - -**总结：** - -**如果一个元素要浮动，那么它的祖先元素一定要有高度。** - -**有高度的盒子，才能关住浮动**。（记住这句过来人的经验之语） - -只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。 - - - - - - -### 方法2：clear:both; - -网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法1，工作中用得很少。 - -那么，能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？ - -这个时候，我们可以使用`clear:both;`这个属性。如下： - - - - -``` -clear:both; -``` - -clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。 - -这种方法有一个非常大的、致命的问题，**它所在的标签，margin属性失效了**。读者可以试试看。 - - -margin失效的本质原因是：上图中的box1和box2，高度为零。 - - - -### 方法3：隔墙法 - -上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置`clear: both;`属性。既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。 - - -我们看看例子效果就知道了： - - - -上图这个例子就是隔墙法。 - - -**内墙法：** - - -近些年，有演化出了“内墙法”： - - - -上面这个图非常重要，当作内墙法的公式，先记下来。 - - -为了讲内墙法，我们先记住一句重要的话：**一个父亲是不能被浮动的儿子撑出高度的**。举例如下： - -（1）我们在一个div里放一个有宽高的p，效果如下：（很简单） - - - -（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了： - - - -（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度： - - - -于是，我们采用内墙法解决前言中的问题： - - - -与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。 - -而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。 - - -### 清除浮动方法4：overflow:hidden; - -我们可以使用如下属性： - -``` -overflow:hidden; -``` - - -overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下： - - - - -上图显示，`overflow:hidden;`的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下： - -一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上`overflow:hidden`; 那么，父亲就能被儿子撑出高了。这是一个偏方。 - -举个例子： - - - - -那么对于前言中的例子，我们同样可以使用这一属性： - - - - - - -## 浮动清除的总结 - - -> 我们在上一段讲了四种清除浮动的方法，本段来进行一个总结。 - -浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。 - -### 1、加高法 - -工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。 - -```html --
-
- 许嵩1 -
- 许嵩2 -
- 许嵩3 -
- 许嵩4 -
//设置height - - - -- -//设置height - - - --``` - - -### 2、`clear:both;`法 - -最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。 - - -```html -- - - -- -//clear:both; - - - --``` - -浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。 - - - -### 3、隔墙法 - -在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。 -墙用自己的身体当做了间隙。 - -```html -- - - -- - - -- - - --``` - -我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。 - -内墙法： - -```html -- - - - -- -- - - --``` - -内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。 - - -### 4、`overflow:hidden;` - -这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。 -我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。 -并且,overflow:hidden;能够让margin生效。 - - -**清除浮动的例子：** - -我们现在举个例子，要求实现下图中无序列表部分的效果： - - - -对比一下我们讲的四种清除浮动的方法。如果用外墙法，ul中不能插入div标签，因为ul中只能插入li，如果插入li的墙，会浪费语义。如果用内墙法，不美观。综合对比，还是用第四种方法来实现吧，这会让标签显得极其干净整洁： - - - -上方代码中，如果没有加`overflow:hidden;`，那么第二行的li会紧跟着第一行li的后面。 - - -## 浏览器的兼容性问题 - - - -> 讲一下上述知识点涉及到的浏览器兼容问题。 - - -### 兼容性1（微型盒子） - -**兼容性的第一条**：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支持微型盒子。 - -举个例子。我们设置一个height为 5px 、宽度为 200px的盒子，看下在IE 8和 IE 6中的显示效果： - - - -解决办法很简单，就是将盒子的字号大小，设置为**小于盒子的高**，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。如下： - -``` -height: 5px; -_font-size: 0px; -``` - -我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。 - - -IE6留了一个**后门**：只要给css属性之前，加上**下划线**，这个属性就是IE6的专有属性。 - - -比如说，我们给背景颜色这个属性加上下划线，就变成了`_background-color: green;`。效果如下： - - - - - -于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线） - -``` -height: 10px; -_font-size:0; -``` - - - -### 兼容性2 - -**兼容性的第二条：**IE6不支持用`overflow:hidden;`来清除浮动。 - -解决办法，以毒攻毒。追加一条： - -``` -_zoom:1; -``` - -完整写法： - -``` -overflow: hidden; -_zoom:1; -``` - -实际上，`_zoom:1;`能够触发浏览器hasLayout机制。这个机制，不要深究了，因为只有IE6有。我们只需要让IE6好用，具体的实现机制，可以自行查阅。 - -需要强调的是，`overflow:hidden;`的本意，就是让溢出盒子的border的内容隐藏，这个功能是IE6兼容的。不兼容的是`overflow:hidden;`清除浮动的时候。 - - -**总结：** - -我们刚才学习的两个IE6的兼容问题，都是通过多写一条hack来解决的，这个我们称为伴生属性，即两个属性，要写一起写。 - -属性1： - -``` -height:6px; -_font-size:0; -``` - -属性2： - -``` -overflow:hidden; -_zoom:1; -``` - - -## margin相关 - -> 我们来讲一下浮动中和margin相关的知识。 - - -### margin塌陷 - -**标准文档流中，竖直方向的margin不叠加，以较大的为准**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示： - - - - - -如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。 - - - -### 盒子居中`margin:0 auto;` - -margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了： - -``` -margin-left: auto; -margin-right: auto; -``` - -盒子居中的简写为： - -``` -margin:0 auto; -``` - -对上方代码的理解：上下的margin为0，左右的margin都尽可能的大，于是就居中了。 - -注意： - -- （1）使用`margin:0 auto;`的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义） -- （2）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto; -- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;` - -对上面的第三条总结一下：（非常重要） - -``` -margin:0 auto; //让这个div自己在大容器中居中。 -text-align: center; //让这个div内部的文本居中。 -``` - -顺便普及一下知识，text-align还有： - -``` -text-align:left; //没啥用，因为默认居左 -text-align:right; //文本居右 -``` - -### 善于使用父亲的padding，而不是儿子的margin - -我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p） - -``` -- --``` - -上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持30px的上边距。结果却看到了下面的奇怪的现象： - - - - -此时我们给父亲div加一个border属性，就正常了： - - - - - -如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。 - -**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。** - -所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。 - - -## 关于margin的IE6兼容问题 - - -### IE6的双倍margin的bug： - -当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。 - -``` --
-
-
-
-
+```
+
+
+**（2）高矮不齐，底边对齐：**
+
+举例如下：
+
+
+
+
+**（3）自动换行，一行写不满，换行写。**
+
+
+### 行内元素和块级元素
+
+学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
+
+- 行内元素
+- 块级元素
+
+
+我们可以举一个例子，看看块级元素和行内元素的区别：
+
+
+
+
+上图中可以看到，`h1`标签是块级元素，占据了整行，`span`标签是行内元素，只占据内容这一部分。
+
+现在我们尝试给两个标签设置宽高。效果如下：
+
+
+
+上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素`h1`生效。于是我们可以做出如下总结。
+
+**行内元素和块级元素的区别：**（非常重要）
+
+行内元素：
+
+- 与其他行内元素并排；
+- 不能设置宽、高。默认的宽度，就是文字的宽度。
+
+块级元素：
+
+- 霸占一行，不能与其他任何元素并列；
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
+
+
+
+
+**行内元素和块级元素的分类：**
+
+在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
+
+从HTML的角度来讲，标签分为：
+
+- 文本级标签：p、span、a、b、i、u、em。
+- 容器级标签：div、h系列、li、dt、dd。
+
+> PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
+
+现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
+
+- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
+
+- 块级元素：所有的容器级标签都是块级元素，还有p标签。
+
+我们把上面的分类画一个图，即可一目了然：
+
+
+
+
+
+### 行内元素和块级元素的相互转换
+
+我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
+
+#### 块级元素可以转换为行内元素：
+
+一旦，给一个块级元素（比如div）设置：
+
+```
+display: inline;
+```
+
+那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
+
+- 此时这个div不能设置宽度、高度；
+- 此时这个div可以和别人并排了。
+
+举例如下：
+
+
+
+
+#### 行内元素转换为块级元素：
+
+同样的道理，一旦给一个行内元素（比如span）设置：
+
+```
+display: block;
+```
+
+那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
+
+- 此时这个span能够设置宽度、高度
+- 此时这个span必须霸占一行了，别人无法和他并排
+- 如果不设置宽度，将撑满父亲
+
+举例如下：
+
+
+
+标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！**脱离标准流**！
+
+
+css中一共有三种手段，使一个元素脱离标准文档流：
+
+- （1）浮动
+- （2）绝对定位
+- （3）固定定位
+
+这便引出我们今天要讲的内容：浮动。
+
+
+## 浮动的性质
+
+> 浮动是css里面布局用的最多的属性。
+
+现在有两个div，分别设置宽高。我们知道，它们的效果如下：
+
+
+
+此时，如果给这两个div增加一个浮动属性，比如`float: left;`，效果如下：
+
+
+
+这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。
+
+浮动想学好，一定要知道三个性质。接下来讲一讲。
+
+### 性质1：浮动的元素脱标
+
+脱标即脱离标准流。我们来看几个例子。
+
+证明1：
+
+
+
+上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个``标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个``还在自己的层面上遵从标准流进行排列。 + +证明2： + + + +上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。 + +所以能够证明一件事：**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**所有标签，浮动之后，已经不区分行内、块级了。 + + +### 性质2：浮动的元素互相贴靠 + +我们来看一个例子就明白了。 + +我们给三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果： + + + + +上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。 +如果没有足够的空间靠着1号大哥，3号自己去贴左墙。 + +不过3号自己去贴墙的时候，注意： + + + + +上图显示，3号贴左墙的时候，并不会往1号里面挤。 + +同样，float还有一个属性值是`right`，这个和属性值`left`是对称的。 + + +### 性质3：浮动的元素有“字围”效果 + +来看一张图就明白了。我们让div浮动，p不浮动。 + + + +上图中，我们发现：**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。 + +关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：**永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。** + + +### 性质4：收缩 + +收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。 + +举例如下： + + + + +上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩 + + +### 浮动的补充（做网站时注意） + + + + +上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了： + + + + + +### 布置一个作业 + +布置一个作业，要求实现下面的效果： + + + + +为实现上方效果，代码如下： + +```html + + + + +Document + + + + +++ + +logo+语言选择+ ++ ++ + + + + +``` + +其实，这个页面的布局是下面这个网站： + + + + + +## 浮动的清除 + +> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。 + +### 前言 + +通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。 + +比如说一个网页有header、content、footer这三部分。就拿content部分来举例，如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。 + +从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。 + +下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下： + + + + +上面这个例子很简单。可如果我们给里面的`++++ +- `标签加浮动。效果却成了下面这个样子： + +代码如下： + +```html + + + + +
+``` + +``` +ul li.no1{ + _margin-left:20px; +} +``` + +PS：双倍margin的问题，面试经常问哦。 + + + +### IE6的3px bug + + + +解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用padding，而不是margin）。所以，如果你出现了3px bug，说明你的代码不标准。 + + +IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲IE6的兼容性问题，就是为了增加面试的成功率，不是为了成为IE6的专家。 + + + +## Fireworks和others + +### Fireworks + +fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。 + +标尺的快捷键：Ctrl + Alt+ R + + +### others + + + +首行缩进两个汉字： + +``` +text-indent: 2em; +``` + +上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。 + + + +## 我的公众号 + +想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + + + + + diff --git a/02-CSS/06-CSS案例讲解：博雅互动.md b/02-CSS/08-CSS案例讲解：博雅互动.md similarity index 98% rename from 02-CSS/06-CSS案例讲解：博雅互动.md rename to 02-CSS/08-CSS案例讲解：博雅互动.md index d909823..81e2a95 100644 --- a/02-CSS/06-CSS案例讲解：博雅互动.md +++ b/02-CSS/08-CSS案例讲解：博雅互动.md @@ -66,7 +66,7 @@ font-size: 14px; font-family: "Microsoft YaHei","SimSun"; height: 8888px; - } + } .header{ height: 58px; background-color: #191D3A; @@ -104,8 +104,8 @@ text-align: center; /*让这个div内部的文本居中*/ } .header .nav ul li a.current{ - color:white; - background: #252947; + color:white; + background: #252947; } .header .nav ul li a:hover{ color: white; @@ -117,7 +117,7 @@ height: 58px; width: 100px; padding-left: 48px; - padding-top: 12px; + padding-top: 12px; } .header .jrwm_box .jrwm{ diff --git a/推荐链接.md b/推荐链接.md index b33f1dd..6743be4 100644 --- a/推荐链接.md +++ b/推荐链接.md @@ -48,3 +48,20 @@ - [介绍几个上网+分流+图床工具](http://www.viyuedu.com/kaopuseo/61071.html) + +### 2018-01-12 + +- [张鑫旭 | 话说我为什么要闭关学习](http://www.zhangxinxu.com/life/2013/03/%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E9%97%AD%E5%85%B3%E5%AD%A6%E4%B9%A0/) + + +作者闭关学习了半年的前端。 + + + + + + + + + +Document + + + +++-
+
- 生命壹号1 +
- 生命壹号2 +
- 生命壹号3 +
- 生命壹号4 +
++ + +``` + +效果如下： + + + + +上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。 + +这便引出我们要讲的：清除浮动的第一种方式。 +那该怎么解决呢？ + + +### 方法1：给浮动元素的祖先元素加高度 + + + +造成前言中这个现象的根本原因是：li的**父亲div没有设置高度**，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。 + +撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。 + +好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象： + + + + +给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象： + + + +**总结：** + +**如果一个元素要浮动，那么它的祖先元素一定要有高度。** + +**有高度的盒子，才能关住浮动**。（记住这句过来人的经验之语） + +只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。 + + + + + + +### 方法2：clear:both; + +网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法1，工作中用得很少。 + +那么，能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？ + +这个时候，我们可以使用`clear:both;`这个属性。如下： + + + + +``` +clear:both; +``` + +clear就是清除，both指的是左浮动、右浮动都要清除。`clear:both`的意思就是：**不允许左侧和右侧有浮动对象。** + +这种方法有一个非常大的、致命的问题，**它所在的标签，margin属性失效了**。读者可以试试看。 + + +margin失效的本质原因是：上图中的box1和box2，高度为零。 + + + +### 方法3：隔墙法 + +上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置`clear: both;`属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。 + + +我们看看例子效果就知道了： + + + +上图这个例子就是隔墙法。 + + +**内墙法：** + + +近些年，有演化出了“内墙法”： + + + +上面这个图非常重要，当作内墙法的公式，先记下来。 + + +为了讲内墙法，我们先记住一句重要的话：**一个父亲是不能被浮动的儿子撑出高度的**。举例如下： + +（1）我们在一个div里放一个有宽高的p，效果如下：（很简单） + + + +（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了： + + + +（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度： + + + +于是，我们采用内墙法解决前言中的问题： + + + +与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。 + +而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。 + + +### 清除浮动方法4：overflow:hidden; + +我们可以使用如下属性： + +``` +overflow:hidden; +``` + + +overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下： + + + + +上图显示，`overflow:hidden;`的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下： + +一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上`overflow:hidden`; 那么，父亲就能被儿子撑出高了。这是一个偏方。 + +举个例子： + + + + +那么对于前言中的例子，我们同样可以使用这一属性： + + + + + + +## 浮动清除的总结 + + +> 我们在上一段讲了四种清除浮动的方法，本段来进行一个总结。 + +浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。 + +### 1、加高法 + +工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。 + +```html +-
+
- 许嵩1 +
- 许嵩2 +
- 许嵩3 +
- 许嵩4 +
//设置height + + + ++ +//设置height + + + ++``` + + +### 2、`clear:both;`法 + +最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。 + + +```html ++ + + ++ +//clear:both; + + + ++``` + +浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。 + + + +### 3、隔墙法 + +在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。 +墙用自己的身体当做了间隙。 + +```html ++ + + ++ + + ++ + + ++``` + +我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。 + +内墙法： + +```html ++ + + + ++ ++ + + ++``` + +内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。 + + +### 4、`overflow:hidden;` + +这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。 +我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。 +并且,overflow:hidden;能够让margin生效。 + + +**清除浮动的例子：** + +我们现在举个例子，要求实现下图中无序列表部分的效果： + + + +对比一下我们讲的四种清除浮动的方法。如果用外墙法，ul中不能插入div标签，因为ul中只能插入li，如果插入li的墙，会浪费语义。如果用内墙法，不美观。综合对比，还是用第四种方法来实现吧，这会让标签显得极其干净整洁： + + + +上方代码中，如果没有加`overflow:hidden;`，那么第二行的li会紧跟着第一行li的后面。 + + +## 浏览器的兼容性问题 + + + +> 讲一下上述知识点涉及到的浏览器兼容问题。 + + +### 兼容性1（微型盒子） + +**兼容性的第一条**：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支持微型盒子。 + +举个例子。我们设置一个height为 5px 、宽度为 200px的盒子，看下在IE 8和 IE 6中的显示效果： + + + +解决办法很简单，就是将盒子的字号大小，设置为**小于盒子的高**，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。如下： + +``` +height: 5px; +_font-size: 0px; +``` + +我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。 + + +IE6留了一个**后门**：只要给css属性之前，加上**下划线**，这个属性就是IE6的专有属性。 + + +比如说，我们给背景颜色这个属性加上下划线，就变成了`_background-color: green;`。效果如下： + + + + + +于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线） + +``` +height: 10px; +_font-size:0; +``` + + + +### 兼容性2 + +**兼容性的第二条：**IE6不支持用`overflow:hidden;`来清除浮动。 + +解决办法，以毒攻毒。追加一条： + +``` +_zoom:1; +``` + +完整写法： + +``` +overflow: hidden; +_zoom:1; +``` + +实际上，`_zoom:1;`能够触发浏览器hasLayout机制。这个机制，不要深究了，因为只有IE6有。我们只需要让IE6好用，具体的实现机制，可以自行查阅。 + +需要强调的是，`overflow:hidden;`的本意，就是让溢出盒子的border的内容隐藏，这个功能是IE6兼容的。不兼容的是`overflow:hidden;`清除浮动的时候。 + + +**总结：** + +我们刚才学习的两个IE6的兼容问题，都是通过多写一条hack来解决的，这个我们称为伴生属性，即两个属性，要写一起写。 + +属性1： + +``` +height:6px; +_font-size:0; +``` + +属性2： + +``` +overflow:hidden; +_zoom:1; +``` + + +## margin相关 + +> 我们来讲一下浮动中和margin相关的知识。 + + +### margin塌陷 + +**标准文档流中，竖直方向的margin不叠加，以较大的为准**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示： + + + + + +如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。 + + + +### 盒子居中`margin:0 auto;` + +margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了： + +``` +margin-left: auto; +margin-right: auto; +``` + +盒子居中的简写为： + +``` +margin:0 auto; +``` + +对上方代码的理解：上下的margin为0，左右的margin都尽可能的大，于是就居中了。 + +注意： + +- （1）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto; +- （2）使用`margin:0 auto;`的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义） +- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;` + +对上面的第三条总结一下：（非常重要） + +``` +margin:0 auto; //让这个div自己在大容器中居中。 +text-align: center; //让这个div内部的文本居中。 +``` + +顺便普及一下知识，text-align还有： + +``` +text-align:left; //没啥用，因为默认居左 +text-align:right; //文本居右 +``` + +### 善于使用父亲的padding，而不是儿子的margin + +我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p） + +``` ++ ++``` + +上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象： + + + + +此时我们给父亲div加一个border属性，就正常了： + + + + + +如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。 + +**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。** + +所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。 + + +## 关于margin的IE6兼容问题 + + +### IE6的双倍margin的bug： + +当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。 + +``` +-
+
+
+
+
- `为红色：
+
+```css
+ ul li:last-child{
+ color:blue;
+ }
+```
+
+序选择器还有更复杂的用法，以后再讲。
+
+由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
+
+```html
+
- `为红色：
-
-```css
- ul li:last-child{
- color:blue;
- }
-```
-
-序选择器还有更复杂的用法，以后再讲。
-
-由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
-
-```html
-