标签：important hang ica title 文档流 get 文件 ack 左边栏
转自此网页http://www.cnblogs.com/YangqinCao/p/5721810.html。
首先分析两栏布局，
两栏布局两种常见方法，
.left{
width:200px;
float:left;
}
.main{
margin-left:200px;
}
.left{
width:200px;
position:absolute;
top:0;
left:0;
}
.main{
margin-left:200px;
}
对于第一种方法，使用float，可以通过将左边栏的padding-bottom设置为足够大的值，然后为margin-bottom设置同样大小的负值，用以弥补padding造成的长度过长，然后设置父元素overflow:hidden
.container{
overflow:hidden;
}
.left{
width:200px;
float:left;
padding-bottom:5000px;
margin-bottom:-5000px;
}
.main{
margin-bottom:210px;
}
演示：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test2.html
对于第二种方法，使用absolute，使得左边栏脱离了文档流，但是高度还需要随父元素高度变化怎么办呢？
.left{
width:200px;
position:absolute;
top:0;
left:0;
bottom:0;//第一种方法，设置为bottom为0；第二种方法设置高度100%；
}
.main{
margin-left:200px;
}
演示：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test1.html
.parent{
position: relative;
}
.left{
position: absolute;
top: 0px;
width: 200px;
height: 100%;
}
.main{
margin-left: 210px;
}
演示：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test6.html
1）子元素宽高已知
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
.element {
width: 600px; height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
演示地址：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test3.html
2）子元素宽高未知
.element{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);//有兼容性问题
}
3) 多行文字垂直居中
<div class="container">
<div class="child">
<span>
我是第一行文字<br/>
我是第二行文字<br/>
我是第三行文字<br/>
我是第四行文字<br/>
我是第五行文字
</span>
</div>
</div>
.child{
height:600px;
background-color:pink;
line-height:600px;
text-align：center
}
.child span{
display:inline-block;
line-height:1.5em;
vertical-align:center;
}
4) 图片垂直居中方法
div { line-height: 240px; } img { vertical-align: middle; }
效果并不是完全的垂直居中，只是近似
那是因为「幽灵空白节点」高度行高撑开，其垂直中心是字符content area的中心，而对于字符x而言，都是比绝对中心位置要下沉的（不同字体下沉幅度不一样），换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方，而这上下的偏差就是这里图片上下间距的偏差。
middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。
要想完全垂直居中，最先想到的方法就是让后面的“幽灵字符”也是vertical-align:middle，然而，既然称之为“幽灵”就表示不会受非继承特性的属性影响，所以，根本没法设置vertical-align:middle，除非你自己创建一个显示的内联元素。
“幽灵字符”可以受具有继承特性的CSS属性影响，于是，我们可以通过其他东西来做调整，让字符的中线和字符内容中心线在一起，或者说在一个位置上就可以了。
设置font-size:0, 因此此时content area高度是0，各种乱七八糟的线都在高度为0的这条线上，绝对中心线和中线重合。自然全垂直居中：
<div>
<img src="1.png"> //img后须有空格或换行才能有幽灵空白节点
</div>
.div{
font-size:0;
line-height:200px;
}
img{
vertical-align:middle;
}
参考：http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
演示地址：https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/mianshi/%E5%B1%85%E4%B8%AD/test5.html
.div {
width:500px ;
height:300px;
position:relative;相对定位
left:50%;
top:50%;
margin: -150px 0 0 -250px;
}
reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的效果。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
清除浮动的方式：
1. 在浮动元素后面设置空div,设置clear:both
2. 在浮动元素后面添加换行<br clear="all" />
3. 给父元素添加overflow:hidden;
4. 父元素设置浮动
5. 在父元素上应用:after
.parent:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.parent{
zoom:1;
}
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的
5）zoom：1 触发IE hasLayout。
除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容
Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了
.parent{
content:"\200b";
display:block;
height:0;
clear;both;
}
.parent{
zoom:1;
}
方法3,4,5都是因为生成了BFC，计算BFC的高度时，浮动元素也参与计算，由此解决了父元素的高度塌陷问题。
BFC：http://www.cnblogs.com/YangqinCao/p/5421898.html
详见：http://www.jb51.net/css/67471.html
浮动因脆弱而饱受诟病。大多数的脆弱性来自于 IE6 及其一系列的浮动相关 bug。因为越来越多的设计师不再支持 IE6 了，你也可以不关注它了。不过对于那些要关注的人来说，这里有些大概。
快速修正：确保不是图片造成这种情况，使用 overflow:hidden 来切除多余的部分。
详见：http://www.cnblogs.com/hnyei/archive/2011/09/27/2193133.html
position有3个属性:static absolute relative fixed
static：元素没有定位，在文档流中出现在正常的位置。默认值，忽略 top, bottom, left, right 或者 z-index 声明。
absolute：绝对定位，脱离文档流，相对于最近的属性不为static的父元素位置。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
relative：相对定位，相对于原来文档流中正常出现的位置的偏移，但其在文本流中的位置依然存在。通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
fixed: 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
inherit 规定从父元素继承 position 属性的值。
1）文档流:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素
2）水平位置：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
3）垂直对齐：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
4）空白：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。
为了删除这些空白，可以删除HTML中的空白；使用负的外边距；给父元素设置font-size:0
原文：http://blog.163.com/zx_1258/blog/static/1332337992012111184519374/
怎么使用：
1）png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
2）浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
3）IE6双边距bug:块属性标签float后，设置水平margin时，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 ：#box{ float:left; width:10px; margin:0 0 0 10px;}
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
4）IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
5）IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6）Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,解决方案：加入 CSS 属性 -webkit-text-size-adjust: none; //测试有点问题，在看看
7）超链接访问过后hover样式就不出现了 点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
8）设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
9）图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了通配符也不起作用。
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（也可以使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法）
10）标签设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
11）3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题。
12）当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱。
13）opacity 定义元素的不透明度
14）z-index不起作用的 bug
1）ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签position属性为relative；2、问题标签含有浮动(float)属性。
2）父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。
15）使用hacker可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
内容摘自：http://www.cnblogs.com/duanhuajian/archive/2012/09/23/2699119.html http://blog.csdn.net/chuyuqing/article/details/37561313/
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
<style type="text/css" media="screen">
@import url("CSS文件"); 或者 @import url(style.css)
</style>
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
标签：important hang ica title 文档流 get 文件 ack 左边栏
原文地址：http://www.cnblogs.com/xuzhudong/p/6920180.html
