1、块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
block-level: div h1~h6 p hr form ul dl ol pre table li dd dt tr td th
inline-level: em strong span a br img button input label select textarea code script
- 特性区别
- 块级可以包含块级和行内，行内只能包含文本和行内
- 块级占据一整行空间，行内占据自身宽度空间
- 对行内元素没有办法设置宽高
- 对行内元素设置padding只对左右生效，而对上下不生效，在页面上是看不到的。但是在盒模型中可以看到，当然如果你给其添加一个border也是可以看到的。
- 同样对内元素设置margin也是仅对左右产生效果。盒模型中可以看到margin的.
2、什么是 CSS 继承? 哪些属性能继承，哪些不能？
CSS继承：当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值computed value，只有文档根元素取该属性的概述中给定的初始值。
能继承的属性如： color, font-size,letter-spacing、word-spacing，line-height、font、font-family、font-style、font-variant，font-weight text-decoration、text-transform、list-style，list-style-type
不可继承的属性如: display、margin、border、padding、background
height min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、float、clear
3、如何让块级元素水平居中？如何让行内元素水平居中?
- 让块级元素居中: 首先要给这个块级元素设置一个宽度,然后用margin: 0 auto;
- 行内元素居中：在块状元素内部用text-align: center;
4、用 CSS 实现一个三角形
首先准备一个div，让其宽高设为0。然后为其四边添加border粗边框，这样好看到效果。然后将其中三边设置成透明。
5、单行文本溢出加 ...如何实现?
white-space: nowrap; /* 让文本不换行 */
overflow: hidden; /* 让溢出部分隐藏 */
text-overflow: ellipsis; /* 要溢出的部分加省略号*/
6、px, em, rem 有什么区别
- px: 固定单位
- em: 相对单位，相对于父元素的大小
- rem: 相对单位，相对于根元素(html)字体大小
7、解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
设置字体样式， 字体大小为12px， 行高为1.5
字体为font-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; 排在最前面的优先级最高。
加引号是因为中间有空格，可能误导成两个字体
'\5b8b\4f53' 代表的是宋体
代码
1、实现如下效果：
效果
源代码
2、实现如下按钮效果：
button
源代码
3、实现如下表格：
table
源代码
4、实现如下三角形:
三角形
源代码
5、实现如下Card:
Card
源代码
网友评论