一、盒的类型
1.inline-block
css中我们使用display来定义盒的类型，总体上分为block与inline类型。
css2.1追加了一个盒类型：inline-block，他属于block类型之一，但在显示上具有inline的特点，ie8以下不支持该属性
曾经我们若是要实现分列显示多个block元素是要借助于float属性的，
但是float是魔鬼，他根本就不应该用于布局，他会吞噬元素/破坏元素，让元素高度失效，最后让元素脱离文档流，
float还会引起父级元素的“塌方”，然后我们又需要清除浮动，而且浮动可能引起很多bug，所以应该尽量少用他布局。
比如一行多列布局，我们完全就可以用inline-block属性替代之，bug也会少很多的。
2.inline-table
用于表格前后文字不换行，并可设置vertical-align 设置外部文字top对齐或者bottom对齐。
3.list-item
可以将div变为列表显示，个人认为意义不大。
4.run-in/compact
将元素指定为以上两个类型时，若果元素后面还有block类型的元素，run-in元素将会被包含在block元素的内部，而compact类型的元素将被放置在左边。
二、对于盒模型容纳不下的元素
如果块级元素拥有高宽，设置overflow可以控
制显示....该属性较熟悉变不研究了。
在css中有一个非常有用的属性“text-overflow”，若是文字超出宽度，便会显示“这节基本没什么东西。。。。...”省去了我们js操作的过程。
三、对盒使用阴影
box-shadow
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
兼容ie下模拟css3中的box-shadow阴影效果
方法一：可以使用IE的Shadow滤镜
基本语法：filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）,Strength=阴影半径（数值）);
注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。
IE下模拟css3中的box-shadow（阴影）代码：
.box-shadow{
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);
background-color: #ccc;
-moz-box-shadow:2px 2px 5px #969696;
-webkit-box-shadow:2px 2px 5px #969696;
box-shadow:2px 2px 5px #969696;
}
例子：
li.blk-item{
width:423px;
height:229px;
float:left;
padding:8px;
margin:2px 18px 13px 21px;
display:inline;
border:1px solid #d3c998;
border-radius:2px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#d3c998', Direction=135,Strength=5);
background-color: #fff;
-moz-box-shadow:2px 2px 5px#d3c998;
-webkit-box-shadow:2px 2px 5px#d3c998;
box-shadow:2px 2px 5px #d3c998;
}
方法二：有些js和.htc的hack文件可以实现IE中的阴影效果。
ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。
它的使用方法是：下载它并放到你的服务器目录
在你的<head></head>里面写入下面的代码:
这个脚本的缺点是IE只支持一部分的box-shadow值。需要注意：
当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。
当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
不支持RGBA值中的alpha透明度。
不支持inset内阴影。
不支持阴影扩展。
阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。
方法三：使用jQuery的插件jquery.boxshadow.js，插件的下载地址是http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js
使用方法很简单，将该文件和jquery版本库引入head标签，插入以下js效果代码：
<script type="text/javascript">
$(document).ready(function(){
if($.browser.msie) {
$('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow
}
});
</script>
注意：js中可以使用：obj.style.webkitBoxShadow=值（字符串）;obj.style.MozBoxShadow=值（字符串）;obj.style.boxShadow=值（字符串）;
四、box-sizing属性
当前位置：
论坛首页 »
自由讨论区 »
Android, Python及开发编程讨论区
»
发起投票
技术讨论
加好友
发消息
2015-9-10 11:54:53 |
赞(
操作
