看起来小但是并不小的问题
Posted littlebanana
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了看起来小但是并不小的问题相关的知识，希望对你有一定的参考价值。
html <!DOCTYPE>
定义和用法
- 必须是 HTML 文档的第一行，位于
<html>标签之前。 <!DOCTYPE>不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- 必须是 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; }
以上是关于看起来小但是并不小的问题的主要内容，如果未能解决你的问题，请参考以下文章