标准流
HTML元素在标准状况下的定位方式
行内元素在同一行内横向排列
块级元素占满整个一行,在页面中竖向排列
元素不会移动到其它地方去,对于嵌套的元素盒子也是嵌套的关系
行内元素的盒子
行内元素的盒子永远只能在浏览器中得到一行高度的空间(行高由line-height属性决定
如果没设置该属性,则是内容默认的高度),如果给它设置上下border,margin,padding等值
导致其盒子的高度超过行高,那么它的盒子上下部分将和其他元素的盒子重叠
因此,不推荐对行内元素直接设置盒子属性,一般先设置行内元素几块级元素显示,再设置它的盒子属性。
display属性
通过display属性可以控制元素是以行内元素显示还是以块级元素显示,或不显示
display:block|inline|none|list-item(行块切换代码)
inline-block行内块元素(css2.1新增的值)
block元素
block元素的特点是:
总是在新行上开始
高度,行高以及顶和底边距都可控制
宽度缺省是它的容器的100%,除非用width设定一个宽度
<div> <p> <h1> <form> <ul> <li>是块元素的例子
inline元素
inline元素的特点是:
和其它元素都在一行上
高,行高及顶和底边距不可改变
宽度就是它的文字或图片的宽度,不可改变
<span> <a> <label> <input> <img> <strong> 和<em>是inline元素的例子
inline-block行内块元素
inline-block属性值,既是行元素,但又有块元素的属性。
如果想具有行元素一排的属性,也具有块元素可设置宽高的属性,我们可以设置display的属性为inline-block
隐藏元素display:none
当某个元素被设置成了隐藏元素之后,浏览器会完全忽略掉这个元素,该元素将不会被显示
也不会占据文档中的位置。像title元素默认就是此类型
比较visibility:hidden
制作下拉菜单、Tab面板等有时就需要用display:none把菜单或面板隐藏起来。
我们一般使用无序列表来做菜单,经常使用display改变行和块的属性,因为ul li都是块元素
<style>
.nav ul
{ list-style:none;
}
.nav li{ background-color:
font-size:20px;
width:100px;
height:30px;
text-align:center;
display:inline-block;/*此时变为横行,但是能控制宽高*/
}
.nav li:hover/*鼠标经过时的效果*/
{
background-color:#b3d4fc; }
</style><ul class="nav" >
<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>
例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display写菜单</title>
<style>
.nav
{
list-style: none;/*去除ul的效果*/
}
.nav li
{
background-color: aquamarine;
font-size: 20px;
text-align: center;
width: 100px;
height: 30px;
display: inline-block;
border: 2px black solid;
}
.nav li :hover{ background-color: aliceblue}
/*
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
*/
</style>
</head>
<body>
<ul class="nav">
<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>
</body>
</html>