CSS中几种常见布局的实现方式

在准备春招前,对CSS的几种常见的方式做一下较为详细的总结吧。之前的实习中虽然实现了不少的布局设计,但没有形成一种完善的CSS编码思想,经常为了简单而直接使用position:absolute布局,这也是新手的一大盲区吧,绝对布局还是要尽量少用。

两列布局

题目: 做一个两列布局,左列宽度为150px,右列宽度自适应。
  • 实现方式一:绝对定位实现
<div class="h150 two-column-absolute">
    <div class="left">此方法为</div>
    <div class="right">绝对定位实现</div>
</div>
.two-column-absolute {
    position: relative;
}

.two-column-absolute .left{
    position: absolute;
    width: 150px;
    height: 100%;
}

.two-column-absolute .right{
    position: absolute;
    left: 150px;
    right: 0;
    height: 100%;
}
  • 实现方法二:浮动定位实现
<div class="h150 two-column-float">
    <div class="left">此方法为</div>
    <div class="right">浮动定位实现</div>
</div>
.two-column-float .left {
    float: left;
    width: 150px;
    height: 100%;
}

.two-column-float .right {
    margin-left: 150px;
    height: 100%;
}
  • 实现方法三:浮动+BFC
<div class="h150 two-column-float-bfc">
    <div class="left">此方法为</div>
    <div class="right">浮动+BFC实现</div>
</div>
.two-column-float-bfc .left {
    float: left;
    width: 150px;
    height: 100%;
}

.two-column-float-bfc .right {
    overflow: hidden;
    height: 100%;
}
  • 实现方法四:flex布局
<div class="h150 two-column-flex">
    <div class="left">此方法为</div>
    <div class="right">Flex实现</div>
</div>
.two-column-flex {
    display: flex;
    display: -webkit-flex;
}

.two-column-flex .left {
    width: 150px;
}

.two-column-flex .right {
    flex: 1;
}
/*这里flex的高度可以不设置为100%,因为在flex容器中,父元素的align-items默认值为stretch,即如果items未设置高度或设为auto,将占满整个容器的高度*/
  • 实现方法五:表格布局
<div class="h150 two-column-flex">
    <div class="left">此方法为</div>
    <div class="right">表格实现</div>
</div>
.two-column-table {
    display: table;
    width: 100%;
}

.two-column-table .left {
    display: table-cell;
    width: 150px;
}

.two-column-table .right {
    display: table-cell;
}
题目: 做一个两列布局,右列宽度为150px,左列宽度自适应。
  • 实现方式一:绝对定位实现
<div class="h150 two-column-right-absolute">
    <div class="left">此方法为</div>
    <div class="right">绝对定位实现</div>
</div>
.two-column-right-absolute {
    position: relative;
}

.two-column-right-absolute .left {
    position: absolute;
    left: 0;
    right: 150px;
    height: 100%;
}

.two-column-right-absolute .right {
    position: absolute;
    right: 0;
    width: 150px;
    height: 100%;
}
  • 实现方法二:浮动定位实现
<div class="h150 two-column-right-float">
    <div class="right">浮动定位实现</div>
    <div class="left">此方法为</div>
</div>
.two-column-right-float .left {
    margin-right: 150px;
    height: 100%;
}

.two-column-right-float .right {
    float: right;
    width: 150px;
    height: 100%;
}

/*注意 因为是向右浮动,因此html中right列应该放在left之前,否则会换行*/
  • 实现方法三:浮动+BFC
<div class="h150 two-column-right-float-bfc">
    <div class="right">浮动+BFC实现</div>
    <div class="left">此方法为</div>
</div>
.two-column-right-float-bfc .left {
    overflow: hidden;
    height: 100%;
}

.two-column-right-float-bfc .right {
    float: right;
    width: 150px;
    height: 100%;
}
  • 实现方法四:flex布局
<div class="h150 two-column-right-flex">
    <div class="left">此方法为</div>
    <div class="right">Flex实现</div>
</div>
.two-column-right-flex {
    display: flex;
    display: -webkit-flex;
}

.two-column-right-flex .left {
    flex: 1;
}

.two-column-right-flex .right {
    width: 150px;
}
  • 实现方法五:表格布局
<div class="h150 two-column-right-flex">
    <div class="left">此方法为</div>
    <div class="right">表格实现</div>
</div>
.two-column-right-table {
    display: table;
    width: 100%;
}

.two-column-right-table .left {
    display: table-cell;
}

.two-column-right-table .right {
    display: table-cell;
    width: 150px;
}

以上的实现方法都比较简单,这里需要侧重说明的一点是浮动布局和浮动加BFC的区别,我单独写了一篇关于浮动布局的博客,例子是以三列布局来写的。链接在此。

题目: 做一个三列布局,右列宽度为150px,左列宽度为250px,中列宽度自适应。
  • 实现方式一:绝对定位实现
<div class="h150 three-column-absolute">
    <div class="left">此方法为</div>
    <div class="center">三列布局</div>
    <div class="right">绝对定位实现</div>
</div>
.three-column-absolute {
    position: relative;
}

.three-column-absolute .left {
    position: absolute;
    width: 150px;
    left: 0;
    height: 100%;
}

.three-column-absolute .right {
    position: absolute;
    width: 250px;
    height: 100%;
    right: 0;
}

.three-column-absolute .center {
    position: absolute;
    left: 150px;
    right: 250px;
    height: 100%;
}
  • 实现方法二:浮动定位实现
<div class="h150 three-column-float">
    <div class="left">此方法为</div>
    <div class="right">浮动定位实现</div>
    <div class="center">
        三列布局
    </div>
</div>
.three-column-float .left {
    float: left;
    width: 150px;
    height: 100%;
}

.three-column-float .right {
    float: right;
    width: 250px;
    height: 100%;
}

.three-column-float .center {
    margin-right: 250px;
    margin-left: 150px;
    height: 100%;
}

/*注意 为了避免换行 html中left和right放在center前*/
  • 实现方法三:浮动+BFC
<div class="h150 three-column-float-bfc">
    <div class="left">此方法为</div>
    <div class="right">浮动+BFC实现</div>
    <div class="center">三列布局</div>
</div>
.three-column-float-bfc .left {
    float: left;
    width: 150px;
    height: 100%;
}

.three-column-float-bfc .right {
    float: right;
    width: 250px;
    height: 100%;
}

.three-column-float-bfc .center {
    overflow: hidden;
    height: 100%;
}
  • 实现方法四:flex布局
<div class="h150 three-column-flex">
    <div class="left">此方法为</div>
    <div class="center">三列布局</div>
    <div class="right">Flex实现</div>
</div>
.three-column-flex {
    display: flex;
    display: -webkit-flex;
}

.three-column-flex .left{
    width: 150px;
    height: 100%;
}

.three-column-flex .center {
    flex: 1;
}

.three-column-flex .right {
    width: 250px;
    height: 100%;
}
  • 实现方法五:表格布局
<div class="h150 three-column-table">
    <div class="left">此方法为</div>
    <div class="center">三列布局</div>
    <div class="right">表格布局实现</div>
</div>
.three-column-table {
    display: table;
    width: 100%;
}
/*注意 这里在父容器中要注明宽度*/

.three-column-table .left {
    display: table-cell;
    width: 150px;
}

.three-column-table .center {
    display: table-cell;
}

.three-column-table .right {
    display: table-cell;
    width: 250px;
}
九宫格
<section>
    <h1>九宫格</h1>
    <ul class="grid">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</section>
.grid {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    width: 300px;
    list-style: none;
}

.grid li {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 4px solid #333;
    box-sizing: border-box;
    margin-top: -4px;
    margin-left: -4px;
}

.grid li:nth-child(3n+1) {
    margin-left: 0;
}

.grid li:nth-child(-n+3) {
    margin-top: 0;
}

.grid li:hover {
    border: 4px solid red;
    z-index: 2;
}

说明一下九宫格里的几个注意点

  1. 多个相似块级元素用ul、li,为了语义化请不要使用多个div。ul要记住使用list-style: none删除默认样式(ul、li的圆点)
  2. flex布局尽量多加上display: -webkit-flex兼容
  3. item中使用box-sizing: border-box,避免边框的宽度影响布局,使用负边距完成边框合并
  4. 使用高级选择器筛选出九宫格上面三个和左边三个的负边距,将其重新设定为0。高级选择器这里说一点: nth-child(n+4)选取大于等于4标签,:nth-child(-n+4)选取小于等于4标签。记住:大于等于或者小于等于。
  5. hover的设定记得加上z-index,避免因为边框重合导致无法全部变色。

效果如下:
九宫格.png

 关于浮动布局、BFC、清除浮动
table布局总结 
上一篇:关于浮动布局、BFC、清除浮动
下一篇:table布局总结


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ