@EncyKe
2015-11-05T06:58:26.000000Z
字数 2715
阅读 2462
前端
CSS
a. 收缩(水平方向);
b. 坚挺(高度);
c. 隔绝(与外部不相关);
即,块级格式化上下文(Block Formatting Context, BFC)。
具有包裹性的其他属性:
display: inline-block/table-cell/..;
position: absolute(近亲)/fixed/sticky;
overflow: hidden/scroll;
容器被破坏(父元素高度塌陷);
具有破坏性的其他属性:
display: none;
position: absolute(近亲)/fixed/sticky;
注意:
float
的设计初衷是为了实现文字环绕效果。
浮动使父元素高度塌陷,不是bug而是标准!!
inline-block
→block
;
也被跟随到后面而使浮动元素挤在一起;其本质还是为了实现文字环绕效果。注意:若滥用浮动实现砌砖布局——
1. 容错性比较糟糕,容易出问题;
2. 这种布局需要元素固定尺寸,难以复用;
3. 在低版本的IE下会有很多问题;
clear: both
<div style="clear: both"></div>
.clearfix:after{}
通常声明:
float:left/right
position:absolute/fixed
overflow:hidden/scroll.../*IE 7+/
display:inline-block/table-cell.../*IE 8+*/
width/height/zoom:1/.../*IE 6, IE 7*/
优化后的方法
.clearfix:after{
content:'';
display:block;
height:0;
overflow:hidden;
clear:both;
}/*IE8+*/
.clearfix{*zoom:1;} /*IE 6, IE 7*/
或命名为:
.fix:after{...}
.fix{...}
更精简的方法:
.clearfix:after{
content:'';
display:table;
clear:both;
}/*IE8+*/
.clearfix{*zoom:1;} /*IE 6, IE 7*/
注意:.clearfix
均不可滥用,.clearfix
只应用在包含浮动子元素的父级元素上。
width: ; float: ;
padding-left/margin-left:
width:100% ;float:;
padding-left/margin-left:
width: ; float: ; margin:负值(=width);
float
display:table-cell(IE8+) / display:inline-block(IE7)
display:inline;
的样式,这样就可避免双倍边距bug。margin-right: -3px
并不推荐,大大增加了布局的复杂度并且如果父div有设置浮动的话就会失效,简单高效的解决办法是在父div里设置overflow:hidden
。overflow:auto;zoom:1;
这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;
是为了兼容 IE6而使用的CSS HACK。遗憾的是zoom:1;
通不过W3C的验证,幸好IE支持<!--[if IE]>
这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[if IE]>
中,这样应该可以通过验证了。超链接访问过后hover样式就不出现:
被点击访问过的超链接样式不在具有hover
和active
了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
图片下方有空隙产生:
解决这个BUG的方法也有很多,可以是改变html
的排版,或者定义img
为display:block
或者定义vertical-align: vertical-align:top/bottom/middle/text-bottom
,
还可以设置父容器的字体大小为零:font-size:0
。
<div style="background-color:#f00;height:0px;/*给定任何小于20px的高度*/"></div>
如果不让它默认为19px。而是0px的话,解决方法有3种:
a. css里面加上overflow:hidden;
;
b. div里面加上注释:<div><!– –></div>
;
c. css里面加上line-height:0;
然后div里面加上#nbsp;
;