html自适应布局

<div class="all">

<div class="boxall">

<div class="box1"></div>

<div class="box2"></div>

</div>

<div class="box3"></div>

</div>

CSS:

.all{width:100%；height:500pxmargin:auto}

.boxall{ width:500pxheight:500pxfloat:left}

.box3{margin-left:500pxheight:500px}

在box3里面再写内容，宽度设为100%，内容就是自适应了，

在文档流中，DIV的高度默认就是根据内容的高度自适应的。

如果是想适配不同设备的窗口大小，可以设置百分比。或者通过position定位，然后设置top和bottom值。再或者利用css3的flexbox布局，设置父级的display为flex，方向为纵的，然后设置其flex：1；

很多站长朋友们都不太清楚html怎么调盒子大小，今天小编就来给大家整理html怎么调盒子大小，希望对各位有所帮助，具体内容如下：

HTML中盒子问题！

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

---