一、块级元素和行内元素分别有哪些？测试4条以上的特性区别。
1、块级元素能包含块级元素和行内元素，而行内元素只能包含行内元素和文本。
2、块级元素是占据一整行空间，而行内元素占据自身宽度空间。
3、块级元素可以设置宽高、内外边距，。行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
4、 行内元素与块级元素属性的不同，主要是盒模型属性上。
| 块级元素 | 行内元素 | ||
|---|---|---|---|
| address | 定义地址 | a | 标签可定义锚 |
| caption | 定义表格标题 | abbr | 表示一个缩写形式 |
| dd | 定义列表中定义条目 | acronym | 定义只取首字母缩写 |
| div | 定义文档中的分区或节 | b | 字体加粗 |
| dl | 定义列表 | bdo | 可覆盖默认的文本方向 |
| dt | 定义列表中的项目 | big | 大号字体加粗 |
| fieldset | 定义一个框架集 | br | 换行 |
| form | 创建html表单 | cite | 引用进行定义 |
| h1 | 定义最大的标题 | code | 定义计算机代码文本 |
| h2 | 定义副标题 | dfn | 定义一个定义项目 |
| h3 | 定义标题 | em | 定义为强调的内容 |
| h4 | 定义标题 | i | 斜体文本效果 |
| h5 | 定义标题 | img | 向网页中嵌入一幅图像 |
| h6 | 定义最小标题 | input | 输入框 |
| hr | 创建一条水平线 | kbd | 定义键盘文本 |
| legend | 伪元素为fieldset元素定义标题 | label | 标签为 input 元素定义标注（标记） |
| li | 标签定义列表项目 | q | 定义短的引用 |
| noframes | 为那些不支持框架的浏览器显示文本，于frameset元素内部 | samp | 定义样本文本 |
| noscript | 定义在脚本未执行时的替代内容 | select | 创建单选或多选菜单 |
| ol | 定义有序列表 | small | 呈现小号字体效果 |
| ul | 定义无序列表 | span | 组合文档中的行内元素 |
| p | 标签定义段落 | strong | 语气更强的强调的内容 |
| pre | 定义预格式化文本 | sub | 定义下标文本 |
| table | 标签定义html表格 | sup | 定义上标文本 |
| tbody | 标签表格主体（正文） | textarea | 多行的文本输入控件 |
| td | 定义表格中的标准单元格 | tt | 打字机或者等宽的文本效果 |
| tfoot | 定义表格的页脚 | var | 定义变量 |
| th | 定义表头单元格 | ||
| thead | 定义表格的表头 | ||
| tr | 定义表格中的行 |
可变元素列表：可变元素为根据上下文语境决定该元素为块元素或者内联元素
| button | 按钮 |
|---|---|
| del | 定义文档中已被删除的文本 |
| iframe | 创建包含另外一个文档的内联框架（即行内框架） |
| ins | 标签定义已经被插入文档中的文本 |
| map | 客户端图像映射（即热区） |
| object | object对象 |
| scrip | 客户端脚本 |
二、什么是 CSS 继承? 哪些属性能继承，哪些不能？
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值。当元素的一个非继承属性没有指定值时，则取属性的初始值。
常见的继承属性：
border-collapse：为表格设置合并边框模型。1、collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。2、separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。3、inherit 规定应该从父元素继承 border-collapse 属性的值。
border-spacing： 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
caption-side：
color：
cursor：
direction：
font (其中包括 font-family , font-size , font-weight , font-style，font-height)
letter-spacing：字母间隔修改的是字符或字母之间的间隔
line-height：percentage，是原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值，与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。使用Percentage和em可能会带来意想不到的结果（特别是当父级元素下的子元素字体大小不同时）。
line-height:number，该属性的应用值是这个无单位数字number乘以该元素的字体大小。计算值与指定值相同。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。
对于替代行内容，如button或者input，若line-height=height，在可以达到垂直居中的作用。
list-style (其中包括 list-style-image , list-style-position , list-style-type)
text-align：文本对其方式 left、center、right、justify
text-indent：文案第一行缩进距离
text-decoration： none、underline、line-through、overline
text-transform：改变文字大小写none、uppercase、lowercase、capitalize
visibility：
white-space：white-space 属性设置如何处理元素内的空白。
word-spacing：可以改变字（单词）之间的标准间隔
非继承属性
z-index：
width (其中包括 min-width , max-width)：
dispaly：
float：
clear：
vertical-align：CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。bottom元素及其后代的底端与整行的底端对齐/top元素及其后代的顶端与整行的顶端对齐。baseline是initial。元素基线与父元素的基线对齐。
unicode-bidi：
position：
top：
bottom：
left：
right：
text-decoration：
background (其中包括 background-color , background-image：
background-position , background-attachment , background-repeat)：
border (其中包括 border-color , border-style , border-width , border-spacing and so on)：
padding (其中包括 padding-left , padding-right , padding-top , padding-bottom)：
margin (其中包括 margin-left , margin-right , margin-top , margin-bottom)：对于行内元素，设置上下margin是无效的。
outline (其中包括 outline-color , outline-style , outline-width)：
clip：
content：
box-sizing：content-box：表示使用w3c标准盒模型。 border-box表示使用“IE盒模型”
三、如何让块级元素水平居中？如何让行内元素水平居中?
对于行内元素,只需在父元素中设置text-align="center"即可；
对于块级元素，把元素的属性margin-left和margin-right设置成auto即可。
注意：浏览器自身有默认margin和padding，我们可以通过哦*{来更改默认}
用css实现一个三角形
用css指定一个三角形样式，我们只需要把块的宽高设置为0，编辑边框的每个边，通过改变边的属性，例如可以设置三个边透明或者两个边透明，其中相邻的两个边颜色相同，还可以通过改变边的大小，来实现不同样式的三角形。
.tri{ width: 0px; height: 0px; border: 30px transparent solid; border-right: 20px red solid; border-bottom: 40px red solid; border-left: 30px transparent solid; }
直角三角形
四、单行文本溢出加 ...，如何实现
要实现单行文本溢出，首先让它成为一个单行文本，即不换行nowrap，这样就不有溢出，但是溢出部分却不会隐藏，我们就让它隐藏hidden，隐藏了，用户可能不知道后面还有文字，我们可以用省略...（ellipsis）来表示后面还有文字。如下：
.box{ border: 2px blue solid; width: 100px; padding: 5px 20px; margin: 10px auto; 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; }
这段代码是用来指定body的字体样式，12px/1.5是文字大小为12px，行高是字高的1.5倍；其中tahoma、arial、Hirgino Sans GB、\5b8b\4f53 、sans-serif等是字体样式。
加引号是为了告诉浏览器Hirgino Sans GB是一个词，不能被认为是几个词。
字体里\5b8b\4f53代表字体为宋体样式，在使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。
七、demo
1、实现如下效果: 【参考】效果/
2、实现如下按钮效果: 【参考65】效果
3、实现如下表格:【参考68】效果
4、实现如下三角形效果
三角形
5、实现如下Card: 【参考】效果
阴影效果参考
网友评论