最近几天,一会儿看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~红红火火恍恍惚惚