块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
块级元素
块级元素占据其父元素（容器）的整个空间，通常浏览器会在块级元素前后另起一个新行。
用法
块级元素只能出现在<body>元素内。
块级元素与行内元素
块级元素与行内元素有几个关键区别：
- 格式
默认情况下，块级元素会占据一行的空间，而行内元素只占据自身宽度空间； - 内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。而行内元素只能包含文本和行内元素。 - 样式控制
块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。 - 转换
行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block
HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别，而”行内“类别相当于 HTML5 中的措辞内容类别，不过除了这两个还有其他类别。
块级元素列表
| 元素 | 解释 |
|---|---|
| <address> | 联系方式信息 |
| <article> | 文章内容 |
| <aside> | 伴随内容 |
| <audio> | 音频播放 |
| <video> | 视频播放 |
| <blockquote> | 块引用 |
| <canvas> | 绘制图形 |
| <dd> | 定义列表中条目描述 |
| <div> | 文档分区 |
| <dl> | 定义列表 |
| <fieldset> | 表单元素分组 |
| <figcaption> | 图文信息组标题 |
| <figure > | 图文信息组 |
| <header > | 区段头或者页头 |
| <footer> | 区段尾或者页尾 |
| <form > | 表单 |
| <h1～h6> | 标题级别 |
| <hr > | 水平分割线 |
| <noscript> | 不支持脚本或禁用脚本时显示的内容 |
| <ol> | 有序列表 |
| <ul> | 无序列表 |
| <output> | 表单输出 |
| <p> | 行 |
| <pre > | 预格式化文本 |
| <section> | 一个页面片段 |
| <table> | 表格 |
| <tfoot> | 表脚注 |
参考信息：信息来源
行内元素
一个行内元素只占据它对应标签的边框所包含的空间。
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
行内元素列表
| 元素 | 解释 |
|---|---|
| <b> | 粗体字 |
| <big> | 大号文本 |
| <i> | 斜体字 |
| <small> | 小号文本 |
| <tt> | 打字机文本 |
| <abbr> | 缩写 |
| <acronym> | 只取首字母的缩写 |
| <cite> | 引用(citation) |
| <code> | 计算机代码文本 |
| <dfn> | 一个定义项目 |
| <em> | 强调文本 |
| <kbd> | 键盘文本 |
| <strong> | 强调文本 |
| <samp> | 计算机代码样本 |
| <var> | 文本的变量部分 |
| <a> | 锚 |
| <bdo> | 文字方向 |
| <br> | 简单的折行 |
| <img> | 图像 |
| <map> | 图像映射 |
| <object> | 内嵌对象 |
| <q> | 短的引用 |
| <script> | 客户端脚本 |
| <span> | 文档中的节 |
| <sub> | 下标文本 |
| <sup> | 上标文本 |
| <button> | 按钮 (push button) |
| <input> | 输入控件 |
| <label> | input 元素的标注 |
| <select> | 选择列表（下拉列表） |
| <textarea> | 多行的文本输入控件 |
什么是 CSS 继承? 哪些属性能继承，哪些不能？
每一个元素都是文档树的一部分，除了最顶级的HTML元素，每个元素都有其对应的父级元素，每一个父级元素的CSS属性值都可以被应用到它的子元素中去。
不可以继承的属性
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。
可以继承的属性
azimuth、border-collapse、border-spacing、caption-side、color、cursor、direction、elevation、empty-cells、font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、list-style-image、list-style-position、list-style-type、list-style、orphans、pitch-range、pitch、quotes、richness、speak-header、speak-numeral、speak-punctuation、speak、speech-rate、stress、text-align、text-indent、text-transform、visibility、voice-family、volume、white-space、widows、word-spacing
所有元素可继承：
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
如何让块级元素水平居中？如何让行内元素水平居中?
块级元素居中
定宽
.center {
margin: 0 auto;
}
不定宽
参考信息：信息来源
行内元素居中
给其父元素设置 text-align:center
单行文本溢出加 ...如何实现?
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
px, em, rem 有什么区别
px： 固定单位
em: 相对单位，相对于父元素字体大小
rem: 相对单位，相对于根元素(html)字体大小
vw vh: 相对单位，1vw 为屏幕宽度的1% 兼容性
解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
对应以下css样式：
body{
font-size: 12px;
line-height: 1.5;
font-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
<!-- 在字体名中，如果包含空格，则需要为字体名添加引号 -->
}
unescape("%u5B8B%u4F53");
//"宋体"
网友评论