前端最重要的块状元素、内联元素以及盒子模型

块状元素和内联元素

块状元素

一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度（width）和 高度（height）有效，竖直方向上的margin，padding 有可以设置。
常见的块状元素有div、p、ul、li

内联元素

内敛元素只能容纳文本或者其他内联元素，它允许其他内敛元素与其位于同一行，但是宽度（width）和 高度（height）不起作用，竖直方向上的margin，padding 可以设置但是不起作用。
常见的内联元素有a、img、span

注意 内联元素与块状元素并不是完全无关的东西，可以相互转换。

可以通过元素的 display属性来设置

• dispaly: block;强制声明某元素为块状元素
• display：inline；强制声明某元素为内联元素
• display：none； 不显示，设置之后，该元素和该元素的子元素不再显示，等同于这段代码被删除的效果，再页面内一点空间都不占

常见的Block元素与Inline元素

Block Element
Inline Element

Block Element	Inline Element
address – 地址	a – 锚点
blockquote – 块引用	img – 图片
center – 居中对齐	input – 输入框
dir – 目录列表	em – 强调
div – 常用块级容易，也是CSS layout的主要标签	span – 常用内联容器，定义文本内区块
dl – 定义列表	big – 大字体
fieldset – form控制组	br – 换行
form – 交互表单	cite – 引用
h1 – 大标题	code – 计算机代码(在引用源码的时候需要)
h2 – 副标题	strong – 粗体强调
h3 – 3级标题	b – 粗体(不推荐)
h4 – 4级标题	font – 字体设定(不推荐)
h5 – 5级标题	i – 斜体
h6 – 6级标题	abbr – 缩写
hr – 水平分隔线	acronym – 首字
isindex – input prompt	kbd – 定义键盘文本
menu – 菜单列表	label – 表格标签
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容）	q – 短引用
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）	strike – 中划线
ol – 有序表单	bdo – bidi override
p – 段落	small – 小字体文本
pre – 格式化文本	dfn – 定义字段
table – 表格	u – 下划线
ul – 无序列表	tt – 电传文本
li	s – 中划线(不推荐)

盒子模型

什么是盒子模型？

对于初学者来说，不容易理解。生活中的盒子大家应该都熟悉。
既然和现实生活中的盒子一样，生活中的盒子内部是不是空的，好用来存放东西，而存东西的区域我们给它取了个名字“content（内容）”。而盒子的外壳就叫“border（边框）”。如果盒子的内部是一块硬盘，但硬盘比较怕碰撞，在盒子内部填充一些防震材料，这时候硬盘和盒子的边框就又个一个距离，叫padding（内边距）。
如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"，请看下面两图：

模型1.png

模型2.png

OK~！这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图：

模型3.png

如何设置margin?

/*【ID选择器】*/
#footer{
background: red;
margin: 20px 0px 0 20px;
}

注意设置magin的顺序是上右下左

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right

margin: 0 auto;表示上下边界为0，左右则根据宽度自适应相同值（即居中）