【重拾基础】块级元素和行内元素

最近给自己定了一个小目标,一周温习一个基础知识点,并输出一篇手记。看自己是否能坚持下去。^_^

块级元素

块级元素占据独立的空间,有以下特点:

  • 独占一行或多行
  • 宽度,高度,内外边距可以设置,且有效
  • 宽度默认是父容器的100%
  • 可以作为其他块级元素和行内元素的父容器(文本类块级元素不建议作为其他块级元素的容器,如p, h1~h6

常见的块级元素有:div, h1~h6, hgroup, p, table, form, ul, ol, hr, header, main, footer, aside, article, section, video, audio, canvas, pre, option

行内元素

行内元素不占据独立空间,依靠自身内容撑开宽高,与同属一个父容器的其他行内元素在同一行上依次排列,根据white-space属性值来决定是否换行。它们具备以下特征:

  • 不独占一行,但内容过长时会根据white-space控制换行。
  • 宽度,高度的设置是无效的。内外边距只能设置左右方向(设置padding-top, padding-bottom, margin-top, margin-bottom是无效的)。但是有一点要注意,padding-toppadding-bottom对自身有表现效果,但是不影响周围元素的布局,看图说话:

  • 宽度由自身内容决定。
  • 行内元素不建议作为块级元素的容器(a标签例外)

常见的行内元素有:span, i, code, strong, a, br, sub, sup, label

对于不确定的元素,可以设置width来测试下,如果width不生效,说明是行内元素啦。

行内块级元素

行内块级元素也不会独占一行,但是可设置宽高,内外边距等。

常见的行内块级元素有:input, button, img, select, textarea

CSS显示转换

display: block;

让元素表现为块级元素

display: inline;

让元素表现为行内元素

display: inline-block;

让元素表现为行内块级元素



首发链接

扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

原文地址:https://www.cnblogs.com/wenbinjiang/p/11590238.html

时间: 2024-11-05 22:44:30

【重拾基础】块级元素和行内元素的相关文章

关于块级元素与行内元素

块级元素 块级元素拥有以下的几个特征: 如果宽度未设置,则元素会自动适应父元素的宽度 可以拥有外边距与内边距 如果高度未设置,则元素会自动适应子元素的高度(假设它们没有设置浮动与定位) 默认情况下,将放置在Html标记里前一元素之后(假设没有浮动或定位) 忽略vertical-align属性 所以,对于块级元素来说,我们没有必要设置width:100%来让它的宽度撑满父元素,而且那样做的话还有可能会对日后的维护带来麻烦. 而且,对于上述第四点来说,我们没有必要对块级元素设置"clear"

【CSS3】块级元素与行内元素的区别

一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效 块级元素 总是在新行上开始,占据一整行: 高度,行高以及外边距和内边距都可控制: 宽带始终是与浏览器宽度一样,与内容无关: 它可以容纳行内元素和其他块元素. 二.行内元素转换为块级元素 display

块元素和行内元素

块元素: 1.占用整行宽度 2.前后都有换行符 3.拥有完整的盒模型结构 行内元素: 1.根据内容决定占用宽度 2.前后不换行 3.不拥有完整的盒模型结构 补充: warning: 1.一个内联元素设置为display:block是不允许有它内部的嵌套块元素. 2.块级元素可以包含行内和块级,但行内元素不能包含块级元素. 3.行内元素设置width无效,height无效,可以设置line-height, margin上下.padding上下无效.(水平方向排列)

css基础:块级元素与行内元素

块级元素与行内元素的概念 块级元素一般是内容的容器,可以设置宽度和高度.而行内元素则不行,行内元素只能包含内容和其他行内元素,而块级元素可以包含行内元素和其他块级元素, 块级元素可以设置margin.padding,而行内元素水平方向margin-left.margin-right.padding-left和padding-right可以有效, 竖直方向上的margin-top.margin-bottom.padding-top和padding-bottom不能生效 占据整个父级元素.通俗的来讲

Web前端入门学习(4)—— 块级元素和行内元素之特征与转换

块级元素和行内元素  1.元素的定义 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.     div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度

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

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

从块级元素和行内元素的分析到bfc的布局理解

接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说明: 名称 类型 说明 offset Number 打点的视频偏移时间,单位:秒 text String 打点的文本信息,默认UI会使用 isCustomized Boolean 是否使用默认UI,不使用设置为true 事件 Aliplayer提供两个事件:鼠标进入进度条上的打点和鼠标离开进度条上的

HTML 块级元素与行内元素

1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障

替换元素和不可替换元素,块级元素和行内元素

替换元素和不可替换元素 1>  替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,在其显示中生成了框.HTML中的<img>.<input>.<textarea>.<select>.<object>都是替换元素.这些元素往往没有实际的内容,即是一个空元素.Example:#1 <img src=”path/to/picture.jpg”/>浏览器根据<img>标签的src属性的值来读取图片信