CSS中什么是块级元素?


哪些是块级元素?可以用来干嘛呢?
在做页面布局的时候,一般会将html元素分为两种,即块级元素和行内元素。

一、块级元素:block element
每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;
块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。
DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

二、行内元素:inline element
也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。

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

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

对行内元素,需要注意如下
设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范或孝基围是增大了,但是对元素周围的内容是没影响的。

五、常见的块状元素
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 ? 下划线

七、行内元素与块级元素有什么不同?
区别一:
块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二:
块级:块级元素可以设置宽高
行内:行内元素不可以设置宽高
区别三:
块级:块级元素衫谨可以设置margin,padding
行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四:
块级:display:block;
行内:display:inline;
可以通过修改display属性来切换块级元素和行内元素

参考:http://www.studyofnet.com/news/398.html

块元素(block element)一般是其他元素的容器元素。

拓展资料:

1、《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表烂州现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。

2、比如谨册,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

3、p、h1、或div等元素常常称为块级元素,这些元素显示为一块内容;Strong。span等饥晌蔽元素称为行内元素,它们的内容显示在行中,即“行内框”。(可以使用display=block将行内元素转换成块元素,display=none表示生成的元素根本没有框,也既不显示元素,不占用文档中的空间)

4、行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方。

5、说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。

6、一般的 块级元素诸如段落<p>、标 题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........

7、块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

8、<span>在CSS定义中属于一个行内元素,而<div>是块级元素。

参考资料:veda原型网站网页链接


CSS中常见的块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>桥轮 、<form>。

块级元素的特点:

每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。元素的高度、宽度、行高和顶底边距都是可以设置的。元素的宽度如果不设置的话,默认为父元素的宽敏圆信度。

行级元素的特点:

可以和其他元素处于一行,不用必须另起一行。元素的高度、宽度及顶部和底部边距不可设置。元素的宽度就是它包含的文字、图片的宽度,不可改变。


拓展资料:行级元素与块级元素的腔茄转换

可以在css样式中用display:inline将块级元素设为行级元素,同样,也可以用display:block将行级元素设为块级元素。(资料参考:网页链接)


通俗的告诉你,要不怕你晕。

比如一段文字“你好吗?小雹姿莉”。这段文字在HTML中所占的逻辑区域是“行元素”,通俗的说我们可源敬绝以将其看作一个没有外包装箱的物体,也就是裸奔着的东西。

那么除此之外,比如div、td、img等,这样在逻辑区域上有明显的划分,这些属于“块元素”。也就是像一个个小盒子。

除了行元素,剩下的都是块元稿带素。
块级元素比如div,独自占一行,且可以设置宽,高和外边距