CSS知识点02 文本样式+盒子模型+伪类

一、文本相关样式

1. text-align  文本对齐方式

值：

left	right	center	justify
左对齐（默认）	右对齐	居中对齐	两端对齐

text-align: left;/* 默认 水平居左对齐 */
text-align: right; /* 水平居右对齐 */
text-align: center; /* 水平居中显示 */
text-align: justify;/* 两端对齐显示 */

2. text-indent 首行缩进

值：数值+单位

常用em作为单位，一般为正值，负值则表示首行悬挂。

text-indent: 2em; /* 首行缩进2个字符 */
text-indent: -2em; /* 首行悬挂缩进 */

3. text-decoration 文本修饰

值：

none	underline	line-through	overline
无修饰	下划线	中划线	上划线

text-decoration: none;/*无修饰*/
text-decoration: underline;/* 下划线 */
text-decoration: line-through;/* 中划线，删除线 */
text-decoration: overline;/* 上划线 */

4. text-transform 文本大小写转换

值：

uppercase	lowercase	capitlize
全大写	全小写	首字母大写

text-transform: uppercase; /* 全大写 */

text-transform: lowercase;/* 全小写 */

text-transform: capitalize;/* 单词首字母大写 */

5.  字符之间的间距

letter-spacing  字母与字母之间的距离/汉字与汉字之间的距离（可以为负值）        

word-spacing  单词与单词之间的距离

letter-spacing: 10px;/* 字母与字母之间的距离，汉字与汉字之间的距离为10像素*/

word-spacing: 10px; /* 单词与单词之间的距离为10像素，中间空格的长度，常常用于英文 */

6. vertical-align 垂直对齐方式 （常常用于定义行内块元素）

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式

middle	top	bottom
把此元素放置在父元素的中部。	把元素的顶端与行中最高元素的顶端对齐	把元素的顶端与行中最低的元素的顶端对齐。

7. 单行显示省略标记

（1）white-space : nowrap ;     强制不换行

（2）overflow : hidden ;        内容溢出隐藏

（3）text-overflow : ellipsis ;    文本溢出显示省略标记

（4）overflow:visible; 默认值 溢出部分可见

（5）overflow:scrool; 显示滚动条

（6）overflow:auto; 浏览器自动处理

white-space: nowrap;/* 不换行 */

overflow: hidden;/* 溢出部分 隐藏 */

text-overflow: ellipsis; /* 文本溢出显示标记 */
/*这三个通常搭配使用*/

 overflow: visible; /*默认 溢出部分 可见 */

 overflow: scroll; /*显示滚动条 */

 overflow: auto; /*浏览器自动处理 根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚动条*/

8.多行省略标记

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*控制显示的行数*/
overflow: hidden;

/*兼容性较差*/

-webkit-line-clamp文本显示行数；
需要结合一下属性进行使用：
　　display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
　　-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

 9.伪类选择器

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式 选择器:hover{ }
• 设置未访问链接时的样式  选择器:link{ }
• 设置已访问链接的样式   选择器:visited{ }
• 设置元素获得焦点时的样式  选择器:active{ }

/* 未访问状态 */
a:link {
  color: #FF0000;
}

/* 已访问状态 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停状态 */
a:hover {
  color: #FF00FF;
}

/* 鼠标激活状态 */
a:active {
  color: #0000FF;
}

/*所有标签都可以加伪类选择器，写的时候需要遵循先后原则，否则可能会出现错误*/

 二、盒子模型

1.分类

（1）标准盒子模型

        盒子大小=content(内容)大小+padding(内边距)+border(边框)

（2）怪异盒子模型

         盒子大小=width/height

2.内容大小

（1）width和height

只定义内容的大小，不包含边框和边距

如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置。

（2） 溢出处理 overflow

        overflow-x（水平方向）   overflow-y（垂直方向）若不指定具体方向，则表示两个同时设置

visible	hidden	scroll	auto
默认  溢出部分可见 忽略width和height	溢出部分隐藏	使用滚动条，不论内容是否超出	浏览器自动处理

 3.内边距

内边距也叫内补、内填充，是内容和盒子边框之间的空白边距

padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

缩写：

padding : 值；	四周的内边距一样
padding : 值1  值2；	值1代表上、下内边距，值2代表左、右内边距
padding : 值1  值2  值3；	值1代表上内边距，值2代表左、右内边距，值3代表下内边距
padding : 值1  值2  值3  值4；	值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距，按顺时针方向

示例：

.box{
		padding: 20px; /* 上下左右内边距均为20像素 */
		padding: 10px 20px; /* 上下的内边距为10像素 */
		padding: 10px 20px 30px; /* 上内边距为10像素，左右内边距为20像素，下内边距为30px */
		padding: 10px 20px 30px 40px;/* 上内边距为10像素，右内边距为20像素，下内边距为30像素，左内边距为40像素 */
				
			}