文档章节

行内元素解释

 轻轻的往前走
发布于 11/09 23:22
字数 843
阅读 10
收藏 0

 一,行内元素与块级元素的区别:

1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别

    行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。

    块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列。块级元素从新行开始,结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

二、行内元素和块级元素转换

        display:block; (字面意思表现形式设为块级元素)

       display:inline; (字面意思表现形式设为行内元素)

三、inline-block

inline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。(这句话下面会用例子解释)

 

兼容性 支持inline-block,

解决IE6、IE7兼容性的方法:

1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。

2、直接设置display:inline,使用zoom:1触发layout。

兼容所有浏览器的方法是:

display:inline-block;

*display:inline;

*zoom:1;

 

 

 

 

 

 

 

行内元素列表
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注(标记)
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量

 

 

 

本文转载自:https://www.cnblogs.com/iceflorence/p/6626187.html

共有 人打赏支持
粉丝 0
博文 19
码字总数 5475
作品 0
西安
高级程序员
私信 提问
从一个垂直居中的方法深度了解基线与 vertical-align

案例:采用伪元素实现垂直居中 今天在一篇文章中无意看到一个实现垂直居中的方法,费了好大劲理解了它的原理,于是就有了这篇文章。 先看一下这个方法的效果和代码: 基本概念 在深入了解之前...

Images
06/16
0
0
【前端Talkking】CSS系列——CSS深入理解之line-height

1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高的理解,今天发布出来,大家...

micstone
06/08
0
0
CSS的常见样式

本篇文章将主要阐述CSS的常见样式 对于常见样式做出大量说明 虽然CSS的样式并不算多但是在CSS的使用上却是最多的并且是复用性最多的。 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以...

熊蛋子17
2017/11/12
0
0
vertical-align属性与垂直居中

让元素居中对齐是非常常见的需求,首先是水平居中,要实现水平居中行内元素只需要在其父元素上设置即可,对于块级元素来说让它的和即可(width不可为auto),那么垂直居中呢?找下css属性发现...

leozdgao
2015/05/21
0
0
伪类&伪元素 - CSS精通之路

# 前言:   你的代码中是否每个标签都定义了一个类?完成一个页面后是否觉得代码很乱很拥挤?看见github优秀代码清爽简洁,想过你真的精通 ‘CSS’ 吗?想要进阶?不妨捡起CSS最容易被新手忽...

果汁凉茶丶
01/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是自然语言处理技术

自然语言处理(NLP)是计算机科学,人工智能,语言学关注计算机和人类(自然)语言之间的相互作用的领域。自然语言处理是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计...

本宫没空2
28分钟前
2
0
移动端关闭虚拟键盘

那么document.activeElement.blur()为什么可以阻止虚拟键盘弹出呢?原因是:当你点击input的时候,document.activeElement获得了DOM中被聚焦的元素,也就是你点击的input,而调用.blur()方法...

niuhongxia
28分钟前
5
0
Ubuntu18.04安装RabbitMQ(正确安装)

1、安装erlang 由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang-nox 2、安装Rabbitmq 更新源 sudo apt-get update 安装 sudo apt-get ins...

hansonwong
37分钟前
2
0
如何在以太坊开发发行自己的ERC-20数字货币

今天我将向你展示如何在以太坊区块链上开发你自己的加密货币并将其出售!我将向你展示如何使用以太坊智能合约逐步创建自己的ERC-20代币和众筹销售,如何测试智能合约,如何将智能合约部署到以...

geek12345
38分钟前
4
0
Vlock用于有多个用户访问控制台的共享 Linux 系统

当你在共享的系统上工作时,你可能不希望其他用户偷窥你的控制台中看你在做什么。如果是这样,我知道有个简单的技巧来锁定自己的会话,同时仍然允许其他用户在其他虚拟控制台上使用该系统。 ...

linuxprobe16
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部