前端开发行内元素与块状元素
以图例来表述行内元素和块级元素的区别会更加直观：
// 我是行内元素span标签 // //我是行内元素strong标签//
注：行内元素会再一条直线上，是在同一行的。
//我是块级元素div标签// //我是块级元素P标签//
注：块级元素各占一行。是垂直方向的！
如果你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block; 块级元素可以用样式控制其高、宽的值。
行内元素不可以控制宽和高，除非你想将它转变成为块级元素。它的宽和高，是随标签里的内容而变化。
常见的块状元素
- address—–地址
- blockquote—–块引用
- center—– 举中对齐块
- dir—–目录列表
- div—–常用块级容易，也是CSS layout的主要标签
- dl—–定义列表
- fieldset—–orm控制组
- form—–交互表单
- h—–标题
- hr—–水平分隔线
- isindex—–input prompt
- menu—–菜单列表
- noframes—–frames可选内容，（对于不支持frame的浏览器显示此区块内容
- noscript—–可选脚本内容（对于不支持script的浏览器显示此内容）
- ol—–有序表单
- p—–段落
- pre—–格式化文本
- table—–表格
- ul—–无序列表
常见的行内元素
- a—– 锚点
- abb—–缩写
- acronym—–首字
- b—–粗体(不推荐)
- 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—–下划线
行内元素与块级元素有什么不同？
区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度 行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二：
块级：块级元素可以设置宽高 行内：行内元素不可以设置宽高
区别三：
块级：块级元素可以设置margin，padding 行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四：
块级：display:block; 行内：display:inline; 可以通过修改display属性来切换块级元素和行内元素
