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属性学习总结的更多相关文章

  1. CSS display属性学习

    ---恢复内容开始--- http://www.w3school.com.cn/cssref/pr_class_display.asp 所有主流浏览器都支持 display 属性,如IE,Firefo ...

  2. 对CSS进行wxss思路学习,display属性。

    先来概要一下学习思路: 本系列内容,将针对微信小程序中的WXSS学习,所以在学习CSS时每一个知识点都在小程序IDE中进行实践,达到最好的学习效果. 由于wxss与CSS有些许不同,在学习CSS过程中 ...

  3. (十二)学习CSS之display属性

    参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...

  4. CSS学习笔记05 display属性

    HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...

  5. CSS学习笔记:display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  6. 深入理解display属性

    display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block.none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面 定义 di ...

  7. 转: 详解css中的display属性

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

  8. !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  9. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

随机推荐

  1. ESP8266系列图片外观 Wi-Fi模块一共有01~14十多款模块

  2. Servlet+JSP+JDBC综合案例

    层级关系: 一.Util包 包里面写一个JDBCTools.java文件 功能:实现数据库连接返回一个Connection对象,并且可以实现数据库相应资源的关闭! 注意事项: 1.定义成员变量 1 p ...

  3. Java学习日报10.1

    学习内容一 ********************************** 代码 **********************************public class EnumTest ...

  4. ESXi 中重新启动管理代理

    使用直接控制台用户界面 (DCUI)重启管理代理: 连接到您的 ESXi 主机的控制台. 按 F2 自定义系统. 以 root 身份登录. 使用上下箭头导航至故障排除选项>重新启动管理代理. 按 ...

  5. Docker容器安装nginx基本步骤Yum版

    首先我们来科普一下nginx: Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问 ...

  6. SQL Server 数据库还原进度查看

    SQL Server 数据库还原进度查看 关键字:数据库,还原,进度,查看 文档说明: 本文档受某实际需求启发,某约500G大小数据库还原,由于对应服务器性能较差(内存仅4G且可用内存仅2.8G),数 ...

  7. spark优化项

    一.Shuffle优化项 1.Shuffle优化配置 - spark.shuffle.file.buffer 默认值:32k 参数说明:该参数用于设置shuffle write task的Buffer ...

  8. Thread线程源码解析,Java线程的状态,线程之间的通信

    线程的基本概念 什么是线程 现代操作系统在运行一个程序的时候,会为其创建一个进程.例如,启动一个Java程序,操作系统就会创建一个Java进程.线代操作系统调度的最小单位是线程.也叫做轻量级进程.在一 ...

  9. Deep Learn I'm back.

    Intorduction: 时隔好几个月,我准备重新进入Deep Learning 的领域.昨天和老师聊了很多,之前觉得我做的工作就是排列组合,在水论文,灌水.但老师却说:这也是为将来的研究打基础. ...

  10. kubernets之机理概览

    一  了解kubernets的运行机理 1.1  了解架构 众所周知,kubernets的组成由2个部分组成 kubernets  平面 node节点  (工作节点) 控制平面的组成 etcd  分布 ...