display模式

“块”模式(block)与“行内”模式(inline)

对于页面中的可视元素，浏览器通常有两种渲染方式：

块：将元素渲染成为页面中的一个独立区块，而且这个元素会“独占一行”。
行内：将元素渲染成为一个“队列”中的单元，队列中的每一个元素与其相邻的元素都“手牵着手”左右相拥，除非受到父级元素的宽度限制而不得不换行。

为了让大家观察到这两类模式的特点，在下面的例子中，我们为元素设置一个背景色以及外边距：

这是一个很长很长很长很长很长很长很长很长很长很长很长很长段落，整个段落就是一个块标记

行内行内行内行内行内行内行内行内行内行内行内行内行内行内行内行内行内行内行内

对于以下几类标记，浏览器会默认以“块模式”渲染：

<div><p><h1><h2><h3><h4><h5><h6><ul><li>...

对于以下几类标记，浏览器会默认以“行内”模式渲染：

<a><span><em>...

在CSS中设置display模式

除了浏览器默认的模式外，在CSS中还可以通过设置display属性强制浏览器按其他模式来渲染元素。在设置display模式时，应该注意以下几点：

你可以通过在CSS中设置元素的display:block，来强制让元素以块模式渲染。设置为块以后，元素会独占一行，而且可以为其设置高度和宽度，也可以通过坐标精确地控制它们的位置。
你可以通过在CSS中设置元素的display:inline，来强制让元素以行内模式渲染。设置为行内后，你将无法为元素设置高度和宽度，也无法精确控制它们的位置，它们的位置由其所在的文本流状态决定。
有时为了需要，你可能希望元素既有块的特点（能设置高度宽度），又有行内的特点（能跟随文本流动），这个时候，你需要把该元素的现实属性改成“行内块”，即display:inline-block。
如果设置display:none，那么元素将从页面上消失。

上面几种只介绍了几种常见的模式，要进一步了解display属性，请参考MDN

试试通过CSS改变元素的display属性

试试通过CSS改变一个元素的display属性，然后看看会发生什么变化。注意，浏览器默认会按照block模式渲染div标记。

<div class="displaydemo">一个元素</div>
<div class="displaydemo">一个元素</div>
<div class="displaydemo">一个元素</div>
<div class="displaydemo">一个元素</div>
<div class="displaydemo">一个元素</div>

div.displaydemo{display:inline;}

水平排列的导航栏

提示与注意事项：

不能改变HTML代码结构
要通过伪类选择器控制按钮对鼠标的响应
<a>标签默认是inline元素，无法设置高和宽
<li>标签默认是block元素，一个<li>会独占一行，无法并排显示

<ul class="demo_menu">
<li><a href="http://www.163.com">网易</a></li>
<li><a href="http://www.hnu.edu.cn">湖南大学</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.qq.com">腾讯</a></li>
</ul>

“弹性”模式（flex）

除了block与inline外，flex也是一种非常有用的模式。利用flex，可以控制一组元素标记的宽度保持一个固定的比例关系。先来看看下面的使用示例：

<div class="flexbox">
<div class="noneflex">div.noneflex，固定尺寸</div>
<div class="flex1">div.flex1，flex比例为1</div>
<div class="flex2">div.flex2，flex比例为2</div>
</div>

.flexbox{	
	display:flex;
	}
.flexbox div{
	height:80px;
	color:#fff;
	text-shadow:0 0 4px rgba(0,0,0,0.2)
	}
.flexbox .noneflex{
	width:200px;
	flex:none;
	background:#6CF;
	}
.flexbox .flex1{	
	flex:1;
	background:#FC0;
	}
.flexbox .flex2{	
	flex:2;
	background:#9C0;
	}

div.noneflex，固定尺寸

div.flex1，flex比例为1

div.flex2，flex比例为2

上例中，我们给父级容器div.flexbox设置了 display:flex后，其子级容器，就会按照flex模式显示。

div.noneflex的flex:none，且width:200px，所以无论div.flexbox宽度如何变化，它始终保持200px;
div.flex1和div.flex2的flex分别设置为1和2，且没有固定宽度值。所以，div.flex1的实际宽度将是父级容器宽度减去200px后剩余宽度的1/3；div.flex2的实际宽度将是父级容器宽度减去200px后剩余宽度的2/3

只有部分浏览器比如firefox，chrome以及opera支持CSS flex！

使用flex制作水平排列的导航栏

使用css flex按照下面的设计稿制作水平排列的导航栏。设计稿源文件可在这里下载。

注意：请参考前一个导航栏的示例使用ul，li和a标签来构建导航栏的HTML结构；左侧的logo可以使用css background的方式来显示。