CSS3盒模型的有关属性

一、在盒模型中显示不下内容的时候：

1、overflow属性：用来指定对盒中容纳不下的内容的显示办法，其取值如下：

（1）hidden：超出容纳范围的文字将被隐藏起来；

（2）scroll：在div元素中出现水平与垂直的滚动条，超出的内容被滚动显示；

（3）auto：当文字超出div元素的容纳范围时，根据需要出现水平滚动条或者垂直滚动条，滚动显示超出的内容；

（4）visible：和不使用overflow时候的显示效果一样，超出内容范围的文字按照原样显示；

2、overflow-x属性与overflow-y属性：

使用overflow-x属性或者overflow-y属性可以单独指定在水平或者垂直方向上如果有内容超出盒的容纳范围时的显示办法；

3、text-overflow属性：

（1）通过使用text-overflow属性，可以在盒的末尾显示一个代表省略的符号"..."，但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效；

（2）使用方式：标签{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

（3）小案例：通过将white-space属性的属性值设定为nowrap，使得盒的右端内容不能换行显示，这样就可以达到水平方向溢出的效果；

1）HTML代码：

<p>text-overflow属性：通过使用text-overflow属性，可以在盒的末尾显示一个代表省略的符号"..."，但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效</p>

2）CSS代码：

p{width: 200px;height: 24px;background: blanchedalmond;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

3）效果图如下：

二、盒阴影：

1、box-shadow属性的使用方法：

在CSS3中可以使用box-shadow属性让盒在显示的时候产生阴影效果；使用方法：box-shadow:length length length color;其中第一个length表示的是阴影离开盒的横方向

距离，第二个length表示的是阴影离开盒的纵方向的距离，第三个length表示阴影模糊半径，color表示阴影的颜色；

2、将参数设置为0：

（1）当阴影的模糊半径设定为0的时候，将绘制不向外模糊的阴影；

（2）将阴影离开盒的横方向距离与阴影离开盒的纵方向距离都设置为0的时候，会在盒子的周围绘制阴影；

（3）将阴影离开盒的横方向距离设定为负数值的时候，向左绘制阴影；

（4）将阴影离开盒的纵方向距离设定为负数值的时候，向上绘制阴影；

3、对盒内子元素使用阴影：

可以单独对盒内的子元素使用阴影效果；

4、对第一个文字或者第一行文字使用阴影：

通过使用first-letter选择器或者first-line选择器可以只让第一个字或者第一行具有阴影效果；

5、对表格及单元格使用阴影：

可以使用box-shadow属性让表格及表格内的单元格产生阴影效果；

6、box-shadow属性的使用案例：

（1）HTML代码：

<div class="div1">div1—box-shadow属性的使用方法</div><div class="div2">div2—box-shadow属性的使用方法</div><div class="div3">div3—box-shadow属性的使用方法<br />/*模糊半径为0*/</div><div class="div4">div4—box-shadow属性的使用方法<br />/*横方向与纵方向距离为0*/</div><div class="div5">div5—box-shadow属性的使用方法<br />/*横方向数值为负数*/</div><div class="div6">div6—box-shadow属性的使用方法<br />/*纵方向数值为负数*/</div><div class="div7">div7—box-shadow属性的使用方法<br />/*横方向和纵方向均为负数*/</div>

（2）CSS代码：

.div1{box-shadow: 10px 10px 5px #6c6c6c;}.div2{box-shadow: 30px 30px 15px #6c6c6c;}.div3{/*模糊半径为0*/box-shadow: 10px 10px 0px #6c6c6c;}.div4{/*横方向与纵方向距离为0*/box-shadow: 0px 0px 40px #6c6c6c;}.div5{/*横方向数值为负数*/box-shadow: -10px 10px 5px #6c6c6c;}.div6{/*纵方向数值为负数*/box-shadow: 10px -10px 5px #6c6c6c;}.div7{/*横方向和纵方向均为负数*/box-shadow: -10px -10px 5px #6c6c6c;}

（3）效果图如下：

三、box-sizing宽高计算：

1、box-sizing属性：

在CSS3中，使用box-sizing属性来指定针对元素的宽度与高度的计算方法；

（1）box-sizing可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内补白区域以及边框的宽度和高度；

（2）可以给box-sizing属性指定的属性值为content-box属性值与border-box属性值；

（3）content-box属性值表示元素的宽度与高度包括内补白区域及边框的宽度与高度，在没有使用box-sizing属性的时候，默认值是content-box属性值；

2、使用box-sizing属性的原因：

对元素的总宽度做一个控制，如果不使用这个属性，样式中默认使用的是content-box属性值，其只对内容做一个指定，却没有对盒的总宽度做一个指定，有些场合合理利用border-box属性值会使页面布局更方便；

3、box-sizing属性的使用案例：

（1）HTML代码：

<div id="first">box-sizing属性box-sizing属性box-sizing属性box-sizing属性box-sizing属性</div><div id="second">box-sizing属性box-sizing属性box-sizing属性box-sizing属性box-sizing属性</div>

（2）CSS代码：

div{width: 300px;height: 200px;border: 30px solid lightcoral;padding: 30px;background: lightblue;margin: 30px auto;}#first{box-sizing: border-box;/*300px*200px*/}#second{box-sizing: content-box;/*420px*320px*/}

（3）效果图如下：