CSS常见样式

问答

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

块级元素：
div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
行内元素：
em strong span a br img button input label select textarea code script

块级（block-level）行内（inline-level，内联）特性区别

块级元素可以包含块级元素和行内元素，行内元素只能包含文本和行内元素；
块级元素占据一整行空间，行内元素只占据自身宽度空间；
宽高只对块级元素生效，对行内元素无效；
对于行内元素，padding只有左右生效，上下不生效，对块级元素，padding上下左右均可生效

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

2.1 什么是 CSS 继承?

通过CCS对父级元素设置样式，子级元素的样式如果相关规定，其会与父级元素样式保持一致

2.2 能继承的元素

1、字体系列属性

font-family：规定元素的字体系列
font-weight：设置字体的粗细，默认：regular，粗体：bold
font-size：设置字体大小，

2、文本系列属性

text-align：文本水平对齐
text-indent：第一行文本缩进
text-decoration： none (可用于取消a链接下划线效果)、underline（下划线）、line-through （删除线）、overline（上划线）
line-height：行高
word-spacing：字间隔、单词间距
letter-spacing：字符间距、单词的字母间距
text-transform：改变文字大小写none、uppercase（大写）、lowercase（小写）、capitalize（首字母大写）
color：文本颜色

3、元素可见性：

visibility

4、表格布局属性：

caption-side
border-collapse
border-spacing
empty-cells
able-layout

5、列表布局属性：

list-style-type
list-style-image
list-style-position
list-style

2.3 不能继承的元素

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。

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

块级元素水平居中通过 margin: 0 auto; 实现；
行内元素水平居中通过 text-align: center 实现。

4.用 CSS 实现一个三角形

请见任务4

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

通过一下代码实现，具体可见任务5

E{
white-space:nowrap;
overflow:hidden;
text-overflow;
}

6. px, em, rem 有什么区别

px: 像素，固定单位
em: 相对单位，相对于父元素字体大小
rem: 相对单位，相对于根元素(html的body)字体大小

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

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

作用：为body选设定字体大小、行高以及解析所采用的字体库；

12px
字体大小12px；
/1.5
行高为字体高度的1.5倍；
tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
从左向右选取解析字体，直至选择到字体为止，如果以上四个字体都没有，则选用浏览器默认字体；
字体为什么要加引号?
因为采用中文或者英文字体有空格时，不加引号可能导致用户浏览器不能识别字体，产生乱码；
'\5b8b\4f53'
\5b8b\4f53是Unicode码，宋体，使用unicode是因为网页或css编码是utf-8，直接写成中文，浏览器有可能不能识别，所以要写成ounicode编码。

代码

任务1
任务2
任务3
任务4
任务5