CSS_对齐

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

2016-10-25

《css入门经典》第15章

1.text-align属性：

块属性内部的文本对齐方式。该属性只对块盒子有意义，内联盒子的内容没有对齐方式。（注意：只是盒子内部的内容对齐，而不是块盒子本身。）

center:内容居中；

justify：文本两端对齐；

left：内容左对齐；

right:内容右对齐；

inherit：使用包含盒子的text-align的值；

注意：当采用两端对齐的文本，让左边和右边都对齐。浏览器通过在单词和字母之间添加额外的空白实现这种效果。

如果两端对齐段落的最后一行本身太短而不能填充整行，它通常是左对齐。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对齐与文本缩进</title>
<style type="text/css">
body{
margin:0 auto;
width: 700px;
}
p{
border: 1px solid pink;
padding: 1.5em;
}
p#a{text-align: left;}
p#b{text-align: justify;}
p#c{text-align: right;}
p#d{text-align: center;}
</style>
</head>
<body>
<p id="a">
吴雨霏，1986年6月9日生于中国香港。香港歌手及演员，组合Cookies成员之一。
2002年正式出道，16岁以Cookies成员身份在十大中文金曲、叱咤乐坛流行榜颁奖典礼等颁奖礼上获奖[1] 。2004年担任摇滚乐队Ping Pung的主唱[2] 。
2006年参演《恋爱初歌》。2007年的歌曲《逼得太紧》获专业推介叱咤十大第八位。
</p>
<p id="b">
吴雨霏，1986年6月9日生于中国香港。香港歌手及演员，组合Cookies成员之一。
2002年正式出道，16岁以Cookies成员身份在十大中文金曲、叱咤乐坛流行榜颁奖典礼等颁奖礼上获奖[1] 。2004年担任摇滚乐队Ping Pung的主唱[2] 。
2006年参演《恋爱初歌》。2007年的歌曲《逼得太紧》获专业推介叱咤十大第八位。
</p>
<p id="c">
吴雨霏，1986年6月9日生于中国香港。香港歌手及演员，组合Cookies成员之一。
2002年正式出道，16岁以Cookies成员身份在十大中文金曲、叱咤乐坛流行榜颁奖典礼等颁奖礼上获奖[1] 。2004年担任摇滚乐队Ping Pung的主唱[2] 。
2006年参演《恋爱初歌》。2007年的歌曲《逼得太紧》获专业推介叱咤十大第八位。
</p>
<p id="d">
吴雨霏，1986年6月9日生于中国香港。香港歌手及演员，组合Cookies成员之一。
2002年正式出道，16岁以Cookies成员身份在十大中文金曲、叱咤乐坛流行榜颁奖典礼等颁奖礼上获奖[1] 。2004年担任摇滚乐队Ping Pung的主唱[2] 。
2006年参演《恋爱初歌》。2007年的歌曲《逼得太紧》获专业推介叱咤十大第八位。
</p>
</body>
</html>

效果图：

2.text-indent属性：

缩进块元素的第一行。（应用于内联元素标签，没有效果。）

属性值：

大小：设置缩进；

负的大小：设置悬挂缩进；

百分比：设置基于包含盒子值的缩进；

inherit：使用包含盒子的text-indent值；

p#a{text-indent: 2em;}
p#b{text-indent: 50%;}
p#c{text-indent: 20px;}
p#d{text-indent: -5em;
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：

.xiabiao{
vertical-align: sub;
font-size: smaller;
}
.shangbiao{
vertical-align: super;
font-size: smaller;
}

aaarticlea/png;base64,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" alt="" />

4.float属性：

left：盒子移动到左边，文本围绕右边流动。

none:盒子不移动，文本不围绕它流动。

right:盒子移动到右边，文本围绕左边流动。

inherit：使用包含盒子的float。

注意：当盒子移动时，它定位在它的包含盒子的内容部分的内部。浮动盒子保持在它的包含盒子的边距，边框和填充之内，它只是适当地移动到左边或是右边。任何其后的内容放在浮动盒子的旁边。

eg:

<div class="d1">
<h1>忍冬花</h1>
<p>金银花(《唐本草》)，银花(《温病条辨》)，鹭鸶花(《植物名实图考》)，苏花(《药材资料汇编》)，金花(《江苏植药志》)，金藤花(《河北药材》)，双花(《中药材手册》)，双苞花(《浙江民间草药》)，二花(《陕西中药志》)，二宝花(《江苏验方草药选编》)。 </p>
<div class="d2">
<img src="忍冬花.jpg" alt="忍冬">
</div>
<p>“金银花，善于化毒，故治痈疽、肿毒、疮癣、杨梅、风湿诸毒，诚为要药。”著名的“银翘解毒丸”即是以此为主药。现代药理实验证明，金银花对于上呼吸道感染、流行性感冒、扁桃体炎、急性阑尾炎、丹毒、外伤感染等，均有较明显的疗效。民间也有盛夏以其沏茶，解热散暑，开胃宽中之习俗。</p>
<p>金银花适应性强，生长迅速，牵藤挂蔓，可铺展数十米。夏天能以清香散解暑热之烦躁；冬日，又能用一片翠碧驱除寂寞萧索，为庭院绿化和营造绿色长廊之佳木。</p>
<p>因为金银花开的时候有两种颜色:金黄色和白色,所以就有"金银花"之名;至于"双花"也是由于花有两种颜色吧;金银花比较耐寒,所以叫"忍冬";至于"三宝花",应该是说它的功效吧,它的花.藤.根都可入药,有清热解毒 ,并且对一般性肺炎有很好的疗效,等等.</p>
</div>

body{
margin:0 auto;
width: 1200px;
background-color: #cc9;
color: #333;
line-height:2em;
}
.d2{
float: left;
margin-right: 20px;
}