[北京|结业弟子]JS-朱春雨|2019年11月15日的日报-技能树.IT修真院

发表于： 2019-11-15 22:01:24

1 1046

今天完成的事情：

深度思考

雪碧图，减少网站请求和加载次数，提高网页显示的速度，整合小图标。

————————————————————————————————————————————

父元素不设置高度，子元素浮动父元素的高度无法被撑开造成父元素高度0

设置浮动父元素不设置高度就无法被子元素撑起它的高度浮动会脱离文档流浮动元素不会重叠

浮动元素的顶端不能比之前出现的浮动元素顶端高

清除浮动的办法，可以理解为闭合浮动

不设置margin为负值，父元素还有剩余空间的情况下,浮动元素的外边界不会超出父元素的内边界。

overflow方法的使用给父元素添加

 overflow: hidden;

父盒子里还有position定位会引起麻烦（但是测试没发现麻烦出在哪）内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用 before和after双伪元素清除浮动使用后发现父容器的高度被撑起来了

.ss:before,.ss::after {
   border: 1px solid red;
   width: 600px;
   content:"";
   display: table;
   
}
.ss::after {
    clear: both;
}
.ss {
    *zoom: 1;  指IE7一下浏览器  其他浏览读到 * 就不读了
}

额外标签法 clear:both清除浮动

在2个浮动元素中间加这个上面的元素虽然浮动，但撑起了父元素的高度，下面的元素浮动，但是没和上面的元素在一行

伪元素 after 清除浮动

.ss:after{
    content:"";             /*设置内容为空*/
    height:0;               /*高度为0*/
    line-height:0;          /*行高为0*/
    display:block;          /*将文本转为块级元素*/
    visibility:hidden;      /*将元素隐藏*/
    clear:both;             /*清除浮动*/
    border: 1px solid black;
}
.clearfix{
    zoom:1;                 /*为了兼容IE*/
}