CSS知识点总结（2）

一、选择器

1.通配符选择器

（1）通配符选择器：选择所有的元素（标签），通常用来做 格式化元素（标签）。

（2）基本格式

         *{
    样式属性名 : 属性值 ;
    ...
     }

（3）实例

/* 通配符选择器 */
*{
	border: 1px solid #00000F;
	margin: 0px;
	font-size: 20px;
}

2.分组选择器

（1） 分组选择器：分组选择器不是一种选择器类型，而是一种选择器使用方法。当多个对象定义 了相同的样式时，就可以把它们分成一组，这样能够简化代码。多个类之间用空格隔开。

（2）基本格式

    选择器1，选择器2,...{
    样式属性名 : 属性值 ;
    ...
     }

（3）实例

/* 分组选择器*/
.num a,.hello,.me span{
	font: italic bold 50px/2 "宋体","times new roman";
	color: #00000F;
	border: 2px dotted #00000F;
	text-decoration: line-through;
	
}

二、文本相关样式

1.  text-align   文本水平对齐方式

属性值：

•          left  默认  左对齐
•          right   右对齐
•          center   居中对齐
•          justify    两端对齐 （最后一行左对齐）

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

  2. text-indent    首行缩进

     数值+单位     常用em作为单位， 数值可以为负，负值向左悬挂

.indent{
	text-indent: 2em;/* 缩进2字符 */
}

  3.  text-decoration  文本修饰

属性值： 

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

.decoration{
	text-decoration: none;/* 无修饰 */
	text-decoration: underline;/* 下划线修饰 */
	text-decoration: line-through;/* 中划线修饰 */
	text-decoration: overline;/* 上划线修饰 */
}

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

 属性值:  

•           uppercase  全大写
•           lowercase   全小写
•           capitalize    首字母大写

.transfrom{
	text-transform: lowercase;/* 全大写 */
	text-transform: uppercase;/* 全小写 */
	text-transform: capitalize;/* 单词首字母大写 */
}

  5.  letter-spacing  

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

.letter{
	letter-spacing: 10px;/* 字符间距为10px */
}

  6.  word-spacing  

单词与单词之间的距离

.word{
	word-spacing: 50px;/* 单词与单词之前的距离为50px */
}

7.vertical-align   元素的垂直对齐方式

该属性定义行内块元素的基线相对于该元素所在行的基线 

#con img{
	vertical-align: middle;
}

8.单行文本溢出省略标记

（1） white-space 设置如何处理元素内的空白。

• normal：默认。空白会被浏览器忽略。
• nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
• inherit:规定应该从父元素继承 white-space 属性的值。

（2）overflow  规定当内容溢出元素框时的设置

• visible：默认，溢出部分可见
• hidden：隐藏溢出部分
• scroll：溢出部分通过滚动条查看
• auto：浏览器自动计算处理
• inherit：规定应该从父元素继承 overflow 属性的值。

（3）text-overflow 规定当文本溢出包含元素时的规则

• clip：不显示省略标记,简单裁切溢出部分
• ellipsis：文本溢出部分以小圆点形式显示

（4）实例

.overflow{
	white-space: nowrap;/* 强制不换行  强制在一行显示*/
	overflow-x: hidden;/* 溢出部分水平方向隐藏 */
	overflow-y: visible;/* 溢出部分垂直方向可见 */
	overflow: hidden;/* 隐藏溢出部分 */
	overflow: visible;/* 默认值 溢出的部分可见 */
	overflow: scroll;/* 溢出部分通过滚动条查看 */
	overflow: auto;/* 浏览器自动计算 */
	text-overflow: clip;/* 不显示省略标记,简单裁切溢出部分 */
	text-overflow: ellipsis;/* 文本溢出部分以小圆点形式显示 */	
}

9.多行文本溢出省略标记 

（1）相对于单行省略标记来说，多行省略标记还需要添加以下属性：

• display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型显示。
•  -webkit-line-clamp：3；：用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
•   -webkit-box-orient: vertical;  必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

（2）实例

/* 多行省略标记显示:第一行第二行正常显示/第三行显示省略 */
.overflow2{
    display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

 三、盒子模型(Box Model)

1.盒子模型是什么

所有HTML元素可以看作盒子，在设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

2.盒子模型的分类

（1）标准盒模型（w3c标准盒）：Chrome Firefox

         盒子大小=width+padding+border

        width，height 则表示内容大小

（2）怪异盒模型 ：IE盒子
         width，height 盒子大小

3.内边距 padding

（1）属性值

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

（2）缩写

• padding ： a；            上下左右的内边距都为a
• padding ： a b；     a：上、下内边距，b：代表左、右内边距
• padding ： a b c；      a：上内边距，b：左、右内边距，c：下内边距
• padding ：a b c d ；    a：上内边距，b：右内边距，c：下内边距，d：左内边距，按顺时针方向

（3）实例

.box{
	padding: 20px;/* 上下左右均为20px */
	padding: 0px 30px;/* 上下0px 左右30px */
	padding: 0px 20px 30px;/* 上0px 左右20px 下30px */
	padding: 0px 10px 20px 30px;/* 上0px 右10px 下20px 左30px */
}

4.边框 border

  （1） border-width   边框宽度
  （2） border-color    边框颜色
  （3）border-style     边框样式 

          属性值：

•                       none    无边框
•                       solid     实线
•                      dashed  虚线
•                      dotted   点状线
•                     double   双实线

  （4） border-top     上边框
  （5）border-bottom  下边框
  （6）border-left     左边框
  （7）border-right    右边框

  （8）缩写

           border ： border-width值   border-style值   border-color值 ；

5.外边距 margin

（1）属性

•    margin-top  上外边距
•    margin-bottom   下外边距
•    margin-left   左外边距
•    margin-right  右外边距

（2） 缩写

• margin ： a；            上下左右的外边距都为a
• margin ： a b；     a：上、下外边距，b：代表左、右外边距
• margin ： a b c；      a：上外边距，b：左、右外边距，c：下外边距
• margin ：a b c d ；    a：上外边距，b：右外边距，c：下外边距，d：左外边距，按顺时针方向

6.伪类选择器

（1）属性

•     选择器:link{ }   未访问状态
•     选择器:visited{ }   访问后状态
•     选择器:hover{ }  鼠标悬停状态
•     选择器:active{ }  鼠标激活状态

（2）实例

/* 伪类*/
/* 未访问状态 */
a:link{
	color: aqua;
}
/* 访问后状态 */
a:visited{
	color: green;
}
/* 鼠标悬停状态 */
a:hover{
	background-color: palevioletred;
	color: khaki;
	border: 10px solid lawngreen;
}
/* 鼠标激活状态 */
a:active{
	color: indigo;
	background-color: yellow;
}