常见块级元素和行内元素以及它们的区别

主要内容： 常见的块级元素和行内元素以及它们的区别。

常见的块级元素和行内元素

• 块级元素 （block-level） ： div h1~h6 p hr form ul dl ol pre table li dd dt tr td th
• 行内元素 （inline-level）：em strong span a br img button input label select textarea code script

块级元素和行内元素的区别

• 块级元素占据的是一整行 ， 而行内元素占据的空间是它自身，多个行内元素可以并排排列；
• 块级元素可以直接设置宽度、高度 ， 而行内元素不能设置宽高（行内元素的高度由line-height决定，宽度由具体的内容来决定）
• 块级元素可以包含块级和行内， 行内只能包含文本和行内
• 块级元素可以设置margin和padding， 而行内元素上下的margin、padding不生效， 只有左右生效（ 此时上下padding虽不会占用空间， 但是会占用背景色）
• 块级元素使用margin: 0 auto;居中，行内元素，设置text-align: center; 达到居中目的（注意：text-align:center;仅作用在块级元素上，所以text-align:center;这个属性应该设置在行内元素的block级父元素上）
• 行内元素可以“感受”到浮动元素的存在

关于text-align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

text-align:center的意思是块级元素中的行内内容居中。
作用在block-level元素上(包括了block和inline-block);
能让block-level的元素中的行内元素，替换元素和inline-block元素居中。

解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }

• 设置body字体大小为12像素， 行高为1.5倍字体大小， 然后字体按顺序依次选择（没有才选择下一个字体）， 如果都没有的话， 按浏览器默认样式设置
• 加引号是因为中间有空格，不加引号会被识别成多个元素
• \5b8b\4f53 是Unicode码， 宋体，使用Unicode是因为网页或css编码是utf-8，直接写成中文，浏览器有可能不能识别，所以要写成Unicode编码。