首页 > 代码库 > 盒模型

盒模型

盒模型阴影

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-gradienttransparent 0blue 100%)从透明渐变 成蓝色

Resize自由缩放(自由缩放要与overflowauto配合使用)通过鼠标的拖拉进行放大或缩小

Both水平垂直都可以缩放

Horizontal只有水平方向可以缩放

Vertical只有垂直方向可以缩放

Box-sizing盒模型解析模式

Content-box标准盒模型(默认)

普通型

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

Css3分栏布局(新闻报形式)

Column-width栏目宽度

Column-count栏目列数

Column-gap栏目距离

Column-rule栏目间隔线

响应式布局(媒体查询)

判断横竖屏

Media=all andorientationportrait)”

Media=all andorientationlandscape)”

 

方法1

通过引入文件来进行

<link rel=”stylesheet” type=”text/css” href=http://www.mamicode.com/”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

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

 

 

  

 

盒模型