深入理解和应用display属性(一)
Display在官方定义:规定元素应该生成的框的类型。本文只重点分析常用的6个值:none、block、inline、inline-block、inherit、flex。其他table、list-item等都不再推荐使用。
一、None
此元素不会被显示。主要与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>
二、Block
设置元素为块级元素,可应用盒子模型相关属性。默认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>
效果截图:
三、inline
行内元素或者通过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>
深入理解和应用display属性(一)的更多相关文章
- 深入理解和应用display属性(二)
四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- 深入理解display属性
display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block.none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面 定义 di ...
- 深入理解display属性——前端布局常用重要属性
小注:display属性在网页布局中非常常见,但经常用到的仅仅是block.inline-block.inline和none等寥寥几个属性值,下面本人将详细介绍display属性的各个方面 定义 di ...
- 理解clear:both属性(转)
理解clear:both属性 在前端开发布局中,经常会被float这个属性搞晕,尤其是新手 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列.Float(浮动),往往是 ...
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- 前端,基础选择器,嵌套关系.display属性,盒模型
基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...
- CSS Display属性与盒模型
由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...
- CSS学习笔记:display属性
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...
随机推荐
- iOS-应用闪退总结
一.之前上架的 App 在 iOS 9 会闪退问题(iOS系统版本更新,未配置新版本导致闪退问题) 最新更新:(2015.10.02) 开发环境: Delphi 10 Seattle OS X El ...
- webservice返回值为Map类型的处理方法
在写一个webservice的时候,方法的返回值是一个复杂类型,处理方法是写一个结果类(Javabean)作为返回值.想着webservice方法返回值为Map的没写过,然后就试着写了一个简单的Dem ...
- 数据库中GETDATE()函数格式化时间
SELECT CONVERT(varchar(100), GETDATE(), 0): 05 16 2016 10:57AM SELECT CONVERT(varchar(100), GETDATE( ...
- HTML的页面IE注释
我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...
- MongoDB 数据分发
在MongoDB(版本 3.2.9)中,数据的分发是指将collection的数据拆分成块(chunk),分布到不同的分片(shard)上,数据分发主要有2种方式:基于数据块(chunk)数量的均衡分 ...
- ELF文件
ELF文件格式是一个开发标准,各种UNIX系统的可执行文件都采用ELF格式,它有三种不同的类型: 可重定位的目标文件 可执行文件 共享库 现在分析一下上一篇文章中经过汇编之后生成的目标文件max.o和 ...
- Util应用程序框架公共操作类(七):Lambda表达式公共操作类
前一篇扩展了两个常用验证方法,本文将封装两个Lambda表达式操作,用来为下一篇的查询扩展服务. Lambda表达式是一种简洁的匿名函数语法,可以用它将方法作为委托参数传递.在Linq中,大量使用La ...
- PHP中AJAX的使用(完整实例【大牛可飘过】)
有一段时间不写关于AJAX的东西了,最近和同学参加个比赛,要做一个类似博客的东西,用到了AJAX的东西,在写东西之前为了再熟悉一下AJAX,自己做了个关于AJAX的小事例与大家分享一下. AJAX在j ...
- MySQL Range Optimization
8.2.1.3 Range Optimization MYSQL的Range Optimization的目的还是尽可能的使用索引 The range access method uses a sing ...
- ORM开发之解析lambda实现完整查询(附测试例子)
上次讲解了怎么解析匿名对象(ORM开发之解析lambda实现group查询),这次来实现解析二元运算,完成基本条件语法 先看一个表达式 query.Where(b => b.Number == ...