块元素与行内元素(内联元素)

合集 - 2024年(51)

1.博客正在建设中2021-01-012.VSCode安装教程详细简单版2022-10-113.下面在 Mac 演示 Rust 的安装，其他系统教程请看安装 Rust2022-10-134.windows下运行rust报错error: linker `link.exe` not found2022-10-135.Rust学习—解决crates.io 仓库代码下载慢的问题2022-10-126.vscode如何链接git远程仓库gitee或github2022-10-117.标签之段落,换行,水平线2023-03-128.标签之标题2023-03-119.HTML5简介与基础骨架2023-03-1110.VScode开发者工具快捷键2023-03-1011.前端工具的选择与安装2023-03-1012.第一个前端程序2023-03-1013.JavaScript回调函数2023-02-1914.Rust语言迭代器使用总结2022-10-1915.选择器二2023-03-1816.选择器一2023-03-1817.CSS的引入方式2023-03-1718.CSS简介2023-03-1719.HTML5新增标签2023-03-16

20.块元素与行内元素(内联元素)2023-03-16

21.表单元素2023-03-1522.Form表单2023-03-1523.表格单元格合并2023-03-1424.标签之表格2023-03-1425.列表标签之无序列表2023-03-1326.列表标签之有序列表2023-03-1327.标签之文本2023-03-1328.标签之超文本链接2023-03-1229.图片路径详解2023-03-1230.标签之图片2023-03-1231.util.promisify 的那些事儿2023-04-2032.Js数组过滤的方法2023-04-1933.Mac访问Windows10共享文件夹2023-04-1734.如果 Git 远程库与本地库不一致，导致无法将本地代码推送到远程库中，2023-04-1535.构建React-app应用时create-react-app卡住超慢的解决办法2023-04-1536.vscode的格式化的settings.json的个人配置2023-04-1337.雪碧图2023-03-2638.媒体查询2023-03-2639.动画2023-03-2540.css3新特性2023-03-2541.定位2023-03-2542.清除浮动2023-03-2343.浮动2023-03-2344.文档流2023-03-2345.弹性盒子模型2023-03-2246.CSS盒子模型(Box Model)2023-03-2147.关系选择器2023-03-2148.表格属性2023-03-2049.文本属性2023-03-2050.背景属性2023-03-1951.字体属性2023-03-19

收起

块元素与行内元素(内联元素)

 

HTML5出现之前,经常把元素安装块级元素和内联元素来区分.在HTML5中,元素不再按照这种方式来区分,而是按照内容模型来区分,分为元数据型(metadata content),区块型(sectioning content),标题型(heading content),文档流型(flow content),语句型(phrasing content),内嵌型(embedded content),交互型(interactive content).元素不属于任何一个类别,被称为穿透的,元素可能属于不止一个类别,称为混合的.

虽然到了HTML5的版本,元素分类更细致了,但这对初学者不友好,所以我们仍然按照块元素和内联元素做区分,这对我们的布局起到了至关重要的作用.

内联元素和块级元素的区别

块级元素	内联元素
块元素会在页面中独占一行(自上向下垂直排列)	行内元素不会独占页面中的一行,只占自身的大小
可以设置width,height属性	行内元素设置width,height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素

常见块级元素

div,form,h1~h6,hr,p,table,ul,等

常见内联元素

a,b,em,i.span,strong等

行内块级元素(特点:不换行,能够识别宽高)

button,img,input等