CSS的元素显示模式与转换
CSS的元素显示模式与转换
1. CSS的元素显示模式
1.1 块元素
<div>标签是最典型的块元素。另外常见的块元素有h1~h6、p、ul、ol、li等。
特点:
- 独占一行
- 高度、宽度、外边距和内边距都可以控制
- 宽度默认是父级宽度的100%
- 是一个容器及盒子,里面可以放行内元素或块级元素
注:文字类的元素内不能使用块级元素,例如p、h1~h6等。
1.2 行内元素(内联元素)
<span>标签是最典型的行内元素。另外常见的行内元素有a、strong、em、i、del、ins等。
特点:
- 相邻行内元素在同一行上,一行可以显示多个
- 高度、宽度直接设置是无效的
- 默认宽度是它本身内容的宽度
- 里面只能放文本或其它行内元素
注:
- 链接里面不能再放链接
- 特殊情况链接a里可以放块级元素,但是给a转换一下块级模式更安全
1.3 行内块元素
img、input、td标签同时具有块元素和行内元素的特点,称为行内块元素。
特点:
- 相邻行内元素或行内块元素在同一行上,但是它们之间会有空白缝隙,一行可以显示多个。(行内元素特点)
- 默认宽度是它本身内容的宽度。(行内元素特点)
- 高度、宽度、外边距和内边距都可以控制。(块级元素特点)
1.4 元素显示模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 父级元素的100% | 可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 可以容纳文本或其它行内元素 |
行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
2. CSS的元素显示模式转换
行内元素要先转换模式,才能设置宽度、高度。
转换为 | 样式 |
---|---|
块级元素 | display: block; |
行内元素 | display: inline; |
行内块元素 | display: inline-block; |
CSS的元素显示模式与转换的更多相关文章
- CSS元素显示模式
CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- 元素显示模式:块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- H5 31-CSS元素显示模式转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS中元素的显示模式
在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level).块级元素(block-level). 1,首先介绍什么是行内元素,什么又是块级元素? 1.1,行内元素就 ...
- CSS 块元素、内联元素、内联块元素三者的区别与转换
三种元素 块元素 内联元素 内联块元素 元素之间的转换 三种元素 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素. 了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素, ...
- HTML连载30-CSS显示模式&模式转换
一.CSS显示模式 1.在HTML中HTML将所有的标签分为两类,分别是容器类和文本级.在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 2.什么是块级元素呢?什么是行内元素? ( ...
- CSS 3学习——transform 2D转换
首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...
- 获取元素的xpath, 转换xpath为csspath进行jQuery元素获取
获取元素的xpath, 转换xpath为csspath进行jQuery元素获取 博客分类: 编程心得 jQueryCSSHTML var $shadow = new Object(); /** 获取 ...
随机推荐
- [01] C#网络编程的最佳实践
网络框架的选择 C++语言里面有asio和libuv等网络库, 可以方便的进行各种高效编程. 但是C#里面, 情况不太一样, C#自带的网络API有多种. 例如: Socket TcpStream(同 ...
- [LeetCode题解]79. 单词搜索
题目描述 题目:79. 单词搜索 解题思路 遍历 首先找重复性,题目说给定单词是否存在于二维数组中,可以简化为从 (x, y) 走 n 步(n 表示单词长度),查看给定单词是否存在.然后再遍历二维数组 ...
- HTTP走私
干货 https://paper.seebug.org/1048/
- Go Http包解析:为什么需要response.Body.Close()
简单来讲就是:为了提高效率,http.Get 等请求的 TCP 连接是不会关闭的(再次向同一个域名请求时,复用连接),所以必须要手动关闭. 2019-01-24 10:43:32 更新 不管是否使用 ...
- oracle之二实例管理及数据库的启动/关闭
实例管理及数据库的启动/关闭 2.1 实例和参数文件 1.instance 功能:用于管理和访问database.instance在启动阶段读取初始化参数文件(init parameter fil ...
- Robotframework自动化4-基础关键字介绍1
前言 上一节已经介绍了APP的启动,那我们就会看到我们引用了一些关键字,对于AppiumLibrary都有哪些常用的关键呢,这一节主要介绍这一部分. AppiumLibrary 常用关键字介绍 1.关 ...
- C语言02
C语言02 1.2 C语言与C程序 1.计算语言 语言发展 机器语言:机器语言是机器能直接识别的程序语言或指令代码,勿需经过翻译,每一操作码在计算机内部都有相应的电路来完成它,或指不经翻译即可为机器直 ...
- 使用U盘的PE系统安装Windows10操作系统 - 初学者系列 - 学习者系列文章
今天闲来无事,就把windows 10的安装再重写一个文(以前写过一个:安装免费的正版Windows10操作系统 - 初学者系列 - 学习者系列文章 ). 1. 制作一个WinPE的U盘. 相信现 ...
- hystrix总结之缓存
通过实现HystrixCommand或者HystrixObservableCommand的getCacheKey方法,可以启动缓存. public class CommandUsingRequestC ...
- 面试官写了个双冒号: : 问我这是什么语法?Java中有这玩意?
一:简洁 方法引用分为三种,方法引用通过一对双冒号:: 来表示,方法引用是一种函数式接口的另一种书写方式 静态方法引用,通过类名::静态方法名, 如 Integer::parseInt 实例方法引用, ...