CSS 中的内联元素、块级元素、display的各个属性的特点

CSS的内联元素和块级元素

块级元素<h1>-<h6>、p、dt是不可以内联块级元素的

1、block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。

2、大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):

3、常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

4、常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。

一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

Display属性中几种常见的属性值

Display:none 是元素隐藏不显示

display:block

1、block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

display:inline

1、inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

2、nline元素设置width,height属性无效。/3、inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

1 、简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。

比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

2、在当两个元素标签之间有换行符时,如果用inline-blockde 的方式将元素并排显示时,

如果父容器的宽度正好为并排显示子元素的宽度之和,则有可能不能并排显示,

原因是inline-block会将换行渲染成空格占用一定的空间,所以为了让子元素并排显示则可以再父容器上设置font-size:0,这样空格就不会占用空间,

如果子元素中又要显示的文本内容,则再在子容器上设置font-size就好。

时间: 2024-10-12 23:19:09

CSS 中的内联元素、块级元素、display的各个属性的特点的相关文章

CSS 中的内联元素、块级元素以及display的各个属性的特点

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元

***CSS里有哪些常见的块级元素和行内元素以及其区别?

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level):而span元素的默认display属性值为“inline”,称为“行内”元素.      div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样子:与之相反,像“span”“a”这样的行内元素,则没有自己的独立空

css基础 行内元素 块级元素

1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b - 粗体(不推荐),br - 换行,em - 强调,font - 字体设定(不推荐),i - 斜体,img - 图片,input - 输入框,label - 表格标签, select - 项目选择,small - 小字体文本,span - 常用内联容器,定义文本内区块,strike - 中划线,s

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在

HTML--行内元素/块级元素

行内元素 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持上下的margin和padding 5.代码换行被解析成一个空格 块属性标签 1.默认独占一行显示 2.没有宽度时,默认撑满一排 3.支持所有css命令 行内块级元素 1.块在一行显示 2.行内属性标签支持宽高 3.没有宽度的时候内容撑开宽度 但是inline-block也存在几个问题 1.代码换行同样会被解析为空格 2.IE67不支持块级元素的inline-block属性 块级元素和行内元素的转换 dis

HTML行内元素 块级元素及语义化

---------------------------------------可以换行的元素         不能换行的元素-------------------------------- 块级元素                                                                          行内元素 div - dl - form ---交互表单 a - 链接  br - 换行  em - 强调   h1 - h6 标题  hr - 水平分隔

行内元素 块级元素之间的嵌套

默认的span标签是一个行内标签,页面构成时,尽量把它作为最后一个标签. 当然不绝对,你可以在内套用同是行内标签的元素:<i>.<span>.<em>...等等等. 如果套用块状标签,那么很多情况浏览器解析会把它放到span的外面,w3c内明确标识了,行内元素不可以套用块状元素. 1 如果不按照HTML规则书写代码时,浏览器就不会正确解析,会将不符合嵌套规则的节点放到目标节点的下面,或者变成纯文本.HTML存在许多种类型的标签,有的标签下面只允许特定的标签存在,这就是H

html入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应< >对应> 二.行内元素和块级元素1.块级标签默认情况下,每一个块级元素都是独占一行的即元素的前后都会换行 都有 align 属性,例如: p标签 段落标签 h1~6标签 标题标签 hr标签   水平分割线标签 div标签 块级元素 2.行内标签 不会换行可以和其他的标签或文本在一行内显示

这周学了css,下面我来写写块级元素有哪些?

这周学习css内容有很多,记住的还需要消化下,块级元素(可自动换行)(可设宽高) <address>地址  <blockquote>块引用 <center>居中对齐 <dir>目录列表 <div>盒子 <dl>定义列表 <fieldset-form>控制组 <form>交互表单 <h1-h6>标题 <hr>水平分割线 <menu>菜单列表 <ol>排序 <p