文档章节

什么是行内元素?

博为峰教研组
 博为峰教研组
发布于 2017/04/09 17:06
字数 372
阅读 4
收藏 0

 

我们都知道在html元素分为行内元素和块级元素。在实际开发中,会经常把他们弄混淆,而且很难记住。下面我们就来教会大家如何记住行内元素

下面是我们常用的一些行内元素

<a>

锚点

<b>

字体加粗

<big>

大号字体

<br>

换行

<em>

定义为强调的内容

<i>

斜体文本效果

<img>

图像

<input>

输入框

<label>

标签为input元素的标注

<select>

单选或多选菜单

<small>

小号字体

<span>

组合文档的行内元素

<strong>

强调内容

<sub>

定义下标

<sup>

定义上标

<textarea>

多行文本输入框

这里要强调一点,我们必须要记住这些行内元素,这里写下几句便于记忆行内元素的语句。

字体大小要加粗,

组合图像输入框,

锚准斜体的菜单,

强调换行上下标

那么行内元素该如何使用呢?

1.行内元素会在一条直线上排列,在同一行从左至右水平排列。直到一行排不下,才会换行。

2.行内元素设置宽、高、margin上下、padding上下无效(竖直无效)。

3.行内元素设置line-height,margin左右、padding左右有效(水平有效)。

4.行内元素的宽高随标签内容而变化。

行内元素转换为块级元素

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

 

 

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
从一个垂直居中的方法深度了解基线与 vertical-align

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

Images
06/16
0
0
CSS的常见样式

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

熊蛋子17
2017/11/12
0
0
CSS的常见样式序(1)

1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align作用在块级元素上,可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中。注意t...

熊蛋子17
2017/11/12
0
0
后端工程师入门前端页面重构(二):心法 I

本文由 KnewHow 发表在 ScalaCool 团队博客。 上一篇博客是我们《后端工程师入门前端页面重构》系列的第一篇,我们介绍了页面布局的口诀: 从左到右,从上到下,化整为零。 那么在接下来的几...

02/07
0
0
浅析行内元素视觉格式化

起因 前段时间组内同学在开发运营页的过程中,遇到一个有趣的问题:移动端页面采用 ,图片在垂直方向展示时会出现莫名的间隙(如下图所示)。几位同学纷纷提出不同的解决方案,但为什么会出现...

代码君的自白
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
11
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
9
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
8
0
在PC上测试移动端网站和模拟手机浏览器的5大方法

总结很全面,保存下来以备不时之需。原文地址:https://www.cnblogs.com/coolfeng/p/4708942.html

kitty1116
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部