盒模型
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型相关的知识，希望对你有一定的参考价值。
盒模型阴影
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写
判断浏览器的宽度来改变样式
以上是关于盒模型的主要内容，如果未能解决你的问题，请参考以下文章