初探 CSS 盒子基本三属性及显示模式

在前端领域中，CSS 盒子模型的重要性不言而喻。可以毫不夸张的说，任何布局都离不开盒子模型。然后，盒子模型离不开标签的显示模式

一些基本的标签是有默认的显示模式的。可以分为三大类显示模式

• 块级显示模式：自己独占一行，设置宽高起作用

常见的有 div h1-h6 p ul ol dl li dt dd

div {
    width: 100px;
	height: 100px;
	background: pink;
}

<div>盒子</div>
<div>盒子</div>
复制代码

每个盒子会独占一行，不管盒子多宽，都会占满一行。

• 行内块显示模式：一行有多个，设置宽高起作用

行内元素标签：行内元素标签:img,input

img {
	width: 200px;
}			
<img src="dog.jpg"/>
<img src="dog.jpg"/>
复制代码

• 行内显示模式:一行有多个,设置宽高不起作用，它的宽高由自己的内容决定

行内元素标签:span b strong i em u ins s del a

span {
	width: 200px;
	height: 200px;
	background: lightblue;
	font-size: 30px;
}	
<span>一蓑烟雨任平生</span>	
<span>一蓑烟雨任平生</span>
复制代码

行内元素就是挤在一起，谁也离不开谁。

其实，虽然这些元素都有默认的显示模式，但是我们也是可以改动它的。

正所谓，他强任他强，老子尼克杨。

只要设置 display： block/inline/inline-block 就欧了。。。

转载于:https://juejin.im/post/5bab638de51d453eb93d6f19