1. 左右布局
如果有以下html結(jié)構(gòu)，設(shè)置左右兩欄布局
<div class="parent">
<div class="leftChild"></div>
<div class="rightChild"></div>
</div>
- 設(shè)置浮動(dòng)：左右布局常用的方法就是為子元素設(shè)置浮動(dòng)，然后在其父元素上使用clearfix類清除浮動(dòng)。示例代碼如下：
.clearfix::after{
content:"";
display:block;
clear:both;
}
.leftChild,
.rightChild{
float:left;
}
-
設(shè)置position絕對(duì)定位，為父元素設(shè)置
position:relative; 為子元素設(shè)置position:absolute。示例代碼如下：
.parent{
position:relative;
}
.leftChild{
position:absolute;
left:0;
top:0;
}
.rightChild{
position:absolute;
left:200px;
top:0;
}
2.左中右布局
左右固定寬度隔心，中間自適應(yīng)(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>
- 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>浮動(dòng)解決方案</h1>
</div>
</article>
</section>
- absolute方法
<!-- 2.絕對(duì)定位寫法 -->
<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>絕對(duì)定位解決方案</h1>
</div>
<div class="right"></div>
</article>
</section>
- 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>
- 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>
- grid方法
<!--5.網(wǎng)格布局 -->
<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>網(wǎng)格定位解決方案</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.垂直居中
- 讓絕對(duì)定位的div垂直居中：
position:absolute;
top:0;
bottom:0;
margin:auto 0; //垂直方向的auto 發(fā)揮的作用
width:300px;
height:300px;
- 同理尚胞，讓絕對(duì)定位的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.
移動(dòng)端可以加入-webkit等前綴解決笼裳。
注：transform屬性對(duì)position:fixed子元素有影響唯卖，遇到這個(gè)問題的是pc： chrome 版本：59.0.3071.115
- 水平垂直居中記得要想到flexbox:
.container{
display: flex;
align-items: center;
justify-content: center;
}
.container .div{
//whatever
}
此時(shí).div無論是否已知寬高，都能兩個(gè)方向居中躬柬。
- 垂直居中（表格布局法）
.container{
display: table;
}
.container .div{
display: table-cell;
vertical-align:middle;
}
5.其他小技巧
- 使用偽元素清除浮動(dòng) 拜轨，代碼展示見下一條。
- 當(dāng)要達(dá)到一個(gè)元素hover狀態(tài)下有邊框允青，正常情況下無邊框時(shí)橄碾，如果直接在hover狀態(tài)添加邊框，該元素會(huì)因?yàn)槎喑鰜淼腷order寬度導(dǎo)致位置有略微改變颠锉。技巧：可以在普通情況下就添加透明色的邊框法牲，hover時(shí)改變顏色即可。比如
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;
}
效果圖：
- 水平線樣式設(shè)置
代碼示例：
hr{
height:0;
border:none;
border-top:1px solid red;
}
- dl中dd琼掠、dt設(shè)置左右結(jié)構(gòu)
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%;
}
效果圖：
- 一些圖標(biāo)素材可以使用iconfont網(wǎng)站 來查找
- 合理使用偽元素（如
::after拒垃、::before） - 塊級(jí)元素寬度自使用，合理使用
max-width屬性 - a標(biāo)簽去掉其默認(rèn)樣式時(shí)瓷蛙，顏色可設(shè)置為繼承父元素
a{color:inherit;}
