HTML行内元素、块状元素和行内块状元素的区分
HTML 5 的常用元素分类
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
1、行内元素
行内元素特征:(1)设置宽高无效
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间
(3)不会自动进行换行
常见的行内元素有:a 、span、br、b、u、ur等等
2、块级元素
块状元素特征:(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起,默认排列方式为从上至下
常见的块级元素有:div、p、h1-h6、ol-li、table、nav、aside、header、footer、section、article、ul-li、address等等
3、行内块状元素
行内块状元素特征:(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
常见的行内块状元素有:img、input、td等
HTML行内元素、块状元素和行内块状元素的区分的更多相关文章
- line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
- 既然 transform 不适用于某些内联元素,那咱们就把这些元素变成 inline-block 或 block 就行了。
既然 transform 不适用于某些内联元素,那咱们就把这些元素变成 inline-block 或 block 就行了.
- CSS躬行记(2)——伪类和伪元素
一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...
- C语言:将ss所指字符串中所有下标为奇数位置的字母转换为大写-将该字符串中的所有字符按ASCII码值升序排序后输出。-将a所指的4*3矩阵第k行的元素与第0行元素交换。
//函数fun:将ss所指字符串中所有下标为奇数位置的字母转换为大写,若不是字母,则不转换. #include<conio.h> #include<stdio.h> #incl ...
- HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢?
先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...
- html5 区块与内联div 与span html块级元素
HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- 表单的子元素可不在form标签内
表单是网页用于向服务器发送数据的元素.其用法类似下面: <form method="POST" action="/login"> <input ...
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
随机推荐
- Hibernate的工作流程以及三种状态
Hibernate的工作流程: 1. 读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3. 打开Sesssion 4.创建事务Transation 5. 持久化操作 6. ...
- JavaWeb学习笔记(七)—— JSP
一.什么是JSP JSP全名是Java Server Pages,它是建立在Servlet规范之上的动态网页开发技术.在JSP文件中,HTML代码与Java代码共同存在,其中,HTML代码用来实现网页 ...
- CMM模型,结构化开发方法和面向对象开发方法的比较,UML(统一建模语言),jackson开发方法
CMM模型 一.CMM简介 CMM,英文全称为Capability Maturity Model for Software,即:软件成熟度模型. CMM的核心是把软件开发视为一个过程.它是对于软件在定 ...
- python学习之路---day03
一:数据类型转换 1:bool-->int 将bool转成 int型 True 是1 False是0 a=True c=int(a) print(c) b=False d=int(b) prin ...
- 毕业设计 python opencv实现车牌识别 码云地址
码云地址:https://gitee.com/yinghualuowu/Python_VLPR 删除了冗余代码,可以更加便于运行.其实是为了那些进不去github准备的~
- hybrid app开发工具
hybrid app开发工具 1.AppCan AppCan是国内Hybrid App混合模式开发的倡导者,AppCan应用引擎支持Hybrid App的开发和运行.并且着重解决了基于HTML5的移动 ...
- PIE SDK矢量数据编辑事件的监听
1.功能简介 通过IEditEvents接口,开发者可以监听到Editor对象的相关的事件,并且做出反应.包括Editor中开始编辑.结束编辑等操作,下面对矢量数据的编辑事件的监听功能进行介绍. 2. ...
- docker 创建容器时遇到的坑
坑一.时区问题 在创建系统镜像时,比如centos,会默认最小安装,并且时区默认的是UTC 所以在下好centos的原始镜像后,最好再重新构建一个新的镜像 # 命令 docker pull cento ...
- layui 数据返回但是table表格未渲染出来的问题
最近蜂鸟速驾项目用layui框架,table进行表格渲染 控制台打印发现有数据,但是table.render渲染不出来,后来发现是数据已经返回但是页面元素未加载完成的缘故,用setTimeout定时器 ...
- 成功配置TOMCAT的LOG4J日志系统,格式:HTML+每天以YYYY-MM-DD.LOG命名的日志文件
关于log4j.properties文件在web项目中放的位置,找过很多,最后实践结果是: 一.web项目 二.放在src的目录里面,然后项目生成后会自动在\WEB-INF\classes文件里有份l ...