html基础整理（01居中 盒子问题）
01 文字居中
将一段文字置于容器的水平中点，只要设置text-align属性即可：
text-align：center;
02 容器水平居中
先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可
div#container {
width:760px;
margin:0 auto;
}
03文字的垂直居中
单行容器 让行高与盒子高度的设置一致就可以直接让文字上下居中
.content
{height: 35px; line-height: 35px;}
04 容器垂直 水平居中问题
04-1 已经知道宽高的盒子：
设置绝对定位，距离上方 左方 50% 在剪去自身盒子的一半的距离
.class1{
background-color: #ccc;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
用css3的 transform的属性 可以把margin-top 和 margin-left 剪掉的自身盒子一半替换掉
因为translate的百分比参照是自身盒子的宽高，所以，我们可以借助于这个配合定位实现居中
.class1{
background-color: #ccc;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
04-2 不知道宽高的盒子
class2{
width: 200px;
height: 200px;
background-color:#6699FF;
margin:auto;
position: absolute;
left: 0;
top: 0;
right:0;
bottom: 0;
}
04-3转换成表格
将盒子转换成表格 就可以用
text-align: center;
vertical-align: middle;属性
<div id="class3">
<img src="pic.jpg" >
</div>
.class3{
width: 900px;
height: 900px;
border:1px solid #ccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
05 font 属性的快捷写法
font的快捷写法格式为
body {
font: font-style font-variant font-weight font-size line-height font-family;
}
原本样式
body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; font-variant: small-caps; font-style: italic; line-height: 150%; }
可以被写成
body {
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}
06 Text-transform和Font Variant
Text-transform用于将所有字母变成小写字母、大写字母或首字母大写：
p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}
Font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母）。
p {font-variant: small-caps}
07 禁止自动换行
如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：
h1 { white-space:nowrap; }
08 link状态的设置顺序
link的四种状态，需要按照下面的前后顺序进行设置：
a:link
a:visited
a:hover
a:active
09 IE6的min-height
IE6不支持min-height，有两种方法可以解决这个问题：
001
.element {
min-height: 500px;
height: auto !important;
height: 500px;
}
共有三条CSS语句，第一句是针对其他浏览器设置最小高度，第三句是针对IE设置最小高度，第二句则是让其他浏览器覆盖第三句的设置。
002
.element {
min-height: 500px
_height: 500px
}
_height只有IE6能读取。
10 透明
将一个容器设为透明，可以使用下面的代码：
.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
第一行是IE专用的，第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。
11 CSS阴影
外阴影：
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
内阴影：
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
12 在IE6中设置PNG图片的透明效果
.classname {
background: url(image.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image.png', sizingMethod='crop');
}
13 各类浏览器的专用语句
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
