div+css 布局技巧总计

一、css 样式 1.float

首先需要了解块级元素（block element）。每个块级元素都默认占用一行，在同一行只能添加一个块元素（float 除外）。块级元素一般可以嵌套块级元素或者行内元素，如使用 div 布局。

float 一般用于 div 布局的情形下，浮动的 div 可以向左或者向右移动，直到它的外边缘碰到其父级元素的框或者另外一个浮动的 div 边框为止。个人理解为：float 将需要换行的块级元素悬浮，使得其可以在同一行中显示。

在 css 中可以通过float: left/right;进行设置。

2.clear

用于清除 float 效果。

3.border

border-radius属性可以设置边框的圆角，单位为像素。在设置方形 div 圆角样式时，如果将圆角像素设置为 div 边长的像素时，显示图形即为圆形。

border: solid #FFFFFF 1px;为设置边框的样式、颜色、宽度。

border-style ,border-color ,border-width 设置边框的样式、颜色、宽度。

二、div+css 布局技巧 1.让已知大小的 div 在页面中水平垂直居中 .test{ position:absolute; top:50%;left:50%; width:200px; height:200px; margin:-100px 0 0 -100px; } 2.解决“高度自适应时使用浮动，div 的高度不能跟随变大的问题”

当父级元素高度为auto时：

.father-block{ width: 100%; height: auto; }

如果在 divfather-block中有两个浮动的 div：

.child-once{ width: 30px; height:20px; float: left; background-color: black; } .child-twice{ width: 30px; height:20px; float: right; background-color: red; }

html 如下：

<div> <div></div> <div></div> </div>

这时，页面显示效果为：

原因：在 div 设置 float 之后，相当于将 div 元素悬浮于父级元素之上，而不再是处于父级元素之中，当父级元素的height设置为auto时，因为在父级元素中已经没有了 div，故而height为 0。

解决办法：使用clear属性清除浮动。css 代码如下：

.clear{ clear:both; }

界面 html 代码如下：

<div> <div></div> <div></div> <div></div> </div>

最终结果展示如下：

3.当分辨率发生变化时界面样式错乱

可以通过设置每个 div 的min-width属性来解决。

缺点：界面会超出电脑屏幕，需要拉动滑动框进行浏览。