CSS常见样式

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

块级元素(block-level)

div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th

行内元素(inline-level)

em strong span a br img 
button iput label select textarea
code script 

块级元素和行内元素的区别

1. 块级元素可以包含块级元素和行内元素，行内元素只能包含文本和行内元素

   
   
   

   image.png

2. 块级占据一整行空间，行内占据自身宽度空间

   
   
   

   image.png
   
   
   

   image.png

3. 宽高设置、内外边距的差异

   
   
   

   image.png
   
   
   

   image.png

4. 对行内元素，Padding只是左右有效

   
   
   

   image.png

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

一、无继承性的属性

1. display：规定元素应该生成的框的类型
2. 文本属性
   vertical-align：垂直文本对齐
   text-decoration：规定添加到文本的装饰
   text-shadow：文本阴影效果
   white-space：空白符的处理
   unicode-bidi：设置文本的方向
3. 盒子模型的属性
   width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4. 背景属性
   background、background-color、background-image、background-repeat、background-position、background-attachment
5. 定位属性
   float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6. 生成内容属性
   content、counter-reset、counter-increment
7. 轮廓样式属性
   outline-style、outline-width、outline-color、outline
8. 页面样式属性
   size、page-break-before、page-break-after
9. 声音样式属性
   pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1. 字体系列属性
   font：组合字体
   font-family：规定元素的字体系列
   font-weight：设置字体的粗细
   font-size：设置字体的尺寸
   font-style：定义字体的风格
   font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
   font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
   font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2. 文本系列属性
   text-indent：文本缩进
   text-align：文本水平对齐
   line-height：行高
   word-spacing：增加或减少单词间的空白（即字间隔）
   letter-spacing：增加或减少字符间的空白（字符间距）
   text-transform：控制文本大小写
   direction：规定文本的书写方向
   color：文本颜色
3. 元素可见性：visibility
4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5. 列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6. 生成内容属性：quotes
7. 光标属性：cursor
8. 页面样式属性：page、page-break-inside、windows、orphans
9. 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1. 元素可见性：visibility
2. 光标属性：cursor

四、内联元素可以继承的属性

1. 字体系列属性
2. 除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1. text-indent、text-align

Refer to: CSS中可以和不可以继承的属性

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

块级元素水平居中

margin: 0px auto;

image.png

行内元素水平居中

padding: 300px;
text-align: center;

image.png

4. 用 CSS 实现一个三角形

实现代码：

.test{
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid green;
}

image.png

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

实现代码：

    .text{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

image.png

6. px, em, rem 有什么区别

px像素（Pixel），是相对长度单位，相对于显示器屏幕分辨率而言的

em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）

rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小

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

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

'Hiragino Sans GB'、'\5b8b\4f53'加引号，是出于兼容性的考虑，中文要加，英文可以不加，里面是多个单词组合也需要加，避免浏览器解析时候把它解析成多个词汇造成乱码。

设置body标签的属性为：
12px大小，1.5倍行高，首选字体tahoma，备选：arial、'Hiragino Sans GB'、'\5b8b\4f53'、sans-serif

字体里\5b8b\4f53，是用Unicode码表示的宋体，如图：

image.png