Display在官方定义:规定元素应该生成的框的类型。本文只重点分析常用的6个值:none、block、inline、inline-block、inherit、flex。其他table、list-item等都不再推荐使用。
此元素不会被显示。主要与visibility属性为hidden时相区分。
1) 当元素的none时,js可以获取此元素,但不能获取/设置此元素的可视化属性的值(但可以设置自定义属性的值),如Width、Height、background等Css属性的值,这也就表明当元素为none时,元素是不被浏览器渲染的。
2) 当元素的visibility值为hidden时,元素虽然不可见,但可以获取/设置元素的任何值,包含Css相关属性。这也就表明此时的元素是被浏览器渲染的(在文档流中是占有位置的),只是处于不可见的状态。
3) 示例代码如下:
Css代码:
#div01{
display: none;
width: 200px;
background: red;
}
#div02{
visibility: hidden;
width: 100px;
}
#div03{
width: 100px;
}
Js/html代码:
<div id="div01" data-name="div01" > div01</div>
<div id="div02" data-name="div02" > div01</div>
<div id="div03" > div03</div>
<script type="text/javascript">
window.onload = function(){
var div01 = document.getElementById('div01');
var div02 = document.getElementById('div02');
var div03 = document.getElementById('div03');
//output: div01:0 background: name:div01
console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"));
//output: div02:100 name:div02
console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"));
//output: div03:100
console.log( 'div03:' + div03.offsetWidth);
div01.style.width = 1000;
div01.setAttribute("data-name","div0101");
div02.style.width = "800px";
div02.setAttribute("data-name","div0202");
div03.style.width = 800;
//output: div01:0 background: name:div0101
console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"));
//output: div02:800 name:div0202
console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"));
//output: div03:800
console.log( 'div03:' + div03.offsetWidth);
}
</script>
设置元素为块级元素,可应用盒子模型相关属性。默认Width会100%,Height自适应。Margin、padding都有效。如果没有占宽或高的子元素存在,则高度为零。
代码如下:
<html>
<head>
<style>
#div01{
background: red;
}
#div02{
height: 100px;
background: gray;
}
#div03{
background: green;
}
</style>
</head>
<body>
<div id="div01" ></div>
<div id="div02" ></div>
<div id="div03" >div03</div>
</body>
</html>
行内元素或者通过display:inline修饰为行内元素的都具有行内元素的行为。
1) 多个inline元素会排成一行,并列的多个inline元素之间会存在8个像素左右的间隔,8像素间隔解决办法:
a). Html文本有意识的都排成一行,如下代码所示:
<a>a01</a><a>a02</a>
b). 利用margin-left:-8px,也就是marginq负值实现,也可以在外层使用letter-spaceing和word-spaceing为负值的方式实现(此种试子元素需要重置被设置属性)
.inline{
display: inline;
background: red;
margin: 0px;
padding: 10px;
margin-left: -8px;
}
<div class="inline">inline01</div> <div class="inline">inline02</div> <div class="inline">inline03</div> <div class="inline">inline04</div>
c). 包裹inline元素的外层元素加上font-size:0px和-webkit-text-size-adjust:none实现
a{
background: red;
font-size: 14px;
}
.overWidth{
white-space: nowrap;
border: 1px solid gray;
font-size: 0px;
-webkit-text-size-adjust: none;
}
<div class="overWidth" >
<a>a01</a>
<a>a000000002</a>
</div>
2) Inline元素的width和height无效
3) Inline元素的padding都有效,但margin左右有效,上下无效。
4) Inline元素包裹inline元素,外层元素的width和height会被内部的撑开
.overWidth{
display: inline;
border: 1px solid gray;
}
<div class="overWidth" >
<a>a01</a>
<a>a000000002</a>
</div>
5) Block/inline-block元素包裹inline元素,默认超width自动换行,height撑开。
a) 强制不换行可以通过white-space:nowrap来实现,此时超width的就会浮出来,可以通过overflow:hidden和text-overflow:ellipsis配合实现省略显示。
.overWidth{
white-space: nowrap;
width: 100px;
border: 1px solid gray;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="overWidth" >
<a>a01</a>
<a>a000000002</a>
</div>