常用css3

opacity: 0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的；

visibility: hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件；

display: none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

横向三等分布局：

.dengfen{
    display:flex;
    width: 50%;
    height: 100px;
}
.dengfen div{
    flex:1;
}

.dengfen1 {
    width: 50%;
    height: 100px;
    -webkit-box-orient: horizontal;
    display: -webkit-box;
}
.dengfen1 div {
    -webkit-box-flex: 1;
}

纵向三等分布局：

.dengfen{
  display: -moz-box;
  display: -webkit-box;
  display: box;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}
.dengfen div {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
}

<div class="dengfen1">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
<div class="dengfen">
    <div class=" one"></div>
    <div class=" two"></div>
    <div class=" three"></div>
</div>

rem是css3中新增加的一个单位属性(fontsizeoftherootelement),根据页面的根节点html的字体大小进行转变的单位

em也是一个相对单位，em单位是根据父元素的字体大小来进行转变的单位。

flex:

> 以下 6 个属性设置在容器上。
- flex-direction 属性决定主轴的方向（即项目的排列方向）。
- flex-wrap 属性定义，如果一条轴线排不下，如何换行。
- flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 rownowrap。
- justify-content 属性定义了项目在主轴上的对齐方式。
- align-items 属性定义项目在交叉轴上如何对齐。
- align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

> 以下 6 个属性设置在项目上：
- order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
- flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
- flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
- flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
- flex 属性是 flex-grow，flex-shrink 和 flex-basis 的简写，默认值为 01auto。
- align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

index:

z-index 属性设置元素的堆叠顺序，且只在属性position: relative/absolute/fixed 的时候才生效。
`z-index: auto` 是默认值，与`z-index: 0`是有区别的：
`z-index: 0` 会创建一个新的堆叠上下文，而 `z-index: auto` 不会创建新的堆叠上下文

单行／多行文本溢出的省略:

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}
p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
p1{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

nth-child() 和 nth-of-type() 的区别:
-nth-child()就是根据元素的个数来计算的

nth-of-type()是根据类型来计算的，也就是 li:nth-of-type(2) 表示的是第 2 个 li 标签

css画三角形和扇形：

div {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

div {
  height: 0;
  width: 0;
  border: 100px solid transparent;
  border-radius: 50%;
  border-left-color: red;
}

常用css3

推荐阅读更多精彩内容