文档章节

什么是行内元素?

博为峰教研组
 博为峰教研组
发布于 2017/04/09 17:06
字数 372
阅读 3
收藏 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 (字面意思表现形式设为块级)

 

 

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(三)Nginx配置·续

概述 前文写了关于Nginx环境配置,但是还没有完,接下来将会继续讲三个相关的配置 主要是以下三个 1.Nginx访问日志 2.Nginx日志切割 3.静态文件不记录日志和过期时间 Nginx访问日志 1.先看看...

杉下
今天
1
0
jquery创建类似于java的map

var map = {}; // Map map = new HashMap(); map[key] = value; // map.put(key, value); var value = map[key]; // Object value = map.get(key); var has = key in map; // boolean has = ......

SuperDabai
今天
0
0
java大数据转换16进制转10进制

public static void main(String[] args) {String hex = "0xdbf3accc683297cf0000";BigInteger amount = new BigInteger(hex.substring(2), 16);System.out.println(amount);......

任梁荣
昨天
2
0
OSChina 周六乱弹 —— 目测我们程序员丁克的几率不大

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @真Skr小机灵鬼儿:8.13分享Jocelyn Pook/Russian Red的单曲《Loving Strangers》 《Loving Strangers》- Jocelyn Pook/Russian Red 手机党少...

小小编辑
昨天
15
4
TypeScript基础入门 - 函数 - 剩余参数

转载 TypeScript基础入门 - 函数 - 剩余参数 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.1 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部