首页 > 代码库 > 盒模型
盒模型
盒模型阴影
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=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写
判断浏览器的宽度来改变样式
盒模型