关于学习前端时，遇到的一些很容易被忽略的知识点。笔记什么，一切都是方便自己。
常见块级元素：div p form ul ol li 等；
常见的行内元素：span strong em;
区别
- 块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。
<div className="test1">这是测试DIV！</div>
<p className="test2">这是测试P！</p>
<span className="test3">这是测试SPAN！</span>
<strong className="test4">这是测试STRONG！</strong>
- 块级元素可以设置width和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。
.test1 {
background-color: deepskyblue;
height: 40px;
}
.test2 {
background-color: red;
width: 600px;
}
.test3 {
background-color: greenyellow;
height: 40px;
width: 600px;
}
- 块级元素可以设置margin和padding属性，行内元素水平方向的padding、margin如padding-left、margin-right可以产生边距效果，但是竖直方向的margin-top、padding-bottom不会产生边距效果（水平方向有效，垂直方向无效）。
.test2 {
background-color: deepskyblue;
height: 40px;
margin: 35px;
padding: 30px;
}
.test3 {
background-color: greenyellow;
height: 40px;
width: 600px;
margin: 35px;
padding: 30px;
}
PS：给内联元素设置背景与内边距时，背景可以向元素上下延伸，视觉效果就是与前面的行重叠，但是行高没有改变，因此该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响。（对于为什么会出现这种现象，容我私下想想。-_-|||）
- 其他：
块状元素：总是从新行开始，宽度默认是容器的100%，可以容纳内联元素和其他块状元素。
内联元素：和相邻行内元素在一行上，宽度默认是它本身内容的宽度，只能容纳文本或者其他内联元素。
块级元素和行内元素的相关属性：display
display是CSS的定位属性，它规定元素应该生成的框的类型。一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。
常用的值：
none：此元素不会被显示；
block：此元素将显示为块级元素，此元素前后会带有换行符；
inline：默认，此元素会被显示为内联元素，此元素前后没有换行符；
inline-block：行内块元素。
等等。。。
总结：block（块级），inline（内联）和inline-block（行内块）
- display: block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。 - display: inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。 - display: inline
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
参考文章：