Day8 区块元素与行内元素

网页容器概念
网页上的内容可以被分为排版用的容器(ex: <div> )与元素(ex: <h1>、<p>、<img>……)。
就像咖啡需要杯子作为容器来盛装、厨房内的碗盘需要使用橱柜来整理收纳，网页上的元素内容也需要运用容器来放置分类。

容器标签 ＜div></div>
不具有任何语意，专门用来排版
透过div标签可以在网页中产生各个不同的区块

如下图所示，使用div标签将html元素包起来形成一个区块，也可以在div内设定css样式

如果不了解HTML元素有预设的CSS display属性，可能会觉得很奇怪
为什麽h1标签和p标签写的内容没有多到会掉到下一行，却自动换行了?
a标签怎麽没有和h1标签、p标签一样换行，反而是并排在同一行呢?

相关资料:display

不同的HTML元素就和不同的人一样会有不同的个性，有喜欢独处的，或是喜欢热闹的
所有的HTML元素可以被区分为两类:

1. 区块元素 (喜欢拥有自己的空间) 2. 行内元素 (喜欢和别人一起住)

区块元素( display:block;)
特性:

1. 宽度会依照上一层的资料(父元素)自适应占满整个版面
2. 会另起一行来呈现
3. 宽度高度可以自订
   常见区块元素:div、p、h1~h6、ul、ol、li......
   相关资料: Block-level elements

行内元素( display:inline;)
特性:

1. 行内元素会排列在同一行(常用在段落内)
2. 无法自订宽度高度
3. 设置上下margin、padding无效
   常见行内元素: a、img、span、input、br、...
   相关资料: Inline elements

以上为个人学习笔记整理
若有错误，欢迎指正