网页布局的三种方式

网页布局的三种方式：

一、标准文档流

1、从上到下从左到右（块级元素div，ul，li，dl，dt，p和行级元素上盘，img，strong，input）。

2、盒子模型

盒子模型属性：边框border，内边距padding（上，右，下，左）（上，左右，下）（上下，左右），外边距margin（上，右，下，左）（上，左右，下）（上下，左右）。

3、盒子3d模型

盒子3d模型层级有border；content+padding；background-img；background-color；margin。

4、盒子模型尺寸等于边框＋外边距＋内边距＋盒子中间内容尺寸。

二、浮动float

float：left，right，none。

清除浮动：

1、clear：both；（一般用于紧邻后面的元素清除浮动）。

2、同时设置width：1000%（固定宽度）＋overflow：hidden。

注：当父包含快缩成一条时，用clear：both方法无效；一般用清除浮动的第二种方法。

三、绝对定位

1、静态定位，2、相对定位，3、绝对定位。

网页布局方式还有：

1、一列布局

一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等。

2、两列布局

说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。

设置左左浮动，或设置左右浮动。（这是需要确定父级元素的宽度）

3、三列布局

两侧定宽中间自适应。首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响。

是因为一个css设置：box-sizing
默认是content-box，实际width=设置width+边框+间距，而在border-box下，宽度设置好，边框和间距会自动调整宽度，满足设置的值。
语法
box-sizing：content-box | border-box
默认值：content-box
取值
content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
参考百度百科：>

设置两个div之间的间距的方法：

先定义两个div，div里面分别有一段话。

2分别给两个div加上不同的背景色，方便看到div的位置。

3设置div的margin；使两个div之间的间距扩大。

这样让两个div之间的间距扩大的问题就解决了。

扩展资料：

div常用属性

1Height:设置DIV的高度；Width:设置DIV的宽度。

2margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left]

3padding:用于设置DIV的内边距（内如子元素与DIV边界的距离）。padding:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；

4border:设置DIV的边框样式；

5background:设置DIV的背景样式；background后可直接跟背景的颜色、背景、平铺方式等样式。

6position:设置DIV的定位方式。position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。

7display:设置显示属性。其值有block、none；

8float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none；

---