CSS3

css 盒模型

box-sizing(有3个值)：border-box,padding-box,content-box.

标准盒子模型：

IE盒子模型：

flex 布局 (弹性布局 详见flex)

display + position +floato

1
2
3
4
5
6
7
8
.box{	
	display:flex;
    
    display: inline-flex;/*行内元素*/
    
    display: -webkit-flex; /* Safari */
    display: flex;
}

容器属性

1
2
3
4
5
6
7
8
.box{
    flex-direction:row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    flex-flow:  <flex-direction> || <flex-wrap>;
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: flex-start | flex-end | center | baseline | stretch;
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

项目属性

1
2
3
4
5
6
7
.item{
 	 flex-grow: <number>; /* default 0 放大*/
 	 flex-shrink: <number>; /* default 1 缩小*/
 	 flex-basis: <length> | auto; /* default auto */
	 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];/*一般值为 auto (1 1 auto) 和 none (0 0 auto)*/
	 align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

BFC (块级格式化上下文，清除浮动，防止margin重叠)

1
2
3
4
5
6
这些元素会生成BFC：
根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、table-caption，flex，inline-flex的元素
overflow不为visible的元素

多行元素的文本省略号

1
2
3
4
5
6
.box{
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

浮动清除(详见清除浮动)

    1. 在浮动元素后使用一个空元素如
      ，并在CSS中赋予.clear{clear:both;}属性
    1. 给浮动元素的容器添加overflow:hidden;或overflow:auto;
    1. 给浮动元素的容器也添加上浮动属性即可清除内部浮动
    1. 什么都不做，给浮动元素后面的元素添加clear属性
    1. 给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素

CSS3 新特性(详见css3)

边框

1
2
3
border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;
box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round;

背景

1
2
background-size: 属性规定背景图片的尺寸
background-origin ：属性规定背景图片的定位区域

文字

1
2
text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
word-wrap :允许对长单词进行拆分，并换行：p{word-wrap:break-word;}

2D转换（ transform）

1
2
3
4
5
6
7
8
9
10
11
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。

scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。

matrix() :
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

3D(rotateX(),rotateY())

1
2
rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);

多列

1
2
3
column-count：属性规定元素应该被分隔的列数。
column-gap：属性规定列之间的间隔。
column-rule ：属性设置列之间的宽度、样式和颜色规则。

过渡及动画

元素消失

1
2
3
4
5
1. display:none; 
2. visibility:hidden; 
3. opacity: 0;
4. position移到外部
5. z-index涂层遮盖等等

元素垂直居中

1
2
3
4
1. (margin:auto) 定位为上下左右为0，margin：0/auto可以实现脱离文档流的居中.
2. (margin负值法) position: absolute;top: 50%;left: 50%; 另 transform：translate(-50%,-50%) 或 margin-top：-（高度/2）；margin-left:-（高度/2）
3. (table) 父元素display: table-cell布局，子元素设置vertical-align:center/middle;
4. (flex) 父元素display:flex,align-items:center;justify-content: center

0.5px 的线(详见chrome 0.5px)

1
2
3
4
1. viewport
2. boxshadow
3. 线性渐变linear-gradient
4. 使用scale缩放，配合transform-origin: 50% 100%：

实现一个两列等高布局，讲讲思路

为了实现两列等高，可以给每列加上

1
2
3
padding-bottom:9999px;
margin-bottom:-9999px;
同时父元素设置overflow:hidden;