HTML 行内-块级-行块级
- 行内元素
- 相邻元素可以在一行显示直到一行排不下才进行换行。
- 不可设置宽高、对齐等属性,宽度随内容变化。
- padding和margin的设置中,水平方向(padding-left...)有效果,垂直方向无效果。
- 行内元素只能容纳文本或则其他行内元素。
- 块级元素
- 占一行或多行。
- 可设置宽高。
- 排列从上至下。
- 可设置padding和margin。
- 宽度没设置,默认100%。
- 可以容纳内联元素和其他块元素。
- 行内块元素
- 不自动换行。
- 可设置宽高。
- 排列从左到右。
- 行内元素,块级元素,行内块元素之间的转换
- display:inline;转换为行内元素
- display:block;转换为块状元素
- display:inline-block;转换为行内块状元素
行内元素
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量
块级元素
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易,也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 -h6 标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
caption - 定义表格标题
dd - 定义列表中定义条目
dt - 定义列表中的项目
legend - 为 <fieldset>元素定义标题
li - 定义列表项目
tbody - 标签表格主体(正文)
td - 表格中的标准单元格
tfoot - 定义表格的页脚(脚注或表注)
th - 定义表头单元格
thead - 标签定义表格的表头
tr - 定义表格中的行
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet - java applet
button - 按钮
del - 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object - object对象
script - 客户端脚本
总结:
1.块级元素 block 如 div h1 p ul li等,会换行,想在同一行显示,需浮动或者display: inline
2.行级元素 inline 如 a span b 多个可以并排显示,默认设置宽度是不起作用,需设置 display: inline-block或者block才行。
HTML 行内-块级-行块级的更多相关文章
- css块级标签,行内标签,行内块标签的转换(2)
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- html:常见行内标签,常见块级标签,常见自闭合标签
本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...
- html标签的显示模式(块级标签,行内标签,行内块标签)(转)
html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...
- CSS(3)---块级标签、行内标签、行内块标签
块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...
- * CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)
前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...
- 行内元素有哪些?块级元素有哪些?CSS的盒模型?转载
块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的 ...
- css块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- HTML开发之(块级标签,行内标签,行内块标签)
显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
随机推荐
- Windows编程 Windows程序的生与死(上)
引子 “Windows 程序分为‘程序代码’和‘UI(User Interface)资源’两大部份,两部份最后以RC编译器(资源编译器)整合为一个完整的EXE 文件.所谓UI 资源是指功能菜单.对话框 ...
- 完全卸载RabbitMQ和Erlang
要从计算机中完全卸载RabbitMQ和Erlang,请执行以下操作:(1)打开Windows控制面板,双击“程序和功能”. (2)在当前安装的程序列表中,右键单击RabbitMQ Server,然后单 ...
- gdb-example-ncurses
gdb-example-ncurses http://www.brendangregg.com/blog/2016-08-09/gdb-example-ncurses.html 1. The Prob ...
- LeetCode:184.部门工资最高的员工
题目链接:https://leetcode-cn.com/problems/department-highest-salary/ 题目 Employee 表包含所有员工信息,每个员工有其对应的 Id, ...
- datatable 写入excel 2007
1 添加引用: NPOI NPOI.OOXML 2 private static void GenerateFile(DataTable dt) { DataSet ds = new DataSet( ...
- vue使用sass报Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
项目中使用sass报错,之前一直使用同样的安装方式 cnpm install sass-loader node-sass -D,正常使用没问题,没想到这次同样的方式却报错了,网上查的原因是sass-l ...
- 修改jumpserver源码并且实现一个自定义功能模块
在前面已经说了,如何打开jumpserver的管理控制台并且自定义自己的数据模型.接下来实现一个自定义的功能模块. 先看效果! 一 定义好自己的模型(model) 1.1 这一块儿在前一篇博文已经讲过 ...
- 【Mac】 开启原生的 NTFS 硬盘格式支持
一.MacOS 10.13 之前 二.MacOS 10.13 及之后 一.MacOS 10.13 之前 直接跳到引用地址查看,下面的草记只是为了防止链接丢失 引用地址 打开终端 切换至root身份,输 ...
- mysql主备搭建
mysql主备搭建参考文档https://www.cnblogs.com/clsn/p/8150036.html前提条件:系统:Ubuntu 16.04.6 LTSMySQL版本:5.7.24主库IP ...
- 深度学习_1_Tensorflow_1
# 深度学习 # 图像识别,自然语言处理 # 机器学习 深度学习 # 分类:神经网络(简单) 神经网络(深度) # 回归 图像:卷积神经网络 # 自然语言处理:循环神经网络 # cpu:运行操作系统, ...