css-display
1. none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
2. inline:指定对象为内联元素。
3. block:指定对象为块元素。
4. inline-block:指定对象为内联块元素。(CSS2)
inline、block、inline-block的区别
html代码
<div class="first">inline</div>
<div class="third">inline-block</div>
<div class="second">block</div>
css代码
.first,.second,.third{
width:100px;
height:100px;
margin:50px;
padding:50px;
border: 1px solid black;
}
.first{
background-color: red;
display: inline;
}
.second{
background-color: green;
display: block;
}
.third{
background-color: yellow;
display: inline-block;
}
效果图
区别如下
inline没有宽和高,inline-block和block有宽和高;
inline的margin只有margin-left和margin-right,而inline-block和block都有;
block占一行,而inline和inline-block不占一整行;
三者都有padding。
4. list-item: 制定对象为列表项目。
.first,.second,.third{
width:20px;
height:20px;
margin:20px;
padding:20px;
border: 1px solid black;
display: list-item;
}
效果图
5. table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
6. inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
7. table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2)
8. table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2)
9. table-row:指定对象作为表格行。类同于html标签<tr>(CSS2)
10. table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2)
11. table-column:指定对象作为表格列。类同于html标签<col>(CSS2)
12. table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
13. table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2)
14. table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
使用table-cell可以实现水平垂直居中
html代码
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
css代码
.td{
display: table-cell;
border: 1px solid black;
width: 200px;
text-align: center;
height: 100px;
vertical-align: middle;
}
效果图
15. flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
16. inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
css-display的更多相关文章
- CSS display:inline-block
CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...
- [转]CSS Display(显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- CSS display:inline-block的元素特点:
将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...
- CSS DISPLAY AND POSITIONING
CSS DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the ...
- CSS Display(显示)和Visibility(可见性)
CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
随机推荐
- TCP的十一种状态与三次握手分析(有图)
我们知道TCP是面向连接的,我们只知道有连接断开,其实内部还有一些比较复杂的状态.去了解各个状态之间的切换有助于我们更加深入的了解TCP.下面我们就来分析各个状态. 1.如下图示(图源百度)图中显示出 ...
- 2017最新安装mysql教程及遇到的问题解决Windows下
今天因为换了个LINUX系统 把我的E盘不小心给卸载了 结果还是不能用 导致 我E盘里面的mysql也都被删除了 所以又要在次重新装一个MYSQL 了 花了很多时间 也看了很多教程.好 ...
- BNUOJ34977夜空中最亮的星(数学,向量的应用)
夜空中最亮的星 Time Limit: 2000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class name ...
- 【分享】iTOP4412开发板-Bluetooth移植文档
[分享]iTOP4412开发板-Bluetooth移植文档 最近须要把Bluetooth移植到iTOP-4412 开发平台.查阅了相关资料,经过一段时间的研究.调试,最终成功的将蓝牙功能移植到了开发板 ...
- java多线程编程核心技术——全书总结
这本书大致上是看完了,不过第七章结束的匆匆忙忙很不好. 不过好在还是看完了,勉强算吧. 回想这一年,挺感慨的,心里一直谋求着进步,却很难行动起来. 仔细想想确实啊,想一直进步肯定要牺牲自己的业余时间, ...
- Linux下select的用法--实现一个简单的回射服务器程序
1.先看man手册 SYNOPSIS /* According to POSIX.1-2001 */ #include <sys/select.h> / ...
- 刚 安装 Oracle时,登录会出现的问题, ora-28000: the account is locked
来这个连接 就OK了: https://jingyan.baidu.com/article/48b37f8d1ec3fd1a6464883a.html 第一步: 进入cmd: 然后将下面的sql输入就 ...
- ios学习——键盘的收起
在开发过程中,我们经常会用到UITextField.UITextView等文本框,然后这些文本框在点击之后会自动成为第一响应者(FirstResponder),并自动弹出软键盘.然而,没有自动定义好的 ...
- Hive数据倾斜解决方法总结
数据倾斜是进行大数据计算时最经常遇到的问题之一.当我们在执行HiveQL或者运行MapReduce作业时候,如果遇到一直卡在map100%,reduce99%一般就是遇到了数据倾斜的问题.数据倾斜其实 ...
- 推荐:让你快速搞定各服务端(api,pc,mobile,wechat)代码
如果你在写服务端 (PHP) ,会因为项目须求(做app.pc.mobiel.微信) 而写几套代码的,你不觉得很累吗? 现在的很多开源框架商用版本在做程序方面都是这么一套一套的,维护起来,二开起来特别 ...