旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css display属性怎样用【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:111


导读:display属性定义及用法display属性在网页规划顶用的异常之多,它的属性值也比较多,然则用的多的就block、inline-block、inline和none属...

display属性定义及用法

display属性在网页规划顶用的异常之多,它的属性值也比较多,然则用的多的就block、inline-block、inline和none属性值,别的属性值很少见,一切在这就重点引见一下常常使用的这几个属性值的用法;

在css中,display属性是用来定义元素应当生成的框的范例,经常常使用来将块状元素转换为内联元素、将内联元素转换为块状元素或许将块状元素/内联元素转换为inline-block元素,inline-block元素既有块状元素的特征已有内联元素的特征。

display属性语法花样

1.css语法:display:none/inline/block/inline-block/list-item/run-in/table/inline-table/table-row-group/table-header-group/table-footer-group/table-row/table-colume-group/table-column/table-cell/table-caption/inherit

2.JavaScript 语法: object.style.display="inline"

display属性值申明

none:设置元素不显现

block:设置元素为块级元素

inline:设置元素为内联元素

inline-block:行内块元素,既有块状元素的特征已有内联元素的特征

list-item:设置元素为列表

run-in:依据上下文作为块级元素或内联元素显现

compact / marker:已从CSS2.1中删除

table:设置元素为块级表格来(相似 <table>),表格前后有换行符

inline-table:设置元素为内联表格(相似 <table>),表格前后没有换行符

table-row-group:设置元素为一个或多个行的分组(相似 <tbody>)

table-header-group :相似 <thead>标签

table-footer-group:相似 <tfoot>标签;table-row :相似 <tr>标签

display属性的none属性值

元素的display属性的属性值设置为none时,该元素将隐蔽不显现,而其会离开文档流,不占有网页空间;异常相干:css隐蔽元素之display和visibility属性的用法笔记

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display属性的none属性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:60px;border:1px solid;margin-top:10px;}
.none{display:none;}
</style>
</head>
<body>
<div class="div">元素1</div>
<div class="div none">元素2</div>
<div class="div">元素3</div>
</body>
</html>

以上就是css display属性怎样用的细致内容,更多请关注ki4网别的相干文章!

标签:display属性