A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© z-snow 中级黑马   /  2019-4-10 23:50  /  1153 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

## 小技巧:
#### 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"}

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马