盒模型

盒模型阴影

Box-shadow:[inset] x y blur [spread] color

参数inset:投影方式不写这个参数就是外投影

Inset内投影

X,y阴影的偏移

Blur模糊半径

Spread:扩展阴影的半径

实例：

Box-shadow:0 30px 30px #000,inset 0 0 10px #ccc;

盒模型倒影

Box-reflect倒影

Direction方向 above/below/left.right

距离

渐变（可选）

示例：box-reflectright 10px linear-gradient(red 0,blue 100%);

渐变

  在background中使用

  示例：

Background：-webkit-linear-gradient（transparent 0，blue 100%）从透明渐变 成蓝色

Resize自由缩放（自由缩放要与overflow：auto配合使用）通过鼠标的拖拉进行放大或缩小

Both水平垂直都可以缩放

Horizontal只有水平方向可以缩放

Vertical只有垂直方向可以缩放

Box-sizing盒模型解析模式

Content-box标准盒模型（默认）

普通型

Border-box怪异盒模型只包括宽高

Css3分栏布局（新闻报形式）

Column-width栏目宽度

Column-count栏目列数

Column-gap栏目距离

Column-rule栏目间隔线

响应式布局（媒体查询）

判断横竖屏

Media=“all and（orientation：portrait）”

Media=“all and（orientation：landscape）”

 

方法1：

通过引入文件来进行

<link rel=”stylesheet” type=”text/css” href=”stylea.css” media=”screen and (min-width:400px) and (max-width:800px)”>

方法2：

通过直接在style中写

@media screen and(min-width:400px) and (max-width:800px){

Margin:0 auto}

方法3：

通过js写

判断浏览器的宽度来改变样式