display属性
1.引入
上几次课程的学习我们学习了一个比较重要的概念:盒子模型，下面我们来学习一个比较重要的属性：display，该属性是一个比较特殊的属性，它可以通过属性值控制元素是否显示，也可以控制元素的布局。
2.html页面标签分类
在正式的学习display属性之前，我们需要对页面的常见的标签元素进行一个简单的分类，我们按照标签在页面上放置的时候是否能够完整的占据页面宽度为依据可以把元素分为两类:
(1)、块级元素
常见的块级元素h1~h6(块状元素)、p(段落标签)、hr(水平线)、ul-li/ol-li/dl-dt-dd(列表标签)、table(表格标签)、div(层)、form(表单)等
块级元素代码示例以及效果
<style type="text/css">div{border: 1px solid #aaff00;background-color: #ffff7f;}</style><body><div class="box1">盒子1</div><div class="box2">盒子2</div><div class="box3">盒子3</div></body>
(2)、行内元素
常见的行内元素img(图片标签)、span(范围标签)、br(换行标签)、a(超链接标签)等。
行内元素代码示例以及效果
<style type="text/css">span{border: 1px solid #aaff00;}</style><body><div class="box1"><span>新闻 |</span><span>财经 |</span><span>国际 |</span><span>科技 </span></div></body>
(3)、行内元素和块级元素之间的区别联系
①：块级元素放置到页面上的时候会占据一行，这也导致块级元素的排布是按照从上到下的方式进行排列的；行内元素占据的区域是内容本身的大小，这也导致行内元素排布的时候会从左到右的方式进行排布。
②:块级元素可以嵌套块级元素，也可以嵌套行内元素。但是行内元素不可以嵌套其他的元素。
③设置的属性不一致。
3.display以及其相关的属性
(1).display属性规定是否/如何显示元素。
(2).display相关的属性(部分)
display相关属性none:此元素不会被显示。block：此元素将显示为块级元素，此元素前后会带有换行符。inline:默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block：行内块元素。
(3).display相关属性代码示例以及效果截图
①:display设置为none属性以及相关的效果
<style type="text/css">.box1{display: none;}</style><body><div class="box1">这是盒子1</div><div class="box2">这是盒子2</div></body>
②:display设置为block属性以及相关的效果(把元素转化为块级元素)
<style type="text/css">span{display: block;}</style><body><div class="content"><span><b>新闻</b> |</span><span><b>科技</b> |</span><span><b>财经</b> |</span><span><b>娱乐</b> </span></div></body>
③:display设置为inline属性以及相关的效果(把元素转变为内联元素)
没有设置display为inline的时候代码以及效果
<style type="text/css">.content{background-color: #999999;}.content ul{list-style: none;}.content ul li{border: 1px solid red;}</style><body><div class="content"><ul><li><a href="#">新闻</a></li><li><a href="#">咨询</a></li><li><a href="#">科技</a></li><li><a href="#">财经</a></li><li><a href="#">其他</a></li></ul></div></body>
设置display为inline，并且优化以后的代码效果代码以及效果
<style type="text/css">.content{background-color: #999999;height: 40px;}.content ul{list-style: none;}.content ul li{border: 1px solid #00ff00;display: inline;line-height: 40px;margin-left: 30px;background-color: #aaff7f;}.content ul li a{text-decoration: none;}</style><body><div class="content"><ul><li><a href="#">新闻</a></li><li><a href="#">咨询</a></li><li><a href="#">科技</a></li><li><a href="#">财经</a></li><li><a href="#">其他</a></li></ul></div></body>
