CSS 基本布局以及一些小技巧

1. 左右布局

如果有以下html结构，设置左右两栏布局

<div class="parent">
  <div class="leftChild"></div>
  <div class="rightChild"></div>
</div>
  • 设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下：
.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.leftChild,
.rightChild{
  float:left;
}
  • 设置position绝对定位，为父元素设置position:relative; 为子元素设置position:absolute 。示例代码如下：
.parent{
  position:relative;
}
.leftChild{
  position:absolute;
  left:0;
  top:0;
}
.rightChild{
  position:absolute;
  left:200px;
  top:0;
}

2.左中右布局

左右固定宽度，中间自适应(5种方法)

<head>
    <meta charset="utf-8">
    <title>css布局全解</title>
    <style type="text/css">
        html *{
            padding: 0;
            margin: 0
        }
        .layout article div{
            min-height: 50px;
        }

        .layout{
            margin-top: 10px;
        }
    </style>
</head>
  1. float方法
<!-- 1.float 方法-->
    <section class="layout float">
        <style media="screen">
            .layout.float .right{
                float: right;
                width: 300px;
                background: red;
            }
            .layout.float .left{
                float: left;
                width: 300px;
                background: blue;
            }
            .layout.float .center{
                background: yellow;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮动解决方案</h1>
            </div>
        </article>
    </section>
  1. absolute方法
<!-- 2.绝对定位写法 -->
    <section class="layout absolute">
        <style>
            .layout.absolute .left-center-right div{
                position: absolute;
            }
            .layout.absolute .left{
                width: 300px;
                left: 0;
                background: blue;
            }
            .layout.absolute .center{
                left: 300px;
                right: 300px;
                background: yellow;
            }
            .layout.absolute .right{
                width: 300px;
                right: 0px;
                background: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>绝对定位解决方案</h1>
            </div>
            <div class="right"></div>
        </article>
    </section>
  1. flexbox方法
<!-- 3.flex布局 -->
    <section class="layout flexbox">
        <style>
            .layout.flexbox{
                margin-top: 70px;
            }
            .layout.flexbox .left-center-right{
                display: flex;
            }
            .layout.flexbox .left{
                width: 300px;
                background: blue;
            }
            .layout.flexbox .center{
                flex:1;
                background: yellow;
            }
            .layout.flexbox .right{
                width: 300px;
                background: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>flex定位解决方案</h1>
            </div>
            <div class="right"></div>
        </article>
    </section>
  1. table方法
<!-- 4.表格布局 -->
    <section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                width: 100%;
                height: 50px;
            }
            .layout.table .left-center-right div{
                display: table-cell;
            }
            .layout.table .left{
                width: 300px;
                background: blue;
            }
            .layout.table .center{
                background: yellow;
            }
            .layout.table .right{
                width: 300px;
                background: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>表格定位解决方案</h1>
            </div>
            <div class="right"></div>
        </article>
    </section>
  1. grid方法
<!--5.网格布局 -->
    <section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 50px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left{
                background: blue;
            }
            .layout.grid .center{
                background: yellow;
            }
            .layout.grid .right{
                background: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>网格定位解决方案</h1>
            </div>
            <div class="right"></div>
        </article>
    </section>

3.水平居中

  • 文字的水平居中:
text-align:center;
  • 单行文字的垂直居中：
line-height:30px;
height:30px;
  • 让有宽度的div水平居中：
margin: 0 auto;
width:300px;//必须要有宽度，margin:0 auto才能让它居中

4.垂直居中

  • 让绝对定位的div垂直居中：
position:absolute;
top:0;
bottom:0;
margin:auto 0;  //垂直方向的auto 发挥的作用
width:300px;
height:300px;
  • 同理，让绝对定位的div水平和垂直方向都居中：
position:absolute;
top:0;
left: 0;
right:0;
bottom:0;
margin:auto; 
width:300px;
height:300px;
  • 已知宽高的容器的水平垂直方向居中：
width: 300px;
height:300px;
position: absolute;
top:50%;
left:50%;
margin-top: -150px; //自身高度的一半
margin-left:-150px;
  • 未知宽高的容器的水平垂直方向居中：
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

注：transform属性，低版本浏览器不兼容，例如IE8, Android 4.4.2.
移动端可以加入-webkit等前缀解决。
注：transform属性对position:fixed子元素有影响，遇到这个问题的是pc： chrome 版本：59.0.3071.115

  • 水平垂直居中记得要想到flexbox:
.container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .div{
//whatever
}

此时.div无论是否已知宽高，都能两个方向居中。

  • 垂直居中（表格布局法）
.container{
  display: table;
}
.container .div{
  display: table-cell;
  vertical-align:middle;
}

5.其他小技巧

  • 使用伪元素清除浮动 ，代码展示见下一条。
  • 当要达到一个元素hover状态下有边框，正常情况下无边框时，如果直接在hover状态添加边框，该元素会因为多出来的border宽度导致位置有略微改变。技巧：可以在普通情况下就添加透明色的边框，hover时改变颜色即可。比如
    html代码：
<nav class="clearfix">
  <li><a href="#">link1</a></li>
  <li><a href="#">link2</a></li>
  <li><a href="#">link3</a></li>
  <li><a href="#">link4</a></li>
  <li><a href="#">link5</a></li>
  <li><a href="#">link6</a></li>
</nav>

css代码

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
nav{
  border: 1px solid red;
  float: right;
}
nav > li{
  float: left;
  list-style: none;
}
nav > li > a{
  text-decoration: none;
  color:inherit;
  display: inline-block;
  margin:5px;
  padding:10px;
  border: 3px solid transparent;
  transition:0.3s;
}
nav > li > a:hover{
  border:3px solid blue;
}

效果图：


  • 水平线样式设置
    代码示例：
hr{
    height:0;
    border:none;
    border-top:1px solid red;
}
  • dl中dd、dt设置左右结构
    html代码
<body>
<main>
  <dl class="clearfix">
    <dt>num</dt>
    <dd>1</dd>
    <dt>num</dt>
    <dd>2</dd>
    <dt>num</dt>
    <dd>3</dd>
    <dt>num</dt>
    <dd>4</dd>
  </dl>
</main>

css代码

main > dl{
  width:300px;
  border: 1px solid;
}
main > dl >dt,
main > dl >dd{
  float: left;
  width:30%;
  box-sizing:border-box;
  border:1px solid blue;
}
main > dl >dd{
  width:70%;
}

效果图：


  • 一些图标素材可以使用iconfont网站 来查找
  • 合理使用伪元素（如::after、::before）
  • 块级元素宽度自使用，合理使用max-width属性
  • a标签去掉其默认样式时，颜色可设置为继承父元素a{color:inherit;}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容