CSS 3的display:盒类型详解
2019独角兽企业重金招聘Python工程师标准>>>
在CSS中,使用display属性来定义盒的类型。总体来说,盒类型分为两类:inline和block。如div默认是block,span默认是Inline。可以通过display修改默认的表现方式。
<!DOCTYPR><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><title>block and inline elements</title><style type="text/css">div{background:#aaff00;}span{background:#ffaa00;} </style></head><body><div>div元素1</div><div>div元素2</div><span>span元素1</span><span>span元素2</span></body></html>
默认的div和span表现形式:http://jsfiddle.net/Web_Code/pt0j3b6n/embedded/result/
利用dispaly修改,分别在上述的div和span样式中添加如下规则:
//div中添加display:inline;//span中添加display:block;
效果如图:http://jsfiddle.net/Web_Code/pt0j3b6n/1/embedded/result/
那display的取值只有这两个吗?那就错了。display的不同取值,就表现出不同的盒类型。
1、inline-block类型:属于block盒类型,但显示时具有inline类盒型的特点。并列显示默认的对齐方式是底部对齐,可以用vertical-align修改。
利用inline-block制作水平菜单
<html><head><style type="text/css">ul{margin:0;padding:0;
}
li{display:inline-block;width:100px;padding:10px 0;background-color:#00ccff;border:solid 1px #666666;text-align:center;
}
a{color:#000000;text-decoration:none;
}</style></head><body><ul><li><a href="http://www.ido321.com" target="_blank">菜单1</a></li><li><a href="http://www.ido321.com" target="_blank">菜单2</a></li><li><a href="http://www.ido321.com" target="_blank">菜单3</a></li><li><a href="http://www.ido321.com" target="_blank">菜单4</a></li></ul></body></html>
效果:http://jsfiddle.net/Web_Code/pt0j3b6n/2/embedded/result/
PS:inline-block和inline是有区别的,前者仍属于block,所以有高宽的属性,而后者没有。
2、inline-table类型:是一种表格相关类型,IE 8+及其它主浏浏览器均支持。更多表格相关类型见后文。
首先,看一个未使用inline-table的示例
<html><head><style type="text/css">table{
border:solid 2px #00aaff;
}
td{
border:solid 2px #ccff00;
padding:5px;
}</style></head><body>淡忘~浅思<table><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr><tr><td>E</td><td>F</td><td>G</td><td>H</td></tr><tr><td>I</td><td>J</td><td>K</td><td>L</td></tr></table>你好</body></html>
效果是这样的:http://jsfiddle.net/Web_Code/pt0j3b6n/3/embedded/result/
如果要做成文字环绕表格的效果,就可以使用inline-table了,修改table的样式
table{display:inline-table;border:solid 3px #00ffaa;}
文字环绕效果就出来了:http://jsfiddle.net/Web_Code/pt0j3b6n/4/embedded/result/
表格相关类型汇总
元素 | 所属类型 | 说明 |
table | table | 此元素会作为块级表格来显示,表格前后带有换行符。 |
tabel | inline-table | 此元素会作为内联表格来显示,表格前后带有换行符。 |
tr | table-row | 此元素会作为一个表格行显示 |
td | table-cell | 此元素会作为一个表格单元格显示 |
th | table-cell | 此元素会作为一个表格单元格显示 |
tbody | table-row-group | 此元素会作为一个或多个行的分组来显示 |
thead | table-header-group | 此元素会作为一个或多个行的分组来显示 |
tfoot | table-footer-group | 此元素会作为一个或多个行的分组来显示 |
col | table-column | 此元素会作为一个单元格列显示 |
colgroup | table-column-group | 此元素会作为一个或多个列的分组来显示 |
caption | table-caption | 此元素会作为一个表格标题显示 |
3、list-item类型:此类型可以将多个元素作为列表来显示,同时在元素的开头添加列表的标记
给示例中所有的div设定为list-item类型,用list-style-type将标记指定为空心圆
<html><head><style type="text/css">div{display:list-item;list-style-type:circle;margin-left:20px;
}</style></head><body><div>div1</div><div>div2</div><div>div3</div><div>div4</div></body></html>
效果:http://jsfiddle.net/Web_Code/pt0j3b6n/5/embedded/result/
4、run-in类型和compact类型:元素被指定为run-in或者compact类型的时候,如果元素后面还有block类型的元素,run-in类型的元素将被包含在block类型元素内部,而compact类型被放置在
block元素的左边。这两个属性并没得到普及。关于run-in的一个demo:http://www.zhangxinxu.com/study/201203/css-run-in.html
5、none类型:将display的值指定为none之后,改元素将不会显示。PS:与visibility:hidden不同的是,display:none的元素将不会占据原空间,而visibility仍会占据原空间。
原文首发:http://www.ido321.com/1300.html
转载于:https://my.oschina.net/461147874/blog/356301
CSS 3的display:盒类型详解相关推荐
- DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
- java原生类型没有封装_Java基本数据类型与封装类型详解(int和Integer区别)
Java基本数据类型与封装类型详解(int和Integer区别) 发布于 2020-4-19| 复制链接 摘记: int是java提供的8种原始数据类型之一.Java为每个原始类型提供了封装类,Int ...
- python变量类型-Python 变量类型详解
变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的数据类型,这些变量可以存储整 ...
- mysql数据库的字符串表示什么意思_MySQL数据库的字符串类型详解(01)
Mysql的数据类型主要分为三类:数字类型.字符串(字符)类型.日期和时间类型,由于时间紧迫,根据学习的需要 数字类型暂不做详解,等待有时间了在修改此文档,此文主要介绍mysql 数据类型中的字符串类 ...
- 并发编程-04线程安全性之原子性Atomic包的4种类型详解
文章目录 线程安全性文章索引 脑图 概述 原子更新基本类型 Demo AtomicBoolean 场景举例 原子更新数组 Demo 原子更新引用类型 Demo 原子更新字段类型 使用注意事项: Dem ...
- python内置序列类型_Python序列内置类型之元组类型详解
Python序列内置类型之元组类型详解 1.元祖的概念 Python中的元组与列表类似,都是一个序列,不同的是元组的元素不能修改而已. 2.元组的创建 元组使用小括号,列表使用方括号. tup = ( ...
- java 封装表单数据类型_Java基本数据类型与封装类型详解(int和Integer区别)
int是java提供的8种原始数据类型之一. Java为每个原始类型提供了封装类,Integer是java为int提供的封装类(即Integer是一个java对象,而int只是一个基本数据类型).in ...
- c# WebApi之接口返回类型详解
c# WebApi之接口返回类型详解 https://blog.csdn.net/lwpoor123/article/details/78644998 转载于:https://www.cnblogs. ...
- UNIX(多线程):19---Future 类型详解
Future 类型详解 本文主要介绍 std::future,std::shared_future 以及 std::future_error,另外还会介绍 <future> 头文件中的 s ...
最新文章
- 一套完整的导视设计案例_经验分享 | 我的一套完整的硬件电路设计方案
- JAVA多线程和并发基础面试问答(转载)
- 电梯调度需求调研报告
- 怎么证明自己会python_1024程序员节,请用一句话证明你是一个程序员!
- oracle 表复制 long,关于oracle的数据库的数据Long和Number的转化字段
- 叠螺机_火锅底料加工车间废水离不开叠螺机应用
- 使用IPv6下载google drive 大文件
- 阿里云ECS后台CPU占用100%,top却找不到
- 复化科特斯公式matlab_牛顿
- 天地不仁,以万物为刍狗
- C++和C#结构体转换的问题
- vscode使用angular
- 韦达圆周率c语言,韦达对圆周率的表达式 – 手机爱问
- 程序员的工资还能高多久?十年后呢?
- 应用程序正常初始化(0xc150002)失败
- 力扣股神之路动态规划
- 【开源】司马编译器结构
- 区块链习题知识汇总练习——大力推进区块链、原宇宙技术发展
- 在线分享 Hosts 规则工具:Remote Hosts Server
- FastAdmin input digits不能输入小数 重写nice-validator插件的digits规则
热门文章
- python调用sklearn库BP神经网络基于小样本进行痘痘预测尝试
- arcpy 查看arcgis的产品类型、产品许可与安装信息
- error C2065等:******未声明的标识符错误
- md5解密 python_python写一个md5解密器示例
- Mac电脑Docker拉取Mysql报错?no matching manifest for linux/arm64/v8 in the manifest list entries
- android开发内存优化——利用软引用
- java equals重写原则_如何正确的重写equals方法(避免各种陷阱)
- html5 embed 不自动播放,html5自动播放与 iframe 你管videoautoplay=1不工作?_html5_开发99编程知识库...
- Python中的unittest模块(入门学习款)
- php 抽象工厂模式,php设计模式(五)抽象工厂模式