常用的CSS

当前位置 : 首页 > 网页制作 > CSS > 常用的CSS

常用的CSS

来源: 作者: 时间:2016-01-25 10:02
DIV等标签中的内容垂直居中: ****************DIV 内容垂直居中样式 Begin:************* verticalMiddle{display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-web

//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:*/



//position:为了制作更多复杂的布局,我们需要讨论下 position 属性。

position:static;

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”。

position:relative;

relative 表现的和 static 一样,除非你添加了一些额外的属性。在一个相对定位(position属性的值为relative)的元素上设置 toprightbottomleft 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

position:fixed;

一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, toprightbottomleft 属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙。令人惊讶地是移动对 fixed 的支持很差。这里有相应的解决方案.

position:absolute;

absolute 是最棘手的position值。 absolutefixed 的表现类似,除了它不是相对于视窗而是相对于最近的“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 显示在浮动元素之后呢?



使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

效果图:

\

使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 rightboth 来清除向右浮动或同时清除向左向右浮动。

.afterDiv{

clear:left;

}

效果图:

vcq90rK/ydLUOmNsZWFyOmxlZnQ7yKW19LrzLNTaLmJveNH5yr3W0L2rZmxvYXQ6bGVmdDu4xM6qZGlzcGxheTppbmxpbmUtYmxvY2s7vLS/yS48L3A+CjxwPjxicj4KPC9wPgo8cD4vL7rQxKPQzTrU2s7Sw8fM1sLbv+22yLXEyrG68qOsztLDx9OmuMO9ss/C0+vL/M/gudi1xNK7uPbW2LXj1qrKtqO6utDEo9DNoaO1scTjyejWw8HL1KrL2LXEv+22yKOsyrW8ytW5z9a1xNSqy9jItMTcubuzrLP2xOO1xMno1sOjutLyzqrUqsvYtcSx37/yus3E2rHfvuC74bPFv6rUqsvYoaO/tM/Cw+a1xMD919OjrMG9uPbP4M2sv+22yLXE1KrL2M/Uyr61xMq1vMq/7bbIyLSyu9K70fk7PC9wPgo8cD4uc2ltcGxlIHs8YnI+CiAgICAgd2lkdGg6IDUwMHB4Ozxicj4KICAgICBtYXJnaW46IDIwcHggYXV0bzs8YnI+CiAgICAgYm9yZGVyOjFweCBzb2xpZCByZWQ7PC9wPgo8cD59PGJyPgouZmFuY3kgezxicj4KICAgICB3aWR0aDogNTAwcHg7PGJyPgogICAgIG1hcmdpbjogMjBweCBhdXRvOzxicj4KICAgICBwYWRkaW5nOiA1MHB4Ozxicj4KICAgICBib3JkZXItd2lkdGg6IDEwcHg7PGJyPgogICAgIGJvcmRlcjoxMHB4IHNvbGlkIHJlZDs8YnI+Cn08YnI+CjwvcD4KPHA+PGRpdiBjbGFzcz0="simple ">盒模型

盒模型

效果:

\

当你设置一个元素为 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;
}

效果:



Tag:
网友评论

<