//DIV等标签中的内容垂直居中:
/****************DIV 内容垂直居中样式 Begin:*************/
.verticalMiddle{display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
/* DIV等标签中内容垂直居中样式 End:*/
//背景透明,兼容大部分主流浏览器:
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
//超出部分文字以省略号显示
.word{
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
//CSS3圆角效果
<div id="round"></div> #round { padding:10px; width:300px; height:50px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ }
无边框:
<div id="round"></div> #round { padding:10px; width:300px; height:50px; background:#FC9; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; }
支持性
浏览器 | 支持性 |
---|---|
Firefox(2、3+) | √ |
Google Chrome(1.0.154+…) | √ |
Google Chrome(2.0.156+…) | √ |
Safari(3.2.1+ windows) | √ |
Internet Explorer(IE7, IE8) | × |
Opera 9.6 | × |
//css的position属性
position:static;
static
是默认值。任意 position: static;
的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”。
position:relative;
relative
表现的和 static
一样,除非你添加了一些额外的属性。在一个相对定位(position属性的值为relative)的元素上设置 top
、 right
、 bottom
和 left
属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
position:fixed;
一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative
一样, top
、 right
、 bottom
和left
属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙。令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.
position:absolute;
absolute
是最棘手的position值。 absolute
与 fixed
的表现类似,除了它不是相对于视窗而是相对于最近的“positioned” 祖先元素 。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指position 值不是 static
的元素。
参考资料:http://blog.csdn.net/sunlovefly2012/article/details/15026233
//clear
属性被用于控制浮动:
请看下面例子:
.box {
float: left;
width: 400px;
height: 100px;
margin: 1em;
overflow:auto;
border:1px solid red;
}
<div class="box">
在这个例子中, section 元素实际上是在 div 之后的(译注:DOM结构上)。然而 div 元素是浮动到左边的,于是 section 中的文字就围绕了 div ,并且section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢?
</div>
<section style="border:1px solid green;" class="afterDiv">
使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。
</section>
效果图:
使用 clear
我们就可以将这个段落移动到浮动元素 div
下面。你需要用 left
值才能清除元素的向左浮动。你还可以用 right
或 both
来清除向右浮动或同时清除向左向右浮动。
.afterDiv{
clear:left;
}
效果图:
注意:
1.如果.box的DIV中的内容过多时,会超出DIV区域,此时可以使用属性:overflow:auto,来控制内容始终在该DIV中;
2.如果希望达到第二个效果图,不使用clear,使用另一种方式也可以:clear:left;去掉后,在.box样式中将float:left;改为display:inline-block;即可.
//盒模型:在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型。当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。看下面的例子,两个相同宽度的元素显示的实际宽度却不一样;
.simple {
width: 500px;
margin: 20px auto;
border:1px solid red;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
border:10px solid red;
}
<div class="simple ">盒模型</div>
<div class="fancy">盒模型</div>
效果:
当你设置一个元素为 box-sizing: border-box;
时,此元素的内边距和边框不再会增加它的宽度。
.simple {
width: 500px;
margin: 20px auto;
border:1px solid red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
border:10px solid red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}