## 小技巧:
#### 1、 一个盒子加了浮动或者绝对/固定定位,直接转换成行内快模式,就可以直接给宽高。
#### 2、清除浮动本质:清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
- 1、额外标签法:在浮动盒子后面加一空盒子,
<div class="clear"></div>,
.clear {clear:both}
- 2、给父级加overflow:hidden;
- 3、after伪元素法:
.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }
.clearfix {* zoom:1}
- 4、双伪元素清除法:
.clearfix:before,.clearfix:after {
content:""; display:table; } .clearfix:after {
clear:both;}
.clearfix { * zoom:1;}
#### 3、嵌套关系垂直外边距合并问题:
- 1 子级或者父级加有浮动就不会发生垂直外边距合并问题
- 2 父级加有overflow:hidden;就不会发生垂直外边距合并问题
- 3 父级或者子级加绝对(固定)定位,就不会发生垂直外边距合并问题
- 4 不管父级子级加相对定位都不能解决
#### 4、盒子没有指定宽度,则padding不会撑开盒子 ,块级元素会继承父级的宽度,行内元素只设置左右内外边距。
#### 5、通栏的盒子加固定(绝对)定位,必须加上width:100%;盒子是脱标的,还需给下面的盒子加margin值
#### 6、文字溢出省略号代替三部曲:(常用语P标签)
- 1 white-space:nowrap;
- 2 overflow:hidden;
- 3 text-overflow:ellipsis;
#### 7. 字体图标声明: 一定注意字体文件路径的问题
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {font-family:"icomoon"} |
|