css3新内容及特性

1.css3的新特性

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadoweflect）
文字特效 （text-shadow）
文字渲染 （text-decoration）
线性渐变 （gradient）
旋转 （transform）
增加了旋转,缩放,定位,倾斜,动画,多背景

---

2.css中可继承属性

@字体 {
	font-family	
	font-weight
	font-size
	font-style
}
@文本 {
	text-indent
	text-align
	line-height
	word-spacing
	letter-spacing
	text-transform
	color
	user-select
}
@可见性 {
	visibility
}
@列表 {
	list-style
}
@光标{
	cursor
}

---

3.display属性

属性值	作用
none	元素不显示；并且会从文档流中移除；
block	块元素；默认宽度为父元素宽度；可以设置宽高；
inline	行内元素；默认宽度为内容宽度；不可以设置宽高；
inline-block	行内块元素；默认宽度为内容宽度；可设置宽高；
inherit	从父元素继承display的值；
list-item	像块类型元素一样显示；添加样式列表标记；
table	此元素会作为块级表格来显示；

---

4.块/行内/行内块

block {
	@块级元素
	@独占一行
	@可设置宽高
	@可设置水平+垂直方向margin/padding
}
inline {
	@行内元素
	@不独占一行
	@不可宽高无效
	@可设置水平方向margin/padding
}
inline-bloack {
	@行内块元素
	@不独占一行
	@可设置苦宽高
	@可设置水平+垂直方向margin/padding
}

---

5.隐藏元素的方法

@display : none
DOM树不会渲染该元素、因此元素不会占据页面位置。

@visibility : hidden
DOM元素渲染了、但绑定事件无效。

@opacity : 0
元素透明度设置为0、元素还存在、可以绑定事件、子元素也会透明。

@position : absolute
通过绝对定位将元素移除可是区域。

@z-index : -n
使用其他元素遮挡该元素

@transform : scale(0,0)
将元素大小缩放到0，元素仍然存在，但绑定事件无效

---

6.文本溢出省略号

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

多行
display:-webkit-box;      
-webkit-box-orient:vertical; 
-webkit-line-clamp:3;
overflow: hidden;           
text-overflow: ellipsis; 

---

7.水平垂直居中实现

.parent {
	position: relative;
}
.child {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.parent {    
  position: relative;
} 
.child {    
  position: absolute;    
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: calc(50% - 自身一半);
    left: calc(50% - 自身一半);
}

.parent {
  display: flex;
  justify-content: center;
  align-item: center;
}