1、块级元素和行内元素分别有哪些？它们的特性区别有哪些？
1、块级元素(block element)，占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。
常见的块级元素有：
- address - 地址
- blockquote - 块引用
- center - 举中对齐块
- dir - 目录列表
- div - 常用块级容易，也是css layout的主要标签
- dl - 定义列表
- fieldset - form控制组
- form - 交互表单
- h1 - 大标题
- h2 - 副标题
- h3 - 3级标题
- h4 - 4级标题
- h5 - 5级标题
- h6 - 6级标题
- hr - 水平分隔线
- isindex - input prompt
- menu - 菜单列表
- noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容）
- noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
- ol - 排序列表
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 非排序列表
2、行内元素(inline element)又称内联元素，只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。
常见的行内元素有：
- a - 锚点
- abbr - 缩写
- acronym - 首字
- b - 粗体（不推荐）
- bdo - bidi override
- big - 大字体
- br - 换行
- cite - 引用
- code - 计算机代码（在引用源码的时候需要）
- dfn - 定义字段
- em - 强调
- font - 字体设定（不推荐）
- i - 斜体
- img - 图片
- input - 输入框
- kbd - 定义键盘文本
- label - 表格标签
- q - 短引用
- s - 中划线（不推荐）
- samp - 定义范例计算机代码
- select - 项目选择
- small - 小字体文本
- span - 常用内联容器，定义文本内区块
- strike - 中划线
- strong - 粗体强调
- sub - 下标
- sup - 上标
- textarea - 多行文本输入框
- tt - 电传文本
- u - 下划线
- var - 定义变量
块级元素与行内元素的区别：
- 块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度。行内元素不会独占一行,相邻的行内元素会排列在同一行里，直到一行排不下，才会换行,其宽度随元素的内容而变化。
- 块级元素可以设置width,height属性，块级元素即使设置了宽度,仍然是独占一行。行内元素设置width，height属性无效，它的长度高度主要根据内容决定。
- 块级元素可以设置margin和padding属性。行内元素的margin和padding属性。水平方向的padding-left，padding-right，margin-left，margin- right都产生边距效果，但竖直方向的padding-top，padding-bottom，margin-top，margin-bottom却不会产生边距效果。
- 块级元素对应于display: block。行内元素对应于display: inline。
补充：如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
2、什么是 CSS 继承? 哪些属性能继承，哪些不能？
1、css继承：设置父级元素的样式，其子级元素的样式会和父级元素一样；
2、不可继承的属性：
display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
可继承的属性：
- 对于行内元素，可继承的属性有：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
- 对于块状元素，可继承的属性有：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。 - 对于列表元素，可继承的属性有：list-style、list-style-type、list-style-position、list-style-image。
- 对于表格元素，可继承的属性有：border-collapse。
- 所有元素都可继承得属性有：visibility和cursor。
3、如何让块级元素水平居中？如何让行内元素水平居中?
- 让块级元素居中设置需要margin属性：
margin：0 auto；//上下margin值随意设置，左右margin值设置为auto - 让行内元素水平居中需要设置text-align属性，text-align属性是作用在块级元素上让里面的文本居中：
<div class='box'> 我要居中我要居中我要居中 </div> //若想要上面的文本居中，对应的CSS样式因如下所示编写 div{ text-align: center }
4、文本溢出解决方法。
解决文本溢出问题，我们需要设置两个属性：
- white-space: nowrap ，强制文本在一行内显示
- overflow: hidden ，将溢出内容改为隐藏
{ white-space: nowrap; overflow: hidden; }
补充：若想将溢出内容显示为省略标记......最后我们还需要设置text-overflow属性：
- text-overflow: ellipsis ，将文本溢出内容显示为省略标记
- text-overflow: clip ， 把文本溢出的部分裁切掉
{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis或clip }
5、px em rem有什么区别？
1、px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。在Web页面制作中，我们一般使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的 Web页面时，他改变了浏览器的字体大小（虽然一般人不会去改变浏览器字体大小），这时会使用我们的Web页面布局被打破，这时就提出了使用“em”来定 义Web页面的字体。
PX特点：
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
2、em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。一般都是以body的font-size为基准。在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值。
计算公式：1 ÷ 父元素的font-size × 需要转换的像素值 = em值
EM特点：
- em的值并不是固定的；
- em会继承父级元素的字体大小
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
- body选择器中声明Font-size=62.5%；
- 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
3、rem是CSS3新增的一个相对单位，是指根元素（root element，html）的字体大小。这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）
为了方便计算，我们改变一下 html 的默认 font-size=10px
html{ font-size:62.5%; /* 10÷16=62.5% */ } body{ font-size:12px; font-size:1.2rem ; /* 12÷10=1.2 */ } p{ font-size:14px; font-size:1.4rem; }
需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%，还是设置为 font-size:62.5%，如果你引入 了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用 font-size:62.5% 也无可厚非，完全可以在 body 中重置回你需要的默认 font-size。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
补充：
px 与 rem 的选择：
- 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
- 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
