首页 > 代码库 > css对齐
css对齐
2016-10-25
《css入门经典》第15章
1.text-align属性：
块属性内部的文本对齐方式。该属性只对块盒子有意义，内联盒子的内容没有对齐方式。（注意：只是盒子内部的内容对齐，而不是块盒子本身。）
center:内容居中；
justify：文本两端对齐；
left：内容左对齐；
right:内容右对齐；
inherit：使用包含盒子的text-align的值；
注意：当采用两端对齐的文本，让左边和右边都对齐。浏览器通过在单词和字母之间添加额外的空白实现这种效果。
如果两端对齐段落的最后一行本身太短而不能填充整行，它通常是左对齐。
eg：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>对齐与文本缩进</title> 6 <style type="text/css"> 7 body{ 8 margin:0 auto; 9 width: 700px; 10 } 11 p{ 12 border: 1px solid pink; 13 padding: 1.5em; 14 } 15 p#a{text-align: left;} 16 p#b{text-align: justify;} 17 p#c{text-align: right;} 18 p#d{text-align: center;} 19 </style> 20 </head> 21 <body> 22 <p id="a"> 23 吴雨霏，1986年6月9日生于中国香港。香港歌手及演员，组合Cookies成员之一。 24 2002年正式出道，16岁以Cookies成员身份在十大中文金曲、叱咤乐坛流行榜颁奖典礼等颁奖礼上获奖[1] 。2004年担任摇滚乐队Ping Pung的主唱[2] 。 25 2006年参演《恋爱初歌》。2007年的歌曲《逼得太紧》获专业推介叱咤十大第八位。 26 </p> 27 <p id="b"> 28 吴雨霏，1986年6月9日生于中国香港。香港歌手及演员，组合Cookies成员之一。 29 2002年正式出道，16岁以Cookies成员身份在十大中文金曲、叱咤乐坛流行榜颁奖典礼等颁奖礼上获奖[1] 。2004年担任摇滚乐队Ping Pung的主唱[2] 。 30 2006年参演《恋爱初歌》。2007年的歌曲《逼得太紧》获专业推介叱咤十大第八位。 31 </p> 32 <p id="c"> 33 吴雨霏，1986年6月9日生于中国香港。香港歌手及演员，组合Cookies成员之一。 34 2002年正式出道，16岁以Cookies成员身份在十大中文金曲、叱咤乐坛流行榜颁奖典礼等颁奖礼上获奖[1] 。2004年担任摇滚乐队Ping Pung的主唱[2] 。 35 2006年参演《恋爱初歌》。2007年的歌曲《逼得太紧》获专业推介叱咤十大第八位。 36 </p> 37 <p id="d"> 38 吴雨霏，1986年6月9日生于中国香港。香港歌手及演员，组合Cookies成员之一。 39 2002年正式出道，16岁以Cookies成员身份在十大中文金曲、叱咤乐坛流行榜颁奖典礼等颁奖礼上获奖[1] 。2004年担任摇滚乐队Ping Pung的主唱[2] 。 40 2006年参演《恋爱初歌》。2007年的歌曲《逼得太紧》获专业推介叱咤十大第八位。 41 </p> 42 </body> 43 </html>
效果图：
2.text-indent属性：
缩进块元素的第一行。（应用于内联元素标签，没有效果。）
属性值：
大小：设置缩进；
负的大小：设置悬挂缩进；
百分比：设置基于包含盒子值的缩进；
inherit：使用包含盒子的text-indent值；
1 p#a{text-indent: 2em;} 2 p#b{text-indent: 50%;} 3 p#c{text-indent: 20px;} 4 p#d{text-indent: -5em; 5 margin-left: 6em;}
注意：
（1）设置悬挂，即第一行实际不缩进，但是其他行文本缩进，可以设置text-indent为一负值，但是它将越出元素盒子的左边，这就是意味着可能是不可见的，或者可能改写其他的内容。可以通过给盒子添加边距解决这一问题。如上p#d{}里的代码。
（2）text-indent没有none值，text-indent只能使用大小（或者inhrit）作为值。要设置缩进为“none”，使用text-indent:0;
3.vertical-align属性：调整内联盒子内部的垂直对齐方式。可以使文本比所在行其余文本更高或者更低，适合创建上标或是下标。
注意：除了表格单元格，只有内联元素使用vertical-align属性。
属性值：
baseline：与周围文本对齐
bottom：底端和行底端对齐
middle：与周围文本的中线对齐
sub：下降到下标水平
super：上升到上标水平
text-top：与周围文本的底端对齐
text-bottom：与周围文本的底端对齐
top：顶端和行的顶端对齐
大小：上升到周围文本的上面
负的大小：下降到周围文本的下面
百分比：上升line-height的百分比
负的百分比：下降line-height的百分比
注意：
（1）middle将文本的中线和高与周围文本基线0.5ex的高度对齐，ex等于小写字母高度的测量单位，通常大约是font-size的一半。
（2）百分比基于line-height，通常等于font-size值。
（3）top，bottom值是指所在行的最高和最低部分对齐，而text-top和text-bottom只是基于包含盒子的font-size值。
（4）vertical-align的浏览器实现是各不相同的。最经常使用的是sub，super，大小和百分比。
eg：
1 <p> 2 H <span class="xiabiao">2</span>O 3 <br> 4 X <span class="shangbiao">2</span>-1=80; 5 </p>
1 .xiabiao{ 2 vertical-align: sub; 3 font-size: smaller; 4 } 5 .shangbiao{ 6 vertical-align: super; 7 font-size: smaller; 8 }
4.float属性：
left：盒子移动到左边，文本围绕右边流动。
none:盒子不移动，文本不围绕它流动。
right:盒子移动到右边，文本围绕左边流动。
inherit：使用包含盒子的float。
注意 ：当盒子移动时，它定位在它的包含盒子的内容部分的内部。浮动盒子保持在它的包含盒子的边距，边框和填充之内，它只是适当地移动到左边或是右边。任何其后的内容放在浮动盒子的旁边。
eg:
1 <div class="d1"> 2 <h1>忍冬花</h1> 3 <p>金银花(《唐本草》)，银花(《温病条辨》)，鹭鸶花(《植物名实图考》)，苏花(《药材资料汇编》)，金花(《江苏植药志》)，金藤花(《河北药材》)，双花(《中药材手册》)，双苞花(《浙江民间草药》)，二花(《陕西中药志》)，二宝花(《江苏验方草药选编》)。 </p> 4 <div class="d2"> 5 <img src="忍冬花.jpg" alt="忍冬"> 6 </div> 7 <p>“金银花，善于化毒，故治痈疽、肿毒、疮癣、杨梅、风湿诸毒，诚为要药。”著名的“银翘解毒丸”即是以此为主药。现代药理实验证明，金银花对于上呼吸道感染、流行性感冒、扁桃体炎、急性阑尾炎、丹毒、外伤感染等，均有较明显的疗效。民间也有盛夏以其沏茶，解热散暑，开胃宽中之习俗。</p> 8 <p>金银花适应性强，生长迅速，牵藤挂蔓，可铺展数十米。夏天能以清香散解暑热之烦躁；冬日，又能用一片翠碧驱除寂寞萧索，为庭院绿化和营造绿色长廊之佳木。</p> 9 <p>因为金银花开的时候有两种颜色:金黄色和白色,所以就有"金银花"之名;至于"双花"也是由于花有两种颜色吧;金银花比较耐寒,所以叫"忍冬";至于"三宝花",应该是说它的功效吧,它的花.藤.根都可入药,有清热解毒 ,并且对一般性肺炎有很好的疗效,等等.</p> 10 </div>
1 body{ 2 margin:0 auto; 3 width: 1200px; 4 background-color: #cc9; 5 color: #333; 6 line-height:2em; 7 } 8 .d2{ 9 float: left; 10 margin-right: 20px; 11 }
5.clear属性：
要停止其后的文本围绕浮动元素流动，可以对第一个不想流动的元素设置clear属性。
both:向下移动盒子足够远，以便它不围绕浮动盒子流动。
left：向下移动盒子足够远，以便它不围绕左浮动盒子浮动。
right：向下移动盒子足够远，以便它不围绕右浮动盒子浮动。
none：不移动盒子，然它正常浮动（默认）。
inherit：使用包含盒子的clear值。
eg：
在上面例子的css代码中添加
.cl{
clear:left;
}
Html代码：<br class="cl">
css对齐