行内元素、块级元素

2021-05-26

初窥门径

什么叫行内元素？
常见的span、a、label、strong、b等html标签都是行内元素
什么叫块级元素?
常见的div、p、h1、li等html标签都是块级元素

略知一二

行内元素有：a,span,label,strong,br,img,input,select,textarea,cite…
块级元素有：div,p,li,h1~h6,form,ol,ul,dl,address,hr,menu,table…

粗通皮毛

行内元素-内联元素(inline element)

a-锚点、abbr-缩写、acronym-首字、b-粗体(不推荐)、big-大字体、br-换行、cite-引用、code-计算机代码、dfn-定义字段、em-强调、font-字体设定、i-斜体、img-图片、input-输入框、kbd-定义键盘文本、label-表格标签、q-短引用、select-项目选择、small-小字体文本、span-常用内联容器，定义文本内区块、strike-中划线、strong-粗体强调、sub-下标、sup-上标、textarea-多行文本输入框、tt-电传文本、u-下划线

块元素(block element)

address-地址、blockquote-块引用、center-居中对齐块、dir-目录列表、div-常用块级元素、dl-定义列表、fieldset-form控制组、form-交互表单、h1-大标签、h2~h6-x级标题、hr-水平分割线、menu-菜单列表、ol-排序表单、p-锻炼、ul-非排序列表、pre-格式化文本、table-表格

可变元素

可变元素为根据上下文语境决定该元素为块元素或者行内元素
button-按钮、del-删除文本、ins-插入的文本、map-图片区块、object-object对象、script-客户端脚本

驾轻就熟

区别：

1、块级元素会独占一行，其宽度自动填满父元素宽度；行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化.
2、块级元素可以设置width,height属性【注意：块级元素即使设置了宽度，仍然是独占一行】; 行内元素设置宽度、高度无效
3、块级元素可以设置margin和padding；行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果(水平方向有效，竖直方向无效)

青出于蓝

行内元素和块级元素直观上的区别

行内元素会在一条直线上排列，都是同一行的，水平方向排列；块级元素各占据一行，垂直方向排列。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
行内元素于块级元素属性的不同，主要是盒模型属性上行内元素设置width，height无效(可以设置line-height),margin,padding上下无效

融汇贯通

行内元素属性

行内元素属性标签它和其它标签处在同一行内
行内元素属性标签无法设置宽度，高度行高距顶部距离距底部距离
行内元素属性标签的宽度是直接由内部的文字或者图片等内容撑开的
行内元素属性标签内部不能嵌套行属性标签（a链接内不能嵌套其他链接）
块级元素属性

每一个块级元素属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始（因为每一个块属性标签都会直接占据一整行的内容，导致下面的内容也只能从新的一行开始）
块级元素属性标签都是可以设置宽度、高度，行高，距顶部距离，距底部距离
块级元素属性标签的宽度假如不做设置，会直接默认为父元素宽度的100%
块级元素属性标签是可以直接嵌套的
p标签中不能嵌套div标签

出类拔萃

CSS设置行内元素的

/* 水平居中 */
div {
    text-align: center;/*div内的行内元素均会水平居中*/
}
/* 垂直居中 */
div {
    height: 30px;
    line-height: 30px;/* div内的行内元素均会垂直居中 */
}

CSS设置块级元素的

/* 水平居中 */
div p {
    margin: 0 auto;
    width: 500px;/*块级元素p一定要设置宽度，才能相当于div父容器水平居中*/
}
/* 垂直居中 */
div {
    width: 500px;
}
div p {
    margin: 0 auto;
    height: 30px;
    line-height: 30px;
}

返璞归真

在标准流文档里面，块级元素具有以下特点：

① 总是在新行上开始，占据一整行；
② 高度，行高以及外边距和内边距都可控制；
③ 宽带始终是与浏览器宽度一样，与内容无关；
④ 它可以容纳内联元素和其他块元素。

行内元素的特点：

① 和其他元素都在一行上；
② 高，行高及外边距和内边距部分可改变；
③ 宽度只与内容有关；
④ 行内元素只能容纳文本或者其他行内元素。