块级元素和行内元素

前言

CSS是前端开发三大语言之一，是一种来表现HTML或者XML样式的计算机语言。

这篇文章主要探讨块级元素和行内元素以及它们之间的转换

---

块级元素

默认情况下，块级元素会另起一行，并尽可能的充满整个容器。
块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构。

常见块级元素：
figcation：图文信息组标题 ，article：文章，figure：图文信息组
output：表单输出，aside：侧栏内容，footer：区段尾或页尾，audio：音频播放
video：视频播放，section：页面区段，canvas：画布、绘制图形，header：区段头或页头，hgroup：标题组
address：联系方式信息，ol：有序列表，p：行，form：表单，pre：预格式化文本，blockqute：块引用
h1-h6：标题，table：表格，dd：列表中条目描述，dl：定义列表，div，hr：水平分割线

设置块级元素的方法：display:block;、float或position:absolute/fixed

行内元素

行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间，
只能包含数据和其他行内元素。

常见行内元素：
b，big，i，small，tt，
abbr，acronym，cite，code，dfn，em，kbd，strong，samp，var，a，bdo，br，img，map，object，q，script，span，sub，sup，
button，input，label，select，textarea

设置行内元素的方法：display:inline

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

块级元素：
1.会另起一行，
2.可以设置width，height，margin，padding，border属性
3.默认宽度是容器的100%

行内元素：
1.和其他元素在同一行内
2.高度和宽度就是内容的高度和宽度
3.可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性
4.border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加