标签:image alt pos 还需要 meta osi code styles 详解
display中文为显示的意识,显而易见它的功能就是为了控制页面元素显示方式
display 属性规定元素应该生成的框的类型。
css语法
display:value;
js语法 Object.style.display=value;
display中为我们提供了很多属性,其中最常见的有:
none属性代表着元素不会被显示
比如很多网站的顶部导航栏都会有二级菜单,只有当我们的鼠标移动或点击时二级菜单才会显示出来。这是就可以使用到display:none这个属性。
一个简单的例子:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="button">
<ul>
<li>
一级菜单
<ul> <!--一级菜单中嵌套二级菜单-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS代码:
.button ul>li{
border: 1px solid cadetblue;
}
.button ul>li>ul{
display: none;/*二级菜单默认隐藏*/
}
.button ul>li:hover>ul{
display: block;/*当鼠标移动到一级菜单时,二级菜单出现/
}
block的意思为“阻塞”,它的功能是使元素变为块级元素
所谓块级元素就是指每个元素的类容单独占据一行,我们常见的
、
inline属性的功能是把元素变为行内元素
所谓行内元素就是指元素不会单独占据一行,它只会占据自己规定的高和宽。我们在网站中常见的瀑布流样式就是使用的行内元素。、等都属于行内元素。
但是行内元素的大小是固定的,我们无法设置其大小,这时我们还需要使用display:block将其变为块级元素后才可以改变它的大小。这是元素既有行类元素的特性又可以为其设定大小。
inline-block属性就是同时有块级元素和行内元素的属性
inline-block就与上面的为inline属性设置为block属性的功能一样,就是使元素就可以为其设置大小又可以具有行内元素的特征。
特点:1)独占一行;
? 2)元素的高度,宽度,行高以及顶和底边距均可设置;
? 3)不设置宽度时,宽度撑满一行;
块级元素有:
,