常用的CSS

最新推荐文章于 2024-06-03 23:30:08 发布

South-Fly

最新推荐文章于 2024-06-03 23:30:08 发布

阅读量749

点赞数 1

分类专栏： HTML5+CSS3 文章标签： CSS 样式常用

本文链接：https://blog.csdn.net/sunlovefly2012/article/details/19036111

版权

HTML5+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

//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;
}

在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？

</div>
<section style="border:1px solid green;" class="afterDiv">
使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。
</section>

效果图: