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 class="father-block">
    <div class="child-once"></div>
    <div class="child-twice"></div>
</div>

这时，页面显示效果为：

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

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

.clear{
    clear:both;
}

界面html代码如下：

<div class="father-block">
    <div class="child-once"></div>
    <div class="child-twice"></div>
    <div class="clear"></div>
</div>

最终结果展示如下：

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

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

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