div+css 布局技巧总计

1、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 设置边框的样式、颜色、宽度。

2、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属性来解决。

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