1、块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
- 块级元素举例：
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
table – 表格
ul – 无序列表
……
- 行内元素举例：
a – 锚点
big – 大字体
br – 换行
em – 强调
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
u – 下划线
……
- 二者的区别：
一般行内元素只能包含数据和其他行内元素，块级元素可以包含行内元素和自身／其他块级元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<ul>
<li><a href="">hello</a></li>
<li><a href="">hello</a></li>
</ul>
<span>
<strong>
hello
</strong>
world
</span>
</div>
</body>
</html>
默认情况下块级元素占用一整行，而行内元素占据自身宽度空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
background:red;
}
span {
background:blue;
}
</style>
</head>
<body>
<div>
hello
</div>
<span>
hello
</span>
</body>
</html>
宽高只对块级元素设置生效，对行内元素无效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
background:red;
width: 100px;
height: 50px;
}
span {
background:blue;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div>
hello
</div>
<span>
hello
</span>
</body>
</html>
块级元素可设置padding和margin，行内元素只能设置padding及左右margin，且设置padding时左右padding推开距离，上下padding会延伸出去，但不会增加上下两行间的距离。
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
background:red;
width: 100px;
height: 50px;
margin: 10px;
padding: 20px;
}
span {
background:blue;
width: 100px;
height: 50px;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div>
hello
</div>
<div>
hello
</div>
<span>
hello
</span>
<span>
hello
</span>
<div>
hello
</div>
</body>
</html>
2、什么是 CSS 继承? 哪些属性能继承，哪些不能？
- 每个 CSS 属性定义 的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
- 当元素的一个 继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值 computed value 。只有文档根元素取该属性的概述中给定的初始值 initial value（这里的意思应该是在该属性本身的定义中的默认值）。
- 当元素的一个 非继承属性 ( reset property ) 没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。
- inherit 关键字 用于显式地指定继承性，可用于继承性/非继承性属性。
能继承的属性
字体相关属性：font,font-family,font-weight,font-size,font-style,font-stretch,font-size-adjust
文本相关属性：text-indent(文本缩进),text-align,line-height,word-spacing,letter-spacing,text-transform,direction,color
元素可见性:visibility
表格布局属性：caption-side,border-collapse,border-spacing,empty-cells,table-layout
列表布局属性：list-style-type,list-style-image,list-style-position,list-style
生成内容属性：quotes
光标属性:cursor
页面样式属性：page,page-break-inside,window,orphans
声音样式属性：speak,speak-punctuation….
不能继承的属性
display
文本属性：vertical-align,text-shadow,text-decoration,white-space,unicode-bidi
盒子模型相关属性：width,height,margin相关属性,border相关属性,padding相关属性
背景相关属性：background,background-XXX
定位属性：float,clear,position,top,right,bottom,left,min-width,min-height,max-width,max-height,overflow,clip,z-index
生成内容属性：content,counter-reset,counter-increment
轮廓样式属性：outline-style,outline=width,outline-color,outline
页面样式属性：size,page-break-before,page-break-after
声音样式属性：pause-before,pause-after,pause,cue-before,cue-after,cue,play-during
3、如何让块级元素水平居中？如何让行内元素水平居中?
- 常用方法：
块级元素居中：对块级元素设置 margin:x auto; (上下margin随意）
行内元素居中：对行内元素的父元素设置 text-align:center; - 方法总结：CSS水平居中与垂直居中的总结
4、用 CSS 实现一个三角形
- 思路：块级元素的边框不仅可以分别设置大小、圆角，还可以分别设置颜色而出现四个三角形，隐藏部分三角形就可以得到单独的三角形。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
span {
display:inline-block;
border-top: 60px solid red;
border-bottom: 60px solid red;
border-left: 80px solid blue;
border-right: 80px solid blue;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
5、单行文本溢出加 ...如何实现?
单行文本溢出的条件
- 内容足够溢出：设置容器宽度或内容足够多；
- 不换行：内容全部在一行；
- 溢出后隐藏；
- 设置隐藏的样式为“…”；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
border: 1px solid #000;
width:300px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<span>
单行文本溢出，单行文本溢出，单行文本溢出
</span>
</div>
</body>
</html>
6、px, em, rem 有什么区别
7、解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
- 代码作用
该段代码设置了body的font样式，字体大小为12px，行高是字体1.5倍的像素值，后面则是第一到第五字体，用逗号隔开，如果用户浏览第一字体没有，则查询第二字体有没有，以此类推，如果都没有则采用系统默认字体； - 字体为什么要加引号?
因为采用中文或者英文字体有空格时，不加引号可能导致用户浏览器不能识别字体，产生乱码； - 字体里的数字符号代表什么?
代表字体的Unicod码，获得该码的方式可以在网上查找，或者在开发者工具。
