看起来小但是并不小的问题

HTML <!DOCTYPE>

定义和用法
- 必须是 HTML 文档的第一行，位于 <html> 标签之前。
- <!DOCTYPE> 不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
常用的DOCTYPE声明
- HTML 5
```
<!DOCTYPE html>
```
- HTML 4.01 Strict
  
  该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
- HTML 4.01 Transitional
  
  该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
```
- HTML 4.01 Frameset
  
  该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
```

关于高度坍塌

什么是高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

<div id="parent">
    <div id="childrenOne">111</div>
    <div id="childrenTwo">222</div>
</div>
<div id="boxTemp">333</div>
<div id="boxCompare">444</div>

#parent{
  width: 300px;
  background-color: #bfa;
}

#childrenOne,#childrenTwo{
  float: left;
  width: 100px;
  heigh: 100px;
}
#childrenOne{
  background-color: purple;
  margin-left: 10px;
}
#childrenTwo{
  background-color: red;
}
#boxCompare{
  width: 200px;
  height: 150px;
  background-color: blue;
}
#boxTemp{
  width: 100px;
  height: 150px;
  background-color: green;
}

解决方法

给父元素设置固定高度。但是使用这种方式后，父元素的高度就不能根据子元素自动撑高了。
额外标签法，这是w3c推荐的解决方案，但是不推荐，因为html的原则是写出语义化的标签，这种方式会额外增加无意义的标签。

<div id="parent">
    <div id="childrenOne">111</div>
    <div id="childrenTwo">222</div>
    <div style="clear: both;"></div>
    <!--额外标签-->
</div>
<div id="boxTemp">333</div>
<div id="boxCompare">444</div>

父元素的overflow属性（开启元素的BFC）

这种方式现在使用比较广泛，很多大网站都是使用这种方式，副作用较小，只需要在配合处理ie6就可以了。

.clearFix{
    overflow: hidden;
    /*使用这种方式，属性值可以是非visible（hidden/auto/scroll）中任意，但是建议用hidden。这种方式的副作用比较小。*/
}

另外，这种方式在ie 6中不支持( 怎么又是ie 6 )，可另外加zoom: 1;

.clearFix::after{
    context:"";
    height: 0;      /* 伪元素高度为0，不影响其他元素 */
    clear: both;    /* 清除浮动 */
    visibility: hidden;
}
.clearFix{
/* ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持 */
    zoom: 1;
}

双伪元素清除浮动（开启元素的BFC）

.clearFix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.clearFix{
/* ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持 */
    zoom: 1;
}

BFC相关

在页面中元素都一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
父元素的垂直外边距不会和子元素重叠。
开启BFC的元素不会被浮动元素所覆盖。
开启BFC的元素可以包含浮动的子元素。

传说中的“子绝父相”

定位( position )有四种

类型	特点
static：自动定位	静态定位：对于边偏移无效，一般用来清除定位。
relative：相对定位，相对于文档流的位置进行定位	每次移动的位置是相对自己的左上角移动的。但是不脱离标准流。
absolute：绝对定位，相对于其上一个已经定位的父元素进行定位	每次移动的位置是相对于父元素。绝对定位是完全脱离标准流的。
fixed：固定定位，相对于浏览器窗口进行定位	是绝对定位的一种特殊形式。与父级没有任何关系，只认浏览器。

所以，子绝父相就是如果一个div的定位属性为absolute,对于这样的盒子
- 如果父级元素没有定位，则以浏览器（Document文档）为准对齐。
- 为了不让孩子乱跑，就会给父级元素加定位（绝对相对都行）。
- 友链：关于子绝父绝和子绝父相
多说一句——绝对定位水平垂直居中：
- 加了绝对定位的盒子margin左右auto无效。
- 如果想要居中的话，首先left50%，然后走自己的一半的值就好了。

CSS精灵技术

别问，要问就是雪碧~
产生原因：

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术。
本质：

CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图）。
wqh有话说：

20px x 20px，把多张小图片放到了一个大图片里面，利用 background-position: x y; backgroung-size: 20px;

叠放次序(z-index)

当多个元素同时设置定位时，可能发生重叠。
值越大越上（先显示）。
只有相对定位、绝对定位、固定定位有这个属性，其他的都没有。
如果值相同，则后来者居上。
数字不能加单位。

滑动门技术

效果参见微信官网
它能够根据导航条菜单文本长度自动调节宽度。用简单背景小图来实现炫彩的导航条风格，大大减少网页载入内容。

实现方法：

a设置背景左侧，padding撑开适合宽度。
pan设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度。

<a href="#"><span>哈哈哈</span></a>

a{
    display: inline-block;
    height: 33px;
    background: url('img.jpg') no-repeat;
    padding-left: 15px;
}
a span{
    display: inline-block;
    height: 33px;
    background: url('img.jpg') no-repeat right;
    padding-left: 15px;
}

看起来小但是并不小的问题

HTML <!DOCTYPE>

关于高度坍塌

BFC相关

传说中的“子绝父相”

CSS精灵技术

叠放次序(z-index)

滑动门技术

猜你喜欢