问答
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编码。