Html中块级元素与⾏内元素区别
1.关于⾏内元素和块状元素的说明
根据CSS规范的规定，每⼀个⽹页元素都有⼀个display属性，⽤于确定该元素的类型，每⼀个元素都有默认的display属性值，⽐如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；⽽span元素的默认display属性值为“inline”，称为“⾏内”元素。div这样的块级元素，就会⾃动占据⼀定矩形空间，可以通过设置⾼度、宽度、内外边距等属性，来调整的这个矩形的样⼦；与之相反，
像“span”“a”这样的⾏内元素，则没有⾃⼰的独⽴空间，它是依附于其他块级元素存在的，因此，对⾏内元素设置⾼度、宽度、内外边距等属性，都是⽆效的。
2.⾏内、块状元素区别：
(1).块级元素会独占⼀⾏，其宽度⾃动填满其⽗元素宽度，⾏内元素不会独占⼀⾏，相邻的⾏内元素会排列在同⼀⾏⾥，知道⼀⾏排不下，才会换⾏，其宽度随元素的内容⽽变化
(2). ⼀般情况下，块级元素可以设置 width, height属性，⾏内元素设置width, height⽆效 (注意：块级元素即使设置了宽度，仍然是独占⼀⾏的)
(3).块级元素可以设置margin 和 padding. ⾏内元素的⽔平⽅向的padding-left,padding-right,margin-left,margin-right 都产⽣边距效果，但是竖直⽅向的padding-top,padding-bottom,margin-top,margin-bottom都不会产⽣边距效果。（⽔平⽅向有效，竖直⽅向⽆效）
总结：
1 块级元素独占⼀⾏，⾏内元素在同⼀⾏显⽰
2 块级元素可以设置宽⾼，⾏内元素设置宽⾼不⽣效
3 块级元素默认宽度为100%，⾏内元素默认宽度由内容撑开
4 块级元素可以设置margin和padding的四周，⾏内元素只能设置margin和padding的左右
5 块级元素默认display:block;⾏内元素默认display:inline;
6 布局时，块级元素可以包含块级元素和⾏内元素，⾏内元素⼀般不要包含块级元素
块元素(block element)
* 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 - ⾮排序列表
内联元素(inline element)
* a - 锚点
  * abbr - 缩写
  * acronym - ⾸字
  * b - 粗体(不推荐)
html frame
  * 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 - 下划线
  * var - 定义变量
可变元素
可变元素为根据上下⽂语境决定该元素为块元素或者内联元素。  * applet - java applet
  * button - 按钮
  * del - 删除⽂本
  * iframe - inline frame
  * ins - 插⼊的⽂本
  * map - 图⽚区块(map)
  * object - object对象
  * script - 客户端脚本

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。