块级元素和内联元素.md

块级元素和内联元素

块级元素

块级元素顾名思义就是一个块，一个方框，可以设置这个方框的大小，当然它也不一定非得是方框可以用clip,border-radius等css属性改变形状，但在界面布局上通常仍视作方框
块级元素通常会另起一行
html的div标签默认为块级元素，所以我块级一般喜欢用div 块级元素也可以通过css的display属性的block设定，如果你的html标签默认不是块级元素想把它变成块级可以用这个方法
上示例代码

<!--div默认是块级元素-->
<div></div>
<!--通过css把不是块级元素变成块级元素-->
<span style="display:block"></span>
<!--通过width height改变块级元素大小，加上背景颜色更直观的显示效果-->
<div width="10" height="10" style="background-color:red;"></div>
<!--用css的width和height属性也能改变宽高-->
<div style="width:10px;height:10px;background-color:red;"></div>

内联元素

mdn上的解释是“一个行内元素只占据它对应标签的边框所包含的空间。”
也就是它通常无法设置大小，内联元素的大小全靠内容撑开 内联元素不会另起一行
用我的理解内联元素是一段特殊的文字 html的span标签默认为内联元素

如果既想让它显示成一个可以调整大小的方框，又不想换行
你可以把行级元素里套一个块级元素

<span><div></div></span>

很显然这不是个好方法，那么css的display属性的inline-block了解一下

<div style="display:inline-block"></div>

看似用inline-block代码看上去更长，但是如果过多的嵌套会让代码条理变得不清晰，后期修改就是灾难，而且如果要设置其他的css属性，加上这段也没显得那么长