寒假学习周结

一．自学外边距margin的相关知识

 

• 块级元素的居中

1. 设置块级元素CSS属性为：margin：0 auto；即左右margin设置为auto
2. 设置块级元素的display为inline（要求块级元素包含内容，否则由于内联元素的高度设置不起作用，相当于高度为零，块级元素就无法被看到）或者inline-block。该块状元素的父级元素CSS设置：text-align：center；此时会将该块级元素看作text进行居中处理。

• 嵌套块元素外边距合并导致的塌陷如何处理（有三种方法）

嵌套块元素塌陷：两个嵌套关系的块元素，如果父元素和子元素都有垂直外边距，那么父元素会塌陷外边距较大的值

1.给父元素上边框(影响父元素大小)

透明的border，不影响外观

.dad {
            width: 300px;
            height: 300px;
            background-color: blue;
            margin-top: 50px;
            /* 定义透明的上边框 */
            border-top: 1px solid transparent;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-top: 100px;
        }

2给父元素内边距(影响父元素大小)

细细的padding

.dad {
            width: 300px;
            height: 300px;
            background-color: blue;
            margin-top: 50px;
            /* 定义1px的内边距 */
            padding: 1px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-top: 100px;
        }

3 给父元素添加overflow：hidden

.dad {
            width: 300px;
            height: 300px;
            background-color: blue;
            margin-top: 50px;
            overflow: hidden;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-top: 100px;
        }

• 二.清除浮动的三种方法

清除浮动的本质是清除浮动元素脱离标准流造成的影响

策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

原因 1.父级没高度

         2.子盒子浮动了

         3.影响下面布局

方法一：额外标签法也称为隔墙法，是W3C推荐做法

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=”clear.both”></div>

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

方法二：为父元素设置overflow属性，取值hidden，auto，scroll

优点：代码简洁

缺点：无法显示溢出的部分

方法三：after伪元素法

 .clearfix:after{      
  content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

content:""; 生成内容为空 

display: block; 生成的元素以块级元素显示, 

clear:both; 清除前面元素浮动带来的影响 

相对于空标签闭合浮动的方法

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

方法四：双伪元素清除

   .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

优点：代码更简洁

缺点：照顾低版本浏览器