HTML中行内元素与块级元素有哪些及区别
二.行内元素与块级元素有什么不同?
块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。
通过样式控制,它们可以相互转换。
1.尺寸-块级元素和行内元素之间的一个重要的不同点
设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。
注:这 里说的无效, 是指,它对其它元素的排列没有影响。也就是说,对于设置的margin,padding行内元素文档流里的上下元素来说,他们的间距不会因为上下 margin或者上下padding而产生间距。但是就他本身而言,对于上下margin与padding是有效的。
上面写的有点绕了,我也是尽量表达。请参照下图,如果还是不清楚,请动手自己写一下,就能明白了。
2.text-align属性是两者表现的又以不同之处
这个特性描述了如何使一个块元素的行内内容对齐。
注意一点,w3c标准里说这个属性是用来对齐行内内容的,所以,不应该对块级内容起作用。
解释一下,行内内容是说由行内元素组成的内容,
这样,我们对这个特性的认识应该就清楚了。但是,问题来了,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。啊? 又是IE!!
IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
HTML中行内元素与块级元素有哪些及区别的更多相关文章
- HTML中行内元素与块级元素的区别:
HTML中行内元素与块级元素的区别:在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以 ...
- HTML行内元素与块级元素有哪些及区别详解
转自 https://www.jb51.net/web/724286.html 这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...
- HTML 行内元素和块级元素的理解及其相互转换
块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...
- CSS 中的内联元素、块级元素以及display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- C#基础-css行内元素、块级元素基础
一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...
- CSS 中的内联元素、块级元素、display的各个属性的特点
CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...
随机推荐
- 【转载】解决django models文件修改后的数据库同步问题——south模块
转载链接:https://www.cnblogs.com/frchen/p/5732490.html 在使用django进行开发时,往往需要根据不同的需求对model进行更改.而这时候,python ...
- python虚拟环境virtualenv、virtualenv下运行IDLE、powershell 运行脚本由执行策略引起的问题
一.为什么要创建虚拟环境: 应为在开发中会有同时对一个包不同版本的需求,创建多个开发环境就能解决这个问题.或许也会有对python不同版本的需求,这就需要使用程序来管理不同的版本,virtualenv ...
- 洛谷 P3419 [POI2005]SAM-Toy Cars
P3419 [POI2005]SAM-Toy Cars 题目描述 Johnny is a little boy - he is only three years old and enjoys play ...
- Android Studio获取开发版SHA1值和发布版SHA1值,详细过程
转自原文 Android Studio获取开发版SHA1值和发布版SHA1值的史上最详细方法 前言: 今天我想把百度地图的定位集成到项目中来,想写个小小的案例,实现一下,但在集成百度地图时首先要申请秘 ...
- mysql查询今天,昨天,近7天,近30天,本月,上一月数据
近期项目中用到了查询当月数据记录的功能,最初的想法是在逻辑业务里构造好时间段进行查询,当写sql语句时感觉挺麻烦.所以就到网上搜索了一下,看看是不是能有简单的方法.果然.网络资源非常强大.以下结合我的 ...
- Mahout-HashMap的进化版FastByIdMap
FastByIdMap是基于散列的.在处理冲突时是线性探測而非分离链接,这样就不必为每个条目添加一个Map.Entry对象.从而节省内存开销. 以下代码是一个线性探測Map的Demo: package ...
- Mac系统下安装ant
看了一些别人怎么在mac下安装ant,大体都是从官网下载bin文件,然后改动权限,建链接.配path. 须要这么麻烦吗?我认为不须要. 以下一个命令搞定: forlong401:build forlo ...
- LicManager系统对各license类型终端客户机器的监控
与catia软件相似.以下这些软件都是汽车project设计软件.对汽车工业的的研发设计有着不可替代的作用.但它们都有着不同于各自的优势与不足之处. 可是在LicManager许可监控系统下,它们都是 ...
- Lesson 2 Building your first web page: Part 2
Tag Diagram You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag ...
- Android自定义组件系列【15】——四个方向滑动的菜单实现
今天无意中实现了一个四个方向滑动的菜单,感觉挺好玩,滑动起来很顺手,既然已经做出来了就贴出来让大家也玩弄一下. 一.效果演示 (说明:目前没有安装Android模拟器,制作的动态图片太卡了,就贴一下静 ...