两种盒子模型和清楚浮动

1.标准和怪异:

    box-sizing:border-box;   --  标准盒子转为怪异盒子

    理解: 

        标准盒子宽度 = 内容+padding+border;

        怪异盒子宽度 = 您设置的宽度

2.超出处理:

   overflow:hidden | visible | auto | scroll;

    常用: overflow:hidden;   overflow-y:scroll;

3.display相关属性:

  display:inline;   --  转为行内元素

  display:block;    --  转为块级元素

  display:inline-block;  --   转为行内块 

  理解:何为行内块???既拥有行内元素排排坐的特征,又拥有块级元素可以设置宽高的特征;

  display:none;   ---  隐藏元素，结合我们的js来实现交互效果

4.浮动:

    理解: 元素会脱离文档流,不再占据位置;

    使用场景: 可以实现左左右或者左左左的布局

    注意:浮动的元素会被转为行内块

    清除浮动:

        方式一:给浮动元素的父元素添加固定高度

            优点:简单

            缺点:高度固定,不利于后期维护

        方式二:在浮动元素的父元素身上添加overflow:hidden,从而形成BFC机制

            优点:简单

            缺点:存在功能性的缺失

        方式三:在浮动元素的最后面添加空的div,然后利用clear:both;来进行浮动的清除

            优点: 不存在功能性缺陷;

            缺点: 不符合h5语义化标准的要求

        方式四: 

            .cf::after{
                content:"";
                display:block;
                clear:both;
            }

            添加在浮动元素的父元素身上;

5.其他样式

list-style:none;  --  去掉ul标签前面的小黑点

cursor:pointer;   --  改变鼠标的移入形状