CSS 5 CSS 内联元素和块状元素

2024-06-05 07:01:53

CSS

文章目录

CSS
5 CSS 内联元素和块状元素
- 5.1 内联元素【inline】
- 5.2 块级元素【block】
- 5.3 内联元素与块级元素的区别
- - 5.3.1 内联元素
  - 5.3.2 块状元素
  - 5.3.3 内联块状元素 inline-block
- 5.4 关联

5 CSS 内联元素和块状元素

5.1 内联元素【inline】

常见的内联元素

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
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 – 下划线

5.2 块级元素【block】

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
li

5.3 内联元素与块级元素的区别

5.3.1 内联元素

内联元素不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
内联元素不可以设置宽高
内联元素可以设置margin，padding，但只在水平方向有效。

5.3.2 块状元素

块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
块级元素可以设置宽高
块级元素可以设置margin，padding

5.3.3 内联块状元素 inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现（可以设置宽高和margin值）。之后的内联对象会被排列在同一内联。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

5.4 关联

可以通过修改display属性来切换块级元素和内联元素

块级：display:block;
内联：display:inline;

CSS 5 CSS 内联元素和块状元素相关推荐

html 块状元素转换,块状元素与内联元素的转换
在布局页面的时候,HTML标签分成两种,块状元素和内联元素(我们平时用到的标签div和p就是块状元素,链接标签a就是内联元素).它们是很重要的两个概念,既然说到概念就先看看块状元素和内联元素的定义,在 ...
【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录一.CSS 层叠样式表二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果一.CSS 层叠样式表 ...
行内元素、块状元素和行内块元素
1关于行内元素和块状元素的说明根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属 ...
HTML行内元素、块状元素、行内块状元素介绍
目录 1.行内元素: 1.1.行内元素特征: 1.2.常见行内块元素: 2.块状元素 : 2.1.块状元素特征: 2.2.常见块状元素 : 3.行内块状元素: 3.1.行内块状元素特征: 3.2.常见 ...
HTML的display属性将行内元素、块状元素、行内块状元素互相转换以及三者的区别
1.行内元素查看演示 (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 <html> < ...
0428专题：行内元素与块状元素
专题: 行内元素与块状元素块状元素 |-特点:默认占一整行.可以自动换行.可以设置大小 |-常见块状元素:div.li 行内元素 |-特点:不能设置宽高,内容有多大,我就有多大: 对m ...
HTML行内元素、块状元素和行内块状元素的区分
HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...
html怎么转换内联元素,css怎么将内联元素设成块元素？
元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局.下面我们来看一下css将内联元素设成块元素的方法. css使用display:bloc ...
CSS 中的内联元素、块级元素以及display的各个属性的特点
1. display:block 1.1 block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 1.2 block元素可以设置width,he ...

最新文章

热门文章