最近几天，一会儿看canvas，一会儿看SVG，看tornado，感觉静不下心来，啥有趣都想学一下，看一会又被层层代码给吓退了。。。。。鹅，跑题了，还是老老实实看看前端的吧。。。。
做页面布局，有好几种方式，这就归纳下display。position和float属性；
display 属性：
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。 |
| list-item | 此元素会作为列表显示。 |
还有一些就不列举了，可以在菜鸟编程上边查询到，
none 的值，
设置为none后，改元素不被显示，且不占文档流
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>效果</title>
<style>
.s{
width:100px;
height: 100px;
border:1px solid red;
}
.d{
display:none;
}
</style>
</head>
<body>
<div id="tit" >
<div class="s d">测试1</div>
<div class="s">测试2</div>
</div>
</body>
</html>测试后结果为：
测试1消失了，而且不占文档流，
这个通常作为网页导航栏二级菜单显示效果，当鼠标悬浮或点击后，二级菜单显示，
HTML编辑：
<div id="tit" >
<ul>
<li class='zhu'>主页
<ul>
<li>悬疑片</li>
<li>警匪片</li>
<li>动画片</li>
</ul>
</li>
<li class='she'>设置
<ul>
<li>悬疑片</li>
<li>警匪片</li>
<li>动画片</li>
</ul>
</li>
</ul>
</div>CSS编辑： （：hover ，伪类，鼠标悬浮效果， 可借鉴 CSS伪类）
.zhu li,
.she li{
display:none;
}
.zhu:hover li,
.she:hover li{
display:block;
}
显示效果为：（图为 鼠标滑过 设置）
block值：
将元素变为块级元素，此元素前后带有换行符
举个栗子：
改行内元素设置完后，独占一行，并且前后都换行，对块级元素无效，
inline值：
此元素会被显示为内联元素，元素前后没有换行符。
举个栗子：
注：
-
和其他元素都在一行上；
-
高，行高及顶和底边距不可改变；
-
宽度就是它的文字或图片的宽度，不可改变。
-
补充：（如何解决IE6以及更早浏览器浮动时产生双倍边距的bug， 答：在IE6以及更早浏览器中出现浮动后，margin值解析为双倍的情况，设置改元素的display属性为inline即可 ）
-
暂时还不知道有啥其他作用，随看随补充吧，
inline-block值：
inline-block就与上面的为inline属性设置为block属性的功能一样，就是使元素就可以为其设置大小又可以具有行内元素的特征。
举个栗子：
这个应用就广泛了，可以把块级元素行内显示，还能设置其宽高，
不过，如图所示，（第二个d)
里面内容超出框宽度，把旁边的div给挤下去了，如果有内容的话，建议设置一下溢出设置 Overflow，或文本换行，超出显示省略号
剩下的看网上说用处不多，就不介绍了，主要。。我也不是很了解。
鹅，这章有点多，就介绍到这儿吧，剩下position和float属性下章归拢
好，请让我听到你们的掌声，O(∩_∩)O~红红火火恍恍惚惚
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
