web前端-css小记(3)
2017-06-13 本文已影响0人
抚年华轻过
1. 块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
| 块元素 | 行内元素 |
|---|---|
| div | span |
| p | i em strong b |
| h1-h6 | img |
| form | a |
| ul ol dl li dd dt | button input label |
| table tr td th | select textarea |
特征区别：
| 块级元素 | 行内元素 |
|---|---|
| 可以包含块级元素和行内元素 | 只能包含行内元素 |
| 占据一整行 | 只占本身宽度 |
| 能自定义宽高 | 不能定义宽高 |
| 有内外边距 | 只有左右边距 |
2. 什么是 CSS 继承? 哪些属性能继承，哪些不能？
- 继承，它是依赖于祖先-后代的关系的，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。就是没有特别设置时，儿子会继承父级的一些属性样式。
| 继承属性 | 无继承属性 |
|---|---|
| visibility | 盒子模型属性：width,height,margin,padding,border |
| 文本属性：text-indent,text-align,line-height,word-spacing,letter-spacing,color | 定位属性：float,position,clear,top,right,left,bottom,overflow,z-index |
| 文本属性：font-size,font-weight,font-style,font-family | 文本属性：vertical-align,text-decoration,text-shadow,white-space |
| cursor | display,background |
3. 如何让块级元素水平居中？如何让行内元素水平居中?
- 块级元素：margin: 0 auto;
- 行内元素：text-align:center;
5. 单行文本溢出加 ...如何实现?
- overflow:hidden;超出部分隐藏
- text-overflow:ellipsis;显示省略符号来代表被修剪的文本。
- white-space:nowrap;不折行
6. px, em, rem 有什么区别
- px：像素，相对于显示器屏幕分辨率而言
- em：相对长度单位，相对于当前对象文本字体尺寸而言，若未设置，则相对于浏览器默认文本尺寸，默认尺寸为16px
- rem：rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素(html)
7. 解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
body元素里的子元素设置字体大小为12px，行高为字体大小的1.5倍，后面都是字体，依次查询浏览器和本地的字体库里有没有相关字体，没有的话就查询下一个字体。加引号表示引号里面的是一个字体，是一个整体，'\5b8b\4f53是Unicode码，代表字体转换为Unicode码
8.代码
（mission8）
