什么是布局?
- 将元素以正确大小摆放在正确的位置上
- 元素的摆放模式
display
设置元素的显示方式display: block | inline | inline-block | none
display:block
- 默认宽度为父元素宽度(影响大小)
- 可设置宽高(影响大小)
- 换行显示(影响位置)
默认块级元素:
divph1-h6ulform...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display block</title>
<style>
.sample{background-color: pink}
.sample{width: 200px;height: 200px;} /*可设置宽高*/
</style>
</head>
<body>
<span>before block</span>
<div class="sample">display:block;</div>
<div>after block</div>
</body>
</html>
display:inline
- 默认宽度为内容宽度
- 不可设置宽高
- 同行显示
默认行内元素:
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
- 默认宽度为内容宽度
- 可以设置宽高
- 同行显示
<!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
- 设置元素不显示
display:none vs visibility:hidden
- display:none 不显示也不再原来的位置
- visibility:hidden 只是隐藏还在原来的位置
<!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>
布局-块级元素水平居中
margin:auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级元素的水平居中</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>
布局-居中导航
display:inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中导航</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>
居中导航
如何实现浏览器兼容版的
inline-block显示
display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，请实现兼容ie6、ie7的通用的方式。
1､先使用display:inline-block，再使用display:inline；
div {
display:inline-block;
}
div {
display:inline;
}
2､先让块元素变为内联，再使用（zoom:1 或float属性等）触发块元素layout；
div{
display:inline-block;
*display:inline;
*zoom:1;
}
