display
属性block
- 默认宽度为父元素的宽度:影响元素大小
- 可设置宽高:影响元素大小
- 换行显示:影响元素的位置
默认常见div p h1 ul form….
属性inline
- 默认宽度为内容宽度
- 宽高设置无效
- 同行显示
属性:inline-block
- 默认宽度为内容宽度
- 可以设置宽高(会影响前续和后续元素的宽高)
- 同行显示
- 整块换行
默认display:inline-block元素:input textarea select button,…
属性:none
display:none和visbility:hidden的区别在于hidden会占据文档流位置;
布局
块级元素的水平居中
<!DCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级元素水平居中</title>
<style>
*{margin:0; padding:0;}
.content{width:300px;height:300px; background-color:pink;}
.content{margin:0 auto;}//水平居中
</style>
</head>
<div>
<div class="content">Content areas</div>
</div>
布局–居中导航
html结构
<ul>
<li><a href="#">推荐</a></li>
<li><a href="#">歌单</a></li>
<li><a href="#">大牌DJ</a></li>
<li><a href="#">歌手</a></li>
<li><a href="#">新碟上架<a/></li>
</ul>
css样式
ul{text-align:center; height:300px; line-height:30px;}//text-align:center
li,a{display:inline-block;width:80px; height:100%;}//inline-block
li{margin 0 10px;}