div+css 布局技巧总计

Posted 2022-04-10 otblog

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

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