目录
none 属性
block 属性
inline 属性
inline-block 属性
可能的值
部分属性详解:
display 中文为显示的意识, 显而易见它的功能就是为了控制页面元素显示方式
display 属性规定元素应该生成的框的类型.
CSS 语法 display:value;
JS 语法 Object.style.display=value;
display 中为我们提供了很多属性, 其中最常见的有:
- none
- block
- inline
- inline-block
none 属性
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 属性
block 的意思为 "阻塞", 它的功能是使元素变为块级元素
所谓块级元素就是指每个元素的类容单独占据一行, 我们常见的
,
,
,
等都是块级元素
inline 属性
inline 属性的功能是把元素变为行内元素
所谓行内元素就是指元素不会单独占据一行, 它只会占据自己规定的高和宽. 我们在网站中常见的瀑布流样式就是使用的行内元素., 等都属于行内元素.
但是行内元素的大小是固定的, 我们无法设置其大小, 这时我们还需要使用 display:block 将其变为块级元素后才可以改变它的大小. 这是元素既有行类元素的特性又可以为其设定大小.
inline-block 属性
inline-block 属性就是同时有块级元素和行内元素的属性
inline-block 就与上面的为 inline 属性设置为 block 属性的功能一样, 就是使元素就可以为其设置大小又可以具有行内元素的特征.
可能的值
部分属性详解:
block
特点: 1) 独占一行;
? 2) 元素的高度, 宽度, 行高以及顶和底边距均可设置;
? 3) 不设置宽度时, 宽度撑满一行;
块级元素有:
- ,
- ,
- ..
- ,
- ,
- ,
- , ,
- ,
- ,
- ,
- ,
- ,
- ,
- ,
, , 等;
不支持样式: vertical-align;
inline
特点: 1) 和其他元素在一行;
? 2) 内容撑开宽度, 即元素的宽度就是它包含的文字或图片的宽度, 不可改变;
? 3) 宽高不可设置;
? 4) 代码换行被解析成空格;
内联元素有: , ,
, , , , , , , , , , , , , , ,
等;
不支持样式: background-position ;clear ;clip ;height | max-height | min-height ;width | max-width | min-width ;overflow ;text-align ;text-indent ;text-overflow;
inline-block
特点: 1) 不设置宽高时, 内容撑开高度;
? 2) 非独占一行;
? 3) 可设置宽高;
? 4) 代码换行被解析成空格;
来源: http://www.bubuko.com/infodetail-3282530.html