文档章节

行内元素解释

 轻轻的往前走
发布于 2018/11/09 23:22
字数 843
阅读 12
收藏 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
博文 34
码字总数 14848
作品 0
西安
高级程序员
私信 提问
从一个垂直居中的方法深度了解基线与 vertical-align

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

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

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

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

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

熊蛋子17
2017/11/12
0
0
伪类&伪元素 - CSS精通之路

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

果汁凉茶丶
2018/01/12
0
0
vertical-align属性与垂直居中

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

leozdgao
2015/05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

操作数据库表

/* DML:数据库操作语言 主要对表中的数据库进行 增删改 ****增:插入一条记录 insert into 表名 (列名1,列名2..) values (值1,值2..) 注意: 1.列名可以在表中选择一列或者几列 2.后面的值 必须...

stars永恒
5分钟前
0
0
你真的了解 volatile 关键字吗?

volatile关键字经常在并发编程中使用,其特性是保证可见性以及有序性,但是关于volatile的使用仍然要小心,这需要明白volatile关键字的特性及实现的原理,这也是本篇文章的主要内容。 一、J...

Henrykin
5分钟前
0
0
条码插件TBarCode Office系列教程二(Word Add-In篇)

TBarCode Office是一款适用于Microsoft Word 2007、2010和2013的条码插件,通过此插件可以轻松的在您的文档中嵌入代码。此系列教程旨在介绍TBarCode Office的常见问题及解答,帮助大家学习使...

ymy_666666
6分钟前
0
0
折腾Java设计模式之命令模式

博客原文地址 折腾Java设计模式之命令模式 命令模式 wiki上的描述 Encapsulate a request as an object, thereby allowing for the parameterization of clients with different requests, ......

大萌小路
6分钟前
0
0
微服务架构:基于微服务和Docker容器技术的PaaS云平台架构设计

基于微服务架构和Docker容器技术的PaaS云平台建设目标是给我们的开发人员提供一套服务快速开发、部署、运维管理、持续开发持续集成的流程。平台提供基础设施、中间件、数据服务、云服务器等资...

编程SHA
7分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部