黑马程序员技术交流社区

标题: 【成都校区】前端小技巧笔记 [打印本页]

---

作者: z-snow    时间: 2019-4-10 23:50
标题: 【成都校区】前端小技巧笔记
## 小技巧：
#### 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"}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2