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
时间: 2024-08-24 12:52:25