Display属性学习总结
HTMl元素根据表现形式,常见的可以分为两类。
(1)块元素(block)
(2)行内元素(inline)。
当然,除了以上两种元素类型外,还有inline-block、table-cell等元素类型。
1:块元素
块元素在浏览器默认状态下将占据整行,排斥其他元素与其位于同一行。块元素一般为矩形,可以容纳行元素和其他的块元素。
常见的块元素有:div(div层) h1~h6(1到6级标题) p(段落,会自动在其前后创建一些空白) hr(分割线) ol(有序列表) ul(无序列表)
块元素具有如下特点:
(1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素。
(2)块元素内部可以容纳其他块元素或行元素。
(3)可以定义高度(height),也可以定义宽度(width。
(4)可以定义四个方向的margin属性。
2:行内元素
行内元素默认显示状态可以与其他行内元素共存在同一行。
常见的行内元素有:strong(加粗强调) em(斜体强调) s(删除线) u(下划线) a(超链接) span(常用行级,可定义文档中的行内元素)
行内元素具有以下特点:
(1)可以与其他行内元素位于同一行。
(2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果。
(3)无法定义高度(height),也无法定义宽度(width)。
(4)可以定义margin-left和margin-right,无法定义margin-top和margin-bottom。
3:Display简介
如果想要将元素从一个类型转换为另外一个类型,就需要display属性。
其语法:display:属性值;
display属性取值:
inline 行内元素
block 块元素
inline-block 行内块元素
table 以表格形式显示,类似于table元素
table-row 以表格行形式显示,类似于tr元素
table-cell 以表格单元格形式显示,类似于td元素
none 隐藏元素
在CSS中,可以使用display:inline-block来将元素转换为行内块元素。行内块元素有以下两个特点。
(1)可以定义width和height。
(2)可以与其他行内元素位于同一行。
inline-block元素既具备块元素的特点,也具备行内元素的特点,在HTMl中,常见的inline-block元素有两个:img元素和input元素。
display:none
在CSS中我们可以使用display:none来隐藏元素。一般情况下,配合JavaScript来动态隐藏元素。
对于display:none需要注意以下:
(1)display:none一般用于JavaScript动态隐藏元素,被隐藏的元素不占据原来的位置空间。
(2)display:none不推荐用来隐藏一些对SEO关键的部分。对于搜索引擎来说,它会直接忽略diaplay:none隐藏的内容,不会把display:none隐藏的内容加入权重考虑。
display:none和visibility:hidden的区别
在CSS中,如果想要隐藏某一个元素,我们可以使用display:none或者visibility:hidden来实现,其二者有本质的区别。
(1)display:none的元素被隐藏之后,不占据原来的位置,也就是说彻底消失了,看不见也摸不着。
(2)visibility:hidden的元素被隐藏之后,依然占据原来的位置,也就是说并没有彻底消失,看不见但摸得着。
display:table-cell
在CSS中,display:table-cell可以让元素以表格单元格的形式呈现,也就是说table-cell类型的元素具备td元素的特点。
display:table-cell非常强大,可以实现以下三种功能。
(1)图片垂直居中于元素。
(2)等高布局。
(3)自动平均划分元素,并且在一行显示。
【1】图片垂直居中于元素
在CSS中,可以使用display:table-cell和vertical-align:center来实现大小不固定的图片的垂直居中效果。
语法:
父元素
{
display:table-cell;
vertical-align:center;
}
子元素{vertical-align:center;}
【2】自动平均划分元素
语法:
父元素{display:table};
子元素{display:table-cell;}
当父元素定义display-table而子元素定义display:table-cell时,如果给父元素一定的高度,父元素宽度就会根据子元素的个数进行自动平均划分。
去除inline-block元素间距
在CSS中,使用font-size:0来去除inline:block元素的间距。
语法:
父元素{font-size:0;}
说明:font-size:0是在inline-block元素的父元素添加的。
也可使用font-size:0来去除图片之间的间距。
Display属性学习总结的更多相关文章
- CSS display属性学习
---恢复内容开始--- http://www.w3school.com.cn/cssref/pr_class_display.asp 所有主流浏览器都支持 display 属性,如IE,Firefo ...
- 对CSS进行wxss思路学习,display属性。
先来概要一下学习思路: 本系列内容,将针对微信小程序中的WXSS学习,所以在学习CSS时每一个知识点都在小程序IDE中进行实践,达到最好的学习效果. 由于wxss与CSS有些许不同,在学习CSS过程中 ...
- (十二)学习CSS之display属性
参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- CSS学习笔记:display属性
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...
- 深入理解display属性
display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block.none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面 定义 di ...
- 转: 详解css中的display属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
随机推荐
- ESP8266系列图片外观 Wi-Fi模块一共有01~14十多款模块
- Servlet+JSP+JDBC综合案例
层级关系: 一.Util包 包里面写一个JDBCTools.java文件 功能:实现数据库连接返回一个Connection对象,并且可以实现数据库相应资源的关闭! 注意事项: 1.定义成员变量 1 p ...
- Java学习日报10.1
学习内容一 ********************************** 代码 **********************************public class EnumTest ...
- ESXi 中重新启动管理代理
使用直接控制台用户界面 (DCUI)重启管理代理: 连接到您的 ESXi 主机的控制台. 按 F2 自定义系统. 以 root 身份登录. 使用上下箭头导航至故障排除选项>重新启动管理代理. 按 ...
- Docker容器安装nginx基本步骤Yum版
首先我们来科普一下nginx: Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问 ...
- SQL Server 数据库还原进度查看
SQL Server 数据库还原进度查看 关键字:数据库,还原,进度,查看 文档说明: 本文档受某实际需求启发,某约500G大小数据库还原,由于对应服务器性能较差(内存仅4G且可用内存仅2.8G),数 ...
- spark优化项
一.Shuffle优化项 1.Shuffle优化配置 - spark.shuffle.file.buffer 默认值:32k 参数说明:该参数用于设置shuffle write task的Buffer ...
- Thread线程源码解析,Java线程的状态,线程之间的通信
线程的基本概念 什么是线程 现代操作系统在运行一个程序的时候,会为其创建一个进程.例如,启动一个Java程序,操作系统就会创建一个Java进程.线代操作系统调度的最小单位是线程.也叫做轻量级进程.在一 ...
- Deep Learn I'm back.
Intorduction: 时隔好几个月,我准备重新进入Deep Learning 的领域.昨天和老师聊了很多,之前觉得我做的工作就是排列组合,在水论文,灌水.但老师却说:这也是为将来的研究打基础. ...
- kubernets之机理概览
一 了解kubernets的运行机理 1.1 了解架构 众所周知,kubernets的组成由2个部分组成 kubernets 平面 node节点 (工作节点) 控制平面的组成 etcd 分布 ...