`

块状元素与内联元素

阅读更多

block(块)元素的特点:


①总是在新行上开始;
②高度,行高以及外边距和内边距都可控制;
③宽度缺省是它的容器的100%,除非设定一个宽度。
④它可以容纳内联元素和其他块元素


inline元素的特点:

①和其他元素都在一行上;
②高,行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素

常见的块状元素与内联元素

 

                                        
                                          
块状元素:  
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易,也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
ol - 有序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 无序列表
内联元素: 
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 - 定义变量
分享到:
评论

相关推荐

    块状元素与内联元素大全

    ### 块状元素与内联元素大全 在HTML中,根据元素的默认显示方式,可以将所有的HTML标签大致分为两大类:块状元素(Block-level Element)与内联元素(Inline Element)。这两种类型的元素在网页布局中扮演着重要的...

    css块状元素与内联元素以及inline-block

    CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...

    CSS 盒模型、块状元素与内联元素、CSS选择器

    ### CSS盒模型、块状元素与内联元素、CSS选择器 #### 一、CSS盒模型 CSS盒模型是理解CSS布局的关键概念之一。它定义了网页元素如何根据其CSS属性进行渲染。盒模型主要由四个部分组成: - **内容(Content)**:这...

    css 块状元素和内联元素

    当我们将内联元素与块状元素结合时,可以看到`#div1`作为容器,同时容纳了块状元素`#div2`和内联元素`<a>`。这展示了块状元素作为容器的能力,可以包含内联元素和其他块状元素。在增加`#div3`这个蓝色块状元素后,...

    2天掌握DIV CSS网页制作技术

    1. 第一课:盒模型、块状元素与内联元素以及CSS选择器的使用,是学习CSS的基础。 2. 第二课:浮动(float)用于创建多列布局,元素会脱离正常文档流。 3. 第三课:清除浮动(clear)解决因浮动导致的父元素高度塌陷问题...

    2天掌握DIV+CSS网页制作技术

    6. **块状元素与内联元素**: 块状元素如`div`占据整行,内联元素如`span`只占据自身内容宽度,它们在布局中的角色和相互作用是理解CSS布局的关键。 **课程内容** 7. **盒模型、块状元素与内联元素、CSS选择器**: ...

    css样式学习资料

    - **学习目标**: 理解盒子模型的基本概念,熟悉块状元素与内联元素的区别,掌握CSS选择器的使用方法。 ##### 第二课: 浮动 - **概念**: 浮动使元素脱离文档流,可实现左右排列布局。 - **应用场景**: 常用于创建侧...

    HTML5&CSS3网页制作:元素的类型.pptx

    - 示例:`<img>`元素可以设置宽度和高度,并与其他内联元素并排显示。 理解这些元素类型对于创建响应式和动态布局至关重要。在CSS3中,可以通过display属性改变元素的默认类型,例如将一个块状元素变为内联元素(`...

    前端面试题面试常见问题集合.pdf_面试资料下载

    2. **HTML块状元素与内联元素**:块状元素如`<div>`、`<p>`、`<h1>`等,它们默认占据一整行,可以设置宽度、高度和外边距。内联元素如`<span>`、`<a>`、`<img>`等,它们只占据自身内容的宽度,可以并排显示,但不能...

    CSS布局方法

    #### 二、XHTML中的块状元素与内联元素 - **块状元素**:这类元素占据整行空间,具有高度和宽度,如`<div>`。 - **特点**:不能在同一行放置其他元素或文本。 - **用途**:适用于页面的大块区域布局。 - **内联...

    css div学习

    6. **块状元素与内联元素**:理解两者的区别,以及它们在布局中的应用。 7. **CSS精灵**:使用CSS精灵技术优化网页加载速度。 通过这个课程,学生将能够: 1. 创建具有清晰结构的HTML文档。 2. 使用CSS为网页添加...

    XHTML+CSS页面布局学习笔记

    这篇学习笔记主要讲解了 XHTML 和 CSS 在页面布局中的应用,涵盖了基础知识、CSS 控制页面样式、选择器、盒子模型、块状元素和内联元素等内容。 一、基础知识 1. 什么是 W3C? W3C 是 World Wide Web Consortium ...

    html内联元素和块级元素的基本概念及使用示例

    常见块状元素为“div” 内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”。 根据...

    CSS 制作网页导航条(上)

    1. **内容块状元素与内联元素**: - **块状元素**(Block Elements):如 `<div>`、`<p>` 等,它们默认独占一行,可以设置宽度和高度。 - **内联元素**(Inline Elements):如 `<span>`、`<a>` 等,它们不独占一...

    「资深前端工程师总结」前端面试知识点大全 —CSS 篇

    还有一些元素是内联块状元素,如 、<input> 等,这些元素既是内联元素,又可以设置 width 和 height。 掌握 CSS 的基本概念和应用是非常重要的。只有通过不断的学习和实践,我们才能更好地理解和应用 CSS。

    2天学会DIV+CSS最新版

    - **内联元素**:如`<span>`、`<a>`等,默认情况下与其他内联元素在同一行显示,不会换行。 - **转换方式**:可以使用CSS的`display`属性将内联元素转换为块状元素,或将块状元素转换为内联元素。例如: ```css ....

Global site tag (gtag.js) - Google Analytics