二.行内元素与块级元素有什么不同?

块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。

通过样式控制,它们可以相互转换。

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中行内元素与块级元素有哪些及区别的更多相关文章

  1. HTML中行内元素与块级元素的区别:

    HTML中行内元素与块级元素的区别:在标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行:②高度,行高以及外边距和内边距都可控制:③宽带始终是与浏览器宽度一样,与内容无关:④它可以 ...

  2. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  3. HTML 行内元素和块级元素的理解及其相互转换

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

  4. CSS 中的内联元素、块级元素以及display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  5. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  6. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  7. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  8. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  9. CSS 中的内联元素、块级元素、display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

随机推荐

  1. kolla-ansible 安装openstack 拉取阿里云镜像时报错

     TASK [mariadb : Pulling mariadb image] ************************************************************ ...

  2. 【ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) A】 Palindromic Supersequence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 字符串倒着加到原串右边就好 [代码] #include <bits/stdc++.h> using namespace ...

  3. [Poi] Use Poi to Build an Index.js with Modern JavaScript Features

    Poi can easily launch an index.js file simply by running the poi command. This will launch a dev-ser ...

  4. Linux Sendfile 的优势

    Sendfile 函数在两个文件描写叙述符之间直接传递数据(全然在内核中操作,传送),从而避免了内核缓冲区数据和用户缓冲区数据之间的拷贝,操作效率非常高,被称之为零拷贝. Sendfile 函数的定义 ...

  5. apiCloud手动检测更新

    有时候需要给用户一个自主的权利,自主检测app是否是最新版本. 如何实现? 1.点击调用接口,检测是否有更新. 默认APICloud会自动检测版本更新,用户也可以在config.xml里配置autoU ...

  6. Windows10上使用windbg调试Chromium Windows。

    ###目的###Windows10上使用windbg调试Chromium Windows. 安装Windows 10 SDK时, 就包含了windbg.exe."C:\Program Fil ...

  7. VirtualBox中Linux虚拟机与主机共享文件夹

    VirtualBox中Linux虚拟机与主机共享文件夹 一.Linux虚拟机安装增强功能 二.点击虚拟机 设置-->选择 共享文件夹-->点击右侧的带加号的文件夹图标,执行下面的操作1. ...

  8. 电脑无法上网,DHCP客户端不能正确获取IP地址

    问题特征:DHCP服务器更新[保留]配置信息后,给一客户端绑定了新的IP地址;但客户端IP地址并未正确更新; 处理: 一.检查DHCP服务器配置; 1.MAC地址.IP地址均正确;并已“添加到筛选器” ...

  9. 【Django】视图系统

    目录 FBV 与 CBV 给视图加装饰器 使用装饰器装饰CBV 关于dispatch()方法 Request对象 与 Response对象 request对象 response对象 @ *** 一个视 ...

  10. Yeslab华为安全HCIE七门之--防火墙高级技术(17篇)

    Yeslab 全套华为安全HCIE七门之第三门 防火墙高级技术     课程目录: 华为安全HCIE-第三门-防火墙高级技术(17篇)\1_用户认证_用户_认证域_认证策略.avi 华为安全HCIE- ...