CSS常见样式

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

1. 块级元素

div，p，ul，li，ol，body，form，article，nav，header，footer，aside，main，table，thead，tbody，tfoot，tr，h1~h6

2. 行内元素

img，span，a，input，label，em，strong，select，i，textarea，button

3. 区别

• 块状元素独占一行，即使还有空余位置也独占一行；行内元素是可以横向排开的，当没有位置的时候才会折行。
• 块状元素可以设置宽高，行内元素的大小是由其内容撑开的，设置宽高对行内元素没有效果。
• 设置margin和padding时，块状元素全部生效，行内元素只有左右生效，上下没有效果；但是border都是生效的。
• 块状元素可以包含块状元素和行内元素；行内元素只能包裹行内元素和文本。

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

CSS继承即父元素设置了某属性，那么其子元素是可以遵循这些规定的。

• 可以继承的属性：font-size，font-family，font-weight，color，box-sizing，opacity，text-align，text-indent，line-height，letter-space，visibility，cursor，border-collapse
  -不能继承的属性：display，box-shadow，border-radius，white-space，background，width，height，margin的一切，padding的一切，border的一切，float，position，top，left，right，right，vertical-align，min-width，outline，table-layout，clear

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

• 块状元素：{margin：0 auto}
• 行内元素：{text-align:center}

4、做一个三角形~

预览地址 http://js.jirengu.com/tazenihedi/2/edit

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

有三个固定的搭配来实现溢出隐藏：

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

6、px, em, rem 有什么区别？

px是固定单位：像素；
em是相对单位：相对于父元素的字体大小来定义，例如：父元素{font-size:14px;}，那么子元素的1em=14px;2em=28px;PC端和移动端都有使用。
rem是相对单位：相对于文档的根节点大小来定义，例如html{font-size:20px;}；那么子元素的.8rem=16px; 2rem=40px;移动端非常常见。

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

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

解释：给body定义的关于字体的样式：
字体大小为12px；line-height设置为字体的1.5倍即18px；后面的全部是针对字体的设置，每种字体用逗号隔开。如果用户的电脑中如果没有第一种字体，那么就取第二种字体，如果前两种都没有，那么就取第三种字体，以此类推。第三种用引号包起来是因为中间有空格，如果不这么做，浏览器会认为这是两个字体格式；第四种用字符代替是因为防止用户电脑中识别乱码，可能是因为css编码和浏览器编码不同导致。这个是使用unicode来进行识别的，是全球通用的。可以保证浏览器一定会识别这个字体。