深入理解和应用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>
- 逆天通用水印扩展篇~新增剪贴板系列的功能和手动配置,卸除原基础不常用的功能
- 【专知-Java Deeplearning4j深度学习教程06】用卷积神经网络CNN进行图像分类
- 万恶的剪贴板==》为存储而生
- AdaBoost算法(R语言)
- CTF---Web入门第六题 因缺思汀的绕过
- 小案例(六):预测小偷行为(python)
- 小案例(五):销量预测(python)
- SQL:插入指定标识列的数据时候的小错误
- 逻辑回归与梯度下降详解
- 决策树(R语言)
- ExecuteReader在执行有输出参数的存储过程时拿不到输出参数
- CTF---Web入门第十三题 拐弯抹角
- 小案例(四):销售额下滑(python)
- 【最新TensorFlow1.4.0教程01】TF1.4.0介绍与动态图机制 Eager Execution使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Win10安装Linux系统的教程图解
- 浅谈ubuntu执行.sh文件几种方式区别
- CentOS7使用yum安装PostgreSQL和PostGIS的方法
- Linux Windows下设置定时执行任务的方法
- 详解ssh免密码登录配置方法(图示加命令)
- centos 7 修改sshd | 禁止 root登录及sshd端口脚本定义
- Linux 全能系统监控工具dstat的实例详解
- 解决-BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: 权限不够问题
- linux常用工具vi/vim的使用完整版
- Linux下监视NVIDIA的GPU使用情况详解
- Linux下安装jdk1.8并配置环境变量的教程
- Linux中Homebrew的正确使用方法
- Linux中awk的使用方法详解
- Django上线部署之Apache的方法
- centos7系统下python2与python3共存