什么是布局?
- 將元素以正確大小擺放在正確的位置上
- 元素的擺放模式
display
設(shè)置元素的顯示方式display: block | inline | inline-block | none
display:block
- 默認(rèn)寬度為父元素寬度(影響大小)
- 可設(shè)置寬高(影響大小)
- 換行顯示(影響位置)
默認(rèn)塊級(jí)元素:
divph1-h6ulform...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display block</title>
<style>
.sample{background-color: pink}
.sample{width: 200px;height: 200px;} /*可設(shè)置寬高*/
</style>
</head>
<body>
<span>before block</span>
<div class="sample">display:block;</div>
<div>after block</div>
</body>
</html>
display:inline
- 默認(rèn)寬度為內(nèi)容寬度
- 不可設(shè)置寬高
- 同行顯示
默認(rèn)行內(nèi)元素:
spanalabelciteem...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display inline</title>
<style>
.sample{background-color: pink}
.sample{width: 200px;height: 200px;}
em{display: block;}
</style>
</head>
<body>
<span>before inline</span>
<span class="sample">display:inline;</span>
<em>after inline</em>
</body>
</html>
display:inline-block
- 默認(rèn)寬度為內(nèi)容寬度
- 可以設(shè)置寬高
- 同行顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display inline-block</title>
<style>
.sample{background-color: pink}
.sample{display: inline-block;}
.sample{width: 200px;height: 200px;}
.sample{vertical-align: middle;}
</style>
</head>
<body>
<span>before inline-block</span>
<span class="sample">display:inline-block;</span>
<em>after inline-block</em>
</body>
</html>
display:none
- 設(shè)置元素不顯示
display:none vs visibility:hidden
- display:none 不顯示也不再原來(lái)的位置
- visibility:hidden 只是隱藏還在原來(lái)的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display none demo</title>
<style>
.parent{margin: 30px;border: 1px solid pink;}
/*.dn{display: none;}*/
/*.vh{visibility: hidden;}*/
</style>
</head>
<body>
<div class="parent">
<div class="dn">display: none</div>
</div>
<div class="parent">
<div class="vh">visibility: hidden</div>
</div>
</body>
</html>
布局-塊級(jí)元素水平居中
margin:auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>塊級(jí)元素的水平居中</title>
<style>
.content{width: 300px;height: 300px;background-color: pink;}
.content{margin:0 auto;}
</style>
</head>
<body>
<div>
<div class="content">content area</div>
</div>
</body>
</html>
布局-居中導(dǎo)航
display:inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中導(dǎo)航</title>
<style>
ul{text-align: center;height: 30px;line-height: 30px;background-color: #f00;}
li, a{display: inline-block;width: 80px;height: 100%;}
li{margin: 0 5px;list-style: none;}
a, a:hover, li.cur a{color: #fff;text-decoration: none;}
a:hover, li.cur a{background-color: #c00}
</style>
</head>
<body>
<ul class="m-nav">
<li><a href="#">推薦</a></li>
<li class="cur"><a href="#">歌單</a></li>
<li><a href="#">大牌DJ</a></li>
<li><a href="#">歌手</a></li>
<li><a href="#">新碟上架</a></li>
</ul>
</body>
</html>
居中導(dǎo)航
如何實(shí)現(xiàn)瀏覽器兼容版的
inline-block顯示
display:inline-block;在ie6返干、ie7下只有設(shè)置在默認(rèn)顯示方式為inline的元素上才會(huì)生效若厚，請(qǐng)實(shí)現(xiàn)兼容ie6、ie7的通用的方式。
1?先使用display:inline-block，再使用display:inline；
div {
display:inline-block;
}
div {
display:inline;
}
2?先讓塊元素變?yōu)閮?nèi)聯(lián)鳞疲，再使用（zoom:1 或float屬性等）觸發(fā)塊元素layout；
div{
display:inline-block;
*display:inline;
*zoom:1;
}
