开发者学堂课程【零基础学前端 HTML+CSS ：display 属性和实例】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5142
display 属性和实例
内容介绍
一. 标准流
二. 行内元素的盒子
三. 改变行内元素的高度
四. display 属性
五. block 元素
六. inline 元素的特点
七. inline-block 行内块元素
八. 需要使用display 属性切换的情况
九. 隐藏元素 display: none
十. 标准流下定位的应用-制作竖直导航菜单
一. 标准流
1.标准流介绍
（1）概念
HTML 元素在标准状况下的定位方式
行内元素在同一行内横向排列
块级元素占满整个一行，在页面中竖向排列
元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系
（2）补充解释
不做任何操作即为标准形式
块级元素是每行进行叠加的
2.示例代码
<style type="text/css">
*{
border:2px dashed #FF0066;
padding:10px;
margin:2px;
}
</style>
<body>
<div>网页的banner(块级元素)</div>
<a href="#">行内元素1</ a>
<a href="#">行内2</ a>
< a href=" ">行内3</ a>
<div>这是无名块<p>这是盒子中的盒子</p > </div>
行内元素
1. 行内元素2. 行内元素3为行级元素
网页的 banner 为块级元素
二. 行内元素的盒子
1.行内元素的盒子介绍
行内元素的盒子永远只能在浏览器中得到一行高度的空间(行高由 line-height 属性决定，如果没设置该属性，则是内容的默认高度)，如果给它设置上下 border，margin，padding 等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。
因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。
2.补充解释
（1）上一板块示例代码中
*{ //*代表所有的元素都有 padding 和 margin
border:2px dashed #FF0066;
padding:10px;
margin:2px;
}
图中红框和蓝框有重叠，如果需要让两种框有距离感就需要由行高来决定。
（2）操作示例
第一步:首先加上 span 标签，在标签中添加上文字。再增加 style，给 span 增加一个背景颜色（浅蓝）运行可以看到标签上有浅蓝色。
第二步：设立普通高度 height：100px 时标签文字高度没有变化，但设置行高line-height：100px 时上下行之间则会出现 100px 的距离。
注：行高可以设置成百分比的形式例如100%，120%等。
（3）总结
行元素可以用 line-height 来控制文本中行与行之间的距离，可以用像素这样的固定的值。也可以用百分比，根据浏览器的大小不同进行缩放。
三. 改变行内元素的高度
1.介绍
如图所示，当增加行内元素的边界和填充时，行内元素 a 占据浏览器的高度并没有增加，下面这个 div 块仍然在原来的位置导致行内元素盒子的上下部分重叠，而左右部分不会受影响
四. display 属性
1.display 属性介绍
通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示
display: block | inline | none | list-item
inline-block 行内块元素。(CSS2.1新增的值)
2.操作示例
先写入 <div class=“k1”>我是一个块</div>再把 span 标签中的文字改成“我是一个行” <span class=“k1”>我是一个块</span>。style 中填入
#k1{
width:500px;//宽500像素
height:200px;//高200像素
background-color: #b3d4fc; //背景颜色为蓝色
margin:20px；
}
可以得出行级元素高可以用 line-height 来控制，宽由内容而定进行缩放。但是通过 display 属性进行行与块之间的转换
3.说明
display 属性大多数是行与块之间的转换
五. block 元素
1.block 元素的特点
block 元素的特点是:
总是在新行上开始;
高度，行高以及顶和底边距都可控制;
2.说明
默认的宽度是它的容器的100%建，立 div 时虚线占了屏幕即是默认宽度，除非用width 设定一个宽度。<div>,<p>，<h1>，<form>，<ul>和<li>是块元素的例子
六. inline 元素的特点
1.inline 元素的特点
inline 元素的特点是:
默认和其他元素都在一行上。
高，行高及顶和底边距不可改变。
宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>,<input>，<img>，<strong>和<em>是 inline 元素的例子。
2.说明
通过 display 属性可以进行行和块元素之间的互相转换。
七. 需要使用 display 属性切换的情况
1.需要使用 display 属性切换的情况
让一个 inline 元素从新行开始;
让块元素和其他元素保持在一行上;
控制 inline 元素的宽度;
控制 inline 元素的高度(对导航条特别有用);
无须设定宽度即可为一个块元素设定与文字同宽的背景色
2.操作示例
第一步：Style 中增加k2（灰色）k3（黄色）。k2，k3中添加 display：inline，可以看到 k2，k3 中行和宽都消失了，k2，k3，h1在一行上，它们有相同的属性。
第二步：将h1添加成与k3相同的属性并添加 display：block。可以看到 h1 从行元素变成了块元素并且在k2，k3的下方。即完成了行与块之间属性的切换。
八. inline-block 行内块元素
1.inline-block 行内块元素介绍
inline-block属性值，既是行元素，但又有块元素的属性。
2.操作示例
第一步添加k4（绿色），k5（黄色）板块，添加与k3相同的属性，把 display 中属性改为 display：inline-block 可以看到k3与k4既具有行元素的特点可以横向排列，有具有块元素的特点可以设置宽高
3.总结
如果想又具有行元素一排的属性，也具有块元素可以设置宽高的特性，我们可以设置 display 属性为 inline-block，一般用于无序列表等。
九. 隐藏元素 display: none
1.隐藏元素 display: none 介绍
当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。像 title 元素默认就是此类型。比较 visibility: hidden;
制作下拉菜单、tab 面板等有时就需要用 display: none 把菜单或面板隐藏起来。
注意： none 叫隐藏，但不是删除，只是不显示。
2.操作示例
第一步在 k4 中 display 属性改为 display: none。运行后可以看到k4板块在页面中没有显示。
十. 标准流下定位的应用-制作竖直导航菜单
1.示例代码
<!DOCTYPE html>
<html>
<head lang="en”>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="nav">
<ul>
<li>首页</li>
<li>新闻</li>
<li>娱乐</li>
<li>科技</li>
<li>财经</li>
</ul>
第一步将上述代码中写入
<style>
.nav ul{
list-style: none；
}
</style>
可以看到列表中汉字前面的符号“点“
第二步添加超级链接将列表改为
<li>< a href=" ">首页</ a></1i>
<li>< a href="#">新闻</ a></1i>
<li>< a href="#">娱乐</ a></1i>
<li>< a href="#">科技</ a></1i>
<li>< a href="#">财经</ a></1i>
第三步添加背景并转化为行内块元素
.nav li{
background-color: aquamarine;
font-size: 20px;
width：100px；
height：30px；
text-aligent：center；
display : inline-block;
}
第四步使鼠标放置到板块时颜色发生改变
.nav li: hover{//所有有关网页的元素
background-color:#b3d4fc;
}
2.用行和块制作菜单的示例代码
#nav a{
font-size: 14px;
color: #333333;
text-decoration: none；
background-color:#CCCCCC
display: block;
width:140px;
padding:6px 10px 4px;
border: 1px solid #000000
margin: 2px;
}
#nav a:hover {
color: #FFFFFF:
background-color: #666666;
}
2.说明
一般使用无序列表来做菜单，经常使用 display 改变行和块的属性，因为 ul li 都是块元素。
