CSS常见布局技巧

最新推荐文章于 2025-06-09 22:31:27 发布

weixin_34383618

最新推荐文章于 2025-06-09 22:31:27 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c2e33ac5188251a1d793343

1. 三栏布局

以下主要讨论三栏布局，两栏和多栏同理，

浮动+clear实现

子元素浮动，父元素添加清除浮动，html如下：

<div class="wrapper clearfix">
    <div class="left">左边栏</div>
    <div class="middle">中间栏中间栏中间栏中间栏中间栏</div>
    <div class="right">右边栏</div>
</div>
复制代码

CSS如下：

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
.wrapper{
    max-width: 360px;
    margin: 0 auto;
    border: 1px solid;
}
.left{
    width: 20%;
    float: left;
    background: #1aa;
}
.middle{
    width: 60%;
    float: left;
    background: #77a;
}
.right{
    width: 20%;
    float: left;
    background: #a7a;
}
复制代码

显示效果：

table-cell

利用CSS3单元格实现，把left，middle，right类改为如下形式即可。

.left{
    display: table-cell;
    width: 20%;
    background: #1aa;
}
.middle{
    display: table-cell;            
    background: #77a;
}
.right{
    display: table-cell;
    width: 20%;
    background: #a77;
}
复制代码

显示效果与上相同，并且中栏可自适应窗口。不过table-cell只适用于较新的浏览器，为了适应老浏览器还可以用负边距法。

2. 水平居中

行内元素水平居中

适用于文字，链接，及其inline或者inline-block、inline-table和inline-flex。给要居中元素父元素添加：

.container{
    text-align:center;
}
复制代码

块状元素的水平居中

给父元素设置width，给居中元素设置如下规则：

.block{
    margin:0 auto;
}
复制代码

若父元素宽度未知，则可先设为display: inline-block，再按行内元素方法(tac)居中。

3. 垂直居中

行内垂直居中

把line-height设置成和height一样高即可。如果有n行文字，那么将行高设为容器高度的n分之一即可。或者设置上下pandding相等

固定宽高居中

先下移50%，再上移自身高度一半。结构如下：

<div id="big">
    <div id="small"></div>
</div>
复制代码

样式如下：

#big {
    position:relative;
    height:480px;
}
#small {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px;
}
复制代码

4. 小技巧

用max-width自适应，而非width（会有滚动条）。
<span>不接受设置宽高。改inline-block，计算padding，从里面做出去。
子绝父相，在子元素上写p:abs，父元素写p:rel。
CSS重置用于取消浏览器的内置样式，可参考YUI和Eric Meyer的样式表。
下载东西要新开页面，所以用<a>而非<button>。
让padding、margin不改宽度：box-sizing: border-box;

转载于:https://juejin.im/post/5c2e33ac5188251a1d793343