CSS常见样式

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

• 块级元素：默认情况下块级元素占据其父元素（容器）的整行空间，能容纳其他块元素或者行内元素，会新起一行

element	description
address	联系方式信息
article	文章内容
aside	伴随内容
audio	音频播放
blockquote	块引用
canvas	绘制图形
div	文档分区
dl dt dd	自定义列表
footer	区域尾或页尾
figure	图文信息组
figcaption	图文信息组标题
form	表单
h1~h6	标题1~6
header	区域头或页头
hgroup	标题组
hr	分割线
ol ul	有序、无序列表
p	段落
pre	预格式化文本
section	一个页面区段
table thead tbody tfoot	表格
video	视频

• 行内元素：只占据它对应标签的边框所包含的空间。只能容纳文本或者其他行内元素，不会新起一行

element	description
a	锚点
abbr	缩写
b	粗体
br	换行
em	强调（斜体）
i	斜体
img	图片
input	输入框
label	表格标签
select	下拉菜单
span	常用内联容器
strike	删除线
strong	强调（粗体）
sub sup	上、下标
textarea	多行问本输入框

• 特性区别

1. 块级元素总是会新起一行；行内元素只占据自身宽度的空间，一行中可以排列多个行内元素
2. 块级元素可以设置宽高；行内元素的宽高就是它文字或者图片的宽高
3. 块级元素可以设置内外边距；行内元素margin只有左右有效果,设置padding时左右会把距离推开，而上下会延伸到别的行内，不会增加上下两行之间的距离，甚至会延伸到父级块元素以外

4. 块级元素可以包含其他块级元素和行内元素；行内元素只能包含行内元元素或文本

   
   
   

   块级元素与行内元素的区别.png

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

• CSS继承：设置父元素样式时，子元素自动的获得了父元素的样式
• 可继承属性

字体相关属性：font, font -family, font-style, font-weight, font-size
文本相关属性：text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, direction, color
元素可见性：visbility
表格布局属性：caption-side, border-collapse, border-spacing, empty-cells, table-layout
列表布局属性：list-style-type, list-style-image, lsit-position, list-style
生成内容属性：quotes
光标属性：cursor

• 不可继承属性

display
文本属性：vertical-align, text-shadow, text-decoration, white-space,
盒子模型相关属性：width, height, margin, padding, border
背景相关属性：background， background-xxx
定位属性：float, clear, position, top, bootom, left, right, min-width, min-height, max-width, max-height, overflow, clip, z-index
生成内容属性：content, counter-reset, counter-increment
轮廓样式属性：outline-style, outline-width, outline-color, outline

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

在块级容器中

• 块级元素：在给其设置好宽度后，利用margin: 0 auto;居中
• 行内元素：直接在块级容器中设置text-align: center;

4. 用 CSS 实现一个三角形

三角形.png

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

• 1. 先设置文本不换行text-decoration: nowrap;
• 2. 再设置隐藏溢出内容overflow: hidden;
• 3. 最后设置如何表示隐藏的内容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;
}

• 设置body的字体样式为

1. 字体大小为12px
2. 行高为字体大小的1.5倍
3. 字体优先级为tahoma>arial>'Hiragino Sans GB'>'\5b8b\4f53'>sans-serif

• 加引号的作用是为了防止浏览器在解析带空格和Unicode码的字体名称时发生错误
• \5b8b\4f53是宋体的Unicode码编码

8. 代码

• code1
• code2
• code3
• code4
• code5