css基础 行内元素 块级元素

1、行内元素（内联元素 inlineElement）

特点：不占据一行，无法设置宽高及行高，其宽度随着内容增加，高度随字体大小而改变，margin只对左右起作用，上下无效。

常见有：

a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，label - 表格标签，

select - 项目选择，small - 小字体文本，span - 常用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调

2、块级元素

特点：从新行开始占据一行，可设置宽高、行高、内外边距，其宽度默认浏览器的宽度，高度随字体大小而改变，margin只对左右起作用，上下无效。

常见有：

div -最常用的块级元素，dl - 和dt dd搭配使用的块级元素，form - 交互表单，h1 - 大标题，hr - 水平分隔线，ol - 排序表单，p - 段落，ul - 非排序

3、空元素

特点：标签具有空内容

常见：br、hr、img、meta、input、link

不常见：<base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

tips：1、display可以在一定情况下互相转换行内元素和块级元素

　　  2、text-align:center可以使块级元素中的内联元素居中，但是将内联元素设置为块级元素后无法使用margin:0 auto居中，这种情况下可以使用padding属性扩充内联元素的宽高，而不改变其内联属性，即可居中。

　　  3、目前用到的居中方式，水平居中text-align:center可以使图片或者文字在块级元素水平居中，line-height可以设置为与块级元素同高，实现块内元素垂直居中；块级元素间的居中使用margin:0 auto。

　　  4、隐藏的几种方式：1）overflow:hidden 隐藏盒子超出部分；2）visibility:hidden 隐藏 占文本流位置；display:none 隐藏 不占文本流位置。

　　  5、权限问题：1）优先级就近原则，同种权重下样式定义最近者优先；2）！important>id>class>tag；3）top>bottom，left>right。