CSS常见样式

[Leon68]

块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

参考

块级元素：div、p、h1~h6、ul、li、ol、form、table、tr、td、th、dl、dt、dd。

块级元素	含义
<div>	文档分区。
<dl>	定义列表。
<dt>	定义列表中定义条目。
<dd>	定义列表中定义条目描述。
<form>	表单。
<fieldset>	表单元素分组。
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	标题级别 1-6.
<header>	HTML5区段头或页头。
<hr>	水平分割线。
<ul>	无序列表。
<ol>	有序列表。
<p>	行。
<table>	表格。
<output>	HTML5表单输出。
<pre>	预格式化文本。
<section>	HTML5一个页面区段。
<tfoot>	表脚注。
<video>	HTML5视频。
<noscript>	不支持脚本或禁用脚本时显示的内容。
<address>	联系方式信息。
<article>	HTML5文章内容。
<aside>	HTML5伴随内容。
<audio>	HTML5音频播放。
<blockquote>	块引用。
<canvas>	HTML5绘制图形。
<hgroup>	HTML5标题组。
<figcaption>	HTML5图文信息组标题
<figure>	HTML5图文信息组 (参照 )。
<footer>	HTML5区段尾或页尾。

行内元素：

• b, big, i, small, tt
• abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
• a, bdo, br, img, map, object, q, script, span, sub, sup
• button, input, label, select, textarea

块级元素与行内元素区别：

一般情况下，行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。

注意：有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p、dt。

默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
块级元素可以设置height和width、padding、margin，独占一行
行内元素设置height、width不生效。设置padding、margin，只左右生效上下不生效。

什么是 CSS 继承? 哪些属性能继承，哪些不能？

可继承就是父节点设置了这个属性后，子节点就可以继承他的属性.
所有元素可继承：visibility和cursor。
内联元素可继承：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。
表格元素可继承：border-collapse。
不可继承的：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。
参考w3c

如何让块级元素水平居中？如何让行内元素水平居中?

块级元素居中：设置宽度后，margin：0 auto；
行内元素居中：对行内元素的父元素设置text-align：center；(text-align 用于块级元素，作用在使用它的块元素中的文字或者图片上。)
参考

单行文本溢出加 ...如何实现?

white-space: nowrap;
overflow:  hidden;
text-overflow: ellipsis;

px, em, rem 有什么区别

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
参考

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

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

• 设置字体大小12px 字体行高1.5 字体，字体系列按顺序依次取值。
• 当字体名字为中文时，需要加引号 ；当有多个英文单词，空格隔开的字体名字，需要加引号；unicode编码‘\5b8b\4f53’ 表示宋体，需要加引号；使用unicode编码是因为网页或css编码是utf-8如果直接写成中文，浏览器有可能不能识别，所以写成中文的unicode编码就不会造成这种问题。