概述

div布局实际上是通过使用盒模型、display、float、position来实现对页面的布局。

本文内容主要介绍两种盒模型、display、float用法、position用法。

具体内容

默认的盒模型

box-size默认值为content-type的情况。设置的宽度就是元素内容的宽度。如果增加了padding,border，都会使空间增大。

默认是content_box, width的宽度就是元素的宽度。

标准盒模型

border_box盒模型

box-size值为border-box的情况。width的宽度是content + 2 * padding + 2 * border。

IE盒模型

display属性

display:none是指让元素隐藏，不显示，并且不占用页面的空间，但是html有这个元素。

display:block是指让元素置为块元素，独占一行，并且可以设置宽高。

display:inline是指让元素置为行标签，元素按顺序依次排列。无设置宽高属性。

display:inline-block:是指让元素同时拥有块和行标签的属性。

float属性

       1.将元素排除在普通流之外

       2.元素将不再页面占据空间

       3.将浮动元素放置在包含框的左边或者右边

       4.浮动元素依旧在包含框里面

       5.浮动元素的外边缘不会超过其父元素的内边缘。

       6.浮动元素不会互相重叠。

       7.浮动元素不会上下浮动。

       8.任何元素一旦浮动，display将失效，可设置高宽。不会独占一行。

        float元素:clear-both :取消其他元素浮动，对当前元素产生的影响

        float元素:使用overflow：hidden，在不设置父元素高度的情况下,使父元素可以感知子类的高度 

position属性

position属性指定一个元素的定位方法的类型。

absolute：绝对定位，不占有原来的物理位置。绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。如果没有relative，那么是相对于body的绝对定位。

relative：相对定位，是用来进行相对定位的，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置，原来的物理位置仍然存在。

fixed：固定定位，相对于浏览器的绝对定位，元素框从文档流完全删除。

案例分享

模仿对象 div模仿布局

本文代码GitHub地址（包含 模仿代码）