6. CSS常见样式1

元素分类

常用的块状元素：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素：

<img>、<input>

不同元素的特点和区别：

块级元素特点：

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素特点：

1. 和其他元素都在一行上；
2. 元素的高度、宽度及顶部和底部边距不可设置（height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和margin left、right改变宽度。）；
3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素特点：

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素(css2.1新增)。

1. 和其他元素都在一行上；
2. 元素的高度、宽度、行高以及顶和底边距都可设置。

CSS继承

• CSS继承就是子元素继承了父元素的CSS样式的属性。
• 可以继承属性：

字体属性：
font、font-family：规定元素的字体系列、font-weight、font-size、font-style：定义字体的风格

文本系列属性:
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

-  不可继承属性：

display

文本类：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向

盒子模型的属性：width、height、margin 、margin-XXX、border、border-XXX、。。。基本都不行

背景属性：background、background-color、background-image、
background-repeat、background-position、background-attachment都不行

定位属性：float、clear、position、top、right、bottom、left、
min-width、min-height、max-width、max-height、overflow、clip、z-index

声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

## 水平居中的方法：
-  块级元素水平居中，`margin: 0 auto`;
-  行内元素水平居中，`text-align: center`;.

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

white-space: nowrap; /先设置文本不换行/
overflow: hidden; /设置溢出隐藏/
text-overflow: ellipsis; /设置隐藏部分为.../

## px, em, rem的区别：
- px （Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
- em 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
- rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

## 代码解析：

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

- 代码作用：
 该段代码设置了body的font样式，字体大小为12px，行高是字体1.5倍的像素值，后面则是第一到第五字体，用逗号隔开，如果用户浏览第一字体没有，则查询第二字体有没有，以此类推，如果都没有则采用系统默认字体；
- 字体为什么要加引号?
因为采用中文或者英文字体有空格时，不加引号可能导致用户浏览器不能识别字体，产生乱码；
- 字体里的数字符号代表什么?
代表字体的Unicod码。Unicode码全球通用，用该码表示字体是最保险的，获得该码的方式可以在网上查找，或者在开发者工具中输入escape指令，如下图：
![](https://img.haomeiwen.com/i154598/48cc9489118c758f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)