块级和内联元素

以前就已经说过了块级元素和内联元素

可是我始终没找到

因此今天我整理了一下资料将他做为一个单独的章节发出来

由于不少同窗都是新手小白

第一步：上理论

块级元素：

每一个块级元素默认占一行高度，一行内添加一个块级元素后没法通常没法添加其余元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素通常可嵌套块级元素或行内元素；

内联元素：

也叫行内元素、内嵌元素等；行内元素通常都是基于语义级(semantic)的基本元素，只能容纳文本或其余内联元素，例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。--------------------------------------------------------第二步：上教程
块级元素：

如上图所示

块级元素就是一个盒子，内部能够放盒子，也能够放内联元素

并且他能够控制宽高且独占一行

得出：

1. 块级元素可给于宽和高
   

2. 块级元素独占一行

--------------------------------------------------------

行内元素：

如上图所示

内联元素又名行内元素

他的宽高是由内容的宽高控制

且多个内联元素同处一行，直到浏览器装不下才重起一行

得出：

1. 行内元素不能够控制宽高
   

2. 行内元素没有独占一行

--------------------------------------------------------

行内元素与块级元素总结：

块级元素：块级元素可给于宽和高且独占一行；

行内元素：宽高是由内容的宽高控制且多个内联元素同处一行，直到浏览器装不下才重起一行；

那是不是固定的元素没法更改呢？

通常块级元素的display属性默认为block；

行内元素的display属性默认为inline；
经过修改元素的display属性能够达到修改元素的块级和行内

如何修改？

display是css样式

因此修改使用的是“:”而不是“=”

通常于head部分引用style设置，或元素前标签引用style，或使用外部样式

以下图，

head部分引用style设置

--------------------------------------------------------

下图

元素前标签引用style

--------------------------------------------------------

外部样式这里就不引入了，后面实例会用到

转自：公众号 双鱼站

做者：双鱼站的小鱼儿