前端之块级元素与行内元

关于学习前端时，遇到的一些很容易被忽略的知识点。笔记什么，一切都是方便自己。

1. 常见块级元素：div p form ul ol li 等；
   常见的行内元素：span strong em;
2. 区别：
   (1) 块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。

<div className="test1">这是测试DIV！</div>
<p className="test2">这是测试P！</p>
<span className="test3">这是测试SPAN！</span>
<strong className="test4">这是测试STRONG！</strong>

示例1

(2) 块级元素可以设置width和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。

.test1 {
background-color: deepskyblue;
height: 40px;
}
.test2 {
background-color: red;
width: 600px;
}
.test3 {
background-color: greenyellow;
height: 40px;
width: 600px;
}

示例2

(3)块级元素可以设置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;
}

示例3
PS：给内联元素设置背景与内边距时，背景可以向元素上下延伸，视觉效果就是与前面的行重叠，但是行高没有改变，因此该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响。（对于为什么会出现这种现象，容我私下想想。-_-|||） 示例4

(4)其他：
块状元素：总是从新行开始，宽度默认是容器的100%，可以容纳内联元素和其他块状元素。
内联元素：和相邻行内元素在一行上，宽度默认是它本身内容的宽度，只能容纳文本或者其他内联元素。

3. 块级元素和行内元素的相关属性：display
   (1)display小结：
   display是CSS的定位属性，它规定元素应该生成的框的类型。一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。
   常用的值：
   none：此元素不会被显示；
   block：此元素将显示为块级元素，此元素前后会带有换行符；
   inline：默认，此元素会被显示为内联元素，此元素前后没有换行符；
   inline-block：行内块元素。
   等等。。。
4. 总结：block（块级），inline（内联）和inline-block（行内块）

• display: block
  1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。
• display: inline
  1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  2. inline元素设置width,height属性无效。
  3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
• display: inline
  1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

参考文章：
行内元素与块级元素的总结
css块级元素和行内元素详细解析
block，inline和inline-block概念和区别
CSS display 属性