CSS基础(一)
1. 什么是CSS继承？哪些属性能继承，哪些不能？
CSS继承
CSS 的继承是指被包在内部的标签将拥有外部标签的样式性质。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body 定义了颜色值也会应用到段落的文本中。
能被继承的属性
所有元素可继承：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。
2. 块级元素和行内元素分别有哪些？
块级元素
<address> |
定义地址 |
|---|---|
<caption> |
定义表格标题 |
<dd> |
定义列表中定义条目 |
<div> |
定义文档中的分区或节 |
<dl> |
定义列表 |
<dt> |
定义列表中的项目 |
<fieldset> |
定义一个框架集 |
<form> |
创建 HTML 表单 |
<h1> |
定义最大的标题 |
<h2> |
定义副标题 |
<h3> |
定义标题 |
<h4> |
定义标题 |
<h5> |
定义标题 |
<h6> |
定义最小的标题 |
<hr> |
创建一条水平线 |
<legend> |
元素为 fieldset 元素定义标题 |
<li> |
标签定义列表项目 |
<noframes> |
为那些不支持框架的浏览器显示文本，于 frameset 元素内部 |
<noscript> |
定义在脚本未被执行时的替代内容 |
<ol> |
定义有序列表 |
<ul> |
定义无序列表 |
<p> |
标签定义段落 |
<pre> |
定义预格式化的文本 |
<table> |
标签定义 HTML 表格 |
<tbody> |
标签表格主体（正文） |
<td> |
表格中的标准单元格 |
<tfoot> |
定义表格的页脚（脚注或表注） |
<th> |
定义表头单元格 |
<thead> |
标签定义表格的表头 |
<tr> |
定义表格中的行 |
行内元素
<a> |
标签可定义锚 |
|---|---|
<abbr> |
表示一个缩写形式 |
<acronym> |
定义只取首字母缩写 |
<b> |
字体加粗 |
<bdo> |
可覆盖默认的文本方向 |
<big> |
大号字体加粗 |
<br> |
换行 |
<cite> |
引用进行定义 |
<code> |
定义计算机代码文本 |
<dfn> |
定义一个定义项目 |
<em> |
定义为强调的内容 |
<i> |
斜体文本效果 |
<img> |
向网页中嵌入一幅图像 |
<input> |
输入框 |
<kbd> |
定义键盘文本 |
<label> |
标签为 input 元素定义标注（标记） |
<q> |
定义短的引用 |
<samp> |
定义样本文本 |
<select> |
创建单选或多选菜单 |
<small> |
呈现小号字体效果 |
<span> |
组合文档中的行内元素 |
<strong> |
语气更强的强调的内容 |
<sub> |
定义下标文本 |
<sup> |
定义上标文本 |
<textarea> |
多行的文本输入控件 |
<tt> |
打字机或者等宽的文本效果 |
<var> |
定义变量 |
<button> |
按钮 |
<del> |
定义文档中已被删除的文本 |
<iframe> |
创建包含另外一个文档的内联框架（即行内框架） |
<ins> |
标签定义已经被插入文档中的文本 |
<map> |
客户端图像映射 |
<object> |
object对象 |
<script> |
客户端脚本 |
区别
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
块级：块级元素可以设置内外边距
行内：行内元素可以设置水平方向的内外边距，不可以设置竖直方向的内外边距
块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素
3. 如何让块级元素水平居中？如何让行内元素水平居中?
块级元素居中：margin: 0，auto;
行内元素居中：text-align: center;
4. 单行文本溢出加…如何实现？
overflow: hidden; //超过边框的文字隐藏
text-overflow: ellipsis; //多余的文字变成…
white-space: nowrap; //不折行
5. px, em, rem,vw 有什么区别？
px
就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。
em
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem
是css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
vw
是css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
6. 按钮效果图
实现以下图片的效果图
在线demo：按钮效果图
7. 表格效果
实现以下图片表格的效果
在线demo：表格效果
8. 三角形效果图
实现以下图片的三角形效果
在线demo: 三角形效果图