浮动与盒模型

  <!--

浮动：

                标准文档流：元素默认的排列方式（垂直排列、水平排列）

                浮动：让元素漂浮起来

                作用：让垂直排列的元素可以横着排列（页面排版布局）

                属性：float：

                    取值：

                        left------左浮动

                        right-----右浮动

                        none------不浮动（默认值）

                元素浮动后特点：（兄弟关系）

                    1、多个元素同时浮动

                        如果同时左浮动，元素依次从左到右排列

                        如果同时右浮动，元素依次从右到左排列

                    2、元素添加浮动在页面中不占位置（脱离文档流）

                    3、多个元素同时浮动，一行内排列不下，最后一个浮动元素会自动折行显示

                    4、多个元素同时浮动，一行内排列不下，最后一个浮动元素会自动折行显示，折行位置取决于倒数第二个浮动元素的高度。

                清除浮动：（清除前面浮动元素带来的影响）

                    clear：

                        取值：

                            none------不清楚前面浮动父元素带来的影响

                            left-------清除前面前面左浮动元素带来的影响

                            right-------清除前面前面右浮动元素带来的影响

                            both-------清除前面前面浮动元素带来的影响

                浮动带来的影响：

                    父子关系中，子元素添加浮动，父元素高度会发生变化，---------高度塌陷

                        解决方法：

                            1、给子元素添加清除浮动（clear：both）,添加在不浮动元素身上

                            2、只有一个子元素，考虑在后面手动添加一个清除浮动的标签，（首选div，选择能够设置宽高的标签）（   <div class=“clearFix”></div>    ）

                                弊端：页面结构中多了一个标签

                            3、给父元素添加固定高度

                                弊端：子元素过多，里面内容会超出溢出

                            4、给父元素添加{overflow:hidden;}

                                元素添加overflow：hidden；触发了BFC机制（块级格式化上下文），形成一个独立的空间，

                                内部浮动元素的高度参与计算

                            5、万能清除法

                   

        盒子模型：

            概念：页面中任意一个元素都可以看作是盒子（容器），通常我们把div当成是一个盒子

            组成：（面试题）

                内容--------content

                边框--------border

                内边距------padding—————— 内容到边框之间的间距

                外边距------margin————————边到边之间的间距

               

                内边距：

                    padding：v1---------四个方向上相同内边距

                    padding：v1 v2---------v1:上下     v2:左右

                    padding：v1 v2 v3---------v1:上    v2:左右   v3:下

                    padding：v1 v2 v3 v4---------v1:上    v2:右   v3:下   v4：左

                    给具体某一个方向上添加内边距：

                        padding-方向词（top、right、bottom、left）

                        padding-top

                        padding-right

                        padding-bottom

                        padding-left

                    特点：

                        1、盒子会被撑大

                        2、背景颜色会蔓延到内边距上

                        3、取值为负数没有任何意义

                外边距：

                    margin---------四个方向上相同外边距

                    margin v2---------v1:上下     v2:左右

                    margin v2 v3---------v1:上    v2:左右   v3:下

                    margin v2 v3 v4---------v1:上    v2:右   v3:下   v4：左

                    给具体某一个方向上添加内外边距：

                        margin-方向词（top、right、bottom、left）

                        margin-top

                        margin-right

                        margin-bottom

                        margin-left

                    特点：

                        1、背景颜色不会蔓延到外边距

                        2、取值可以为负值

                        3、会更改盒子的位置

                标准盒子（w3c官方盒模型）

                    盒子宽度=内容宽+左右内边距+左右边框+左右外边距

                    盒子高度=内容高+上下内边距+上下边框+上外外边距

                IE怪异盒

                    需要触发条件：

                        属性：box-sizing：

                            取值：

                                content-box：标准盒子

                                border-box：怪异盒

                        怪异盒子宽=内容宽w（显示内容+左右内边距+左右边框）+左右外边距

                        怪异盒子高=内容宽h（显示内容+上下内边距+上下边框）+上下外边距

                如何区分标准盒子与怪异盒子？

                    看box-sizing：属性的取值为border-box

                外边距的特殊取值：(兄弟关系中)

                    1、元素水平排列，水平之间的外间距是相加和的关系

                    2、元素垂直上下排列，上下外间距取最大值

                父子关系中，子元素margin-top会作用在父元素上面，如何解决？

                    解决方法：

                        1、给父元素添加1像素透明边框，border：1px solid transparent

                        2、给父元素添加padding-top，此时父元素高度会被撑大，可以使用怪异盒子或者父元素高度减去padding-top值

                        3、给元素添加浮动

                        4、给元素添加定位

                        5、给父元素添加overflow：hidden

 

     -->

</body>

</html>