内联盒子的始末并未对齐格局,只是盒子内部的内容对齐

none:盒子不活动,文本不围绕它流动。

 

专注:当使用双边对齐的公文,让左侧和右边都对齐。浏览器通过在单词和字母之间添加额外的空域完成那种效应。

text-top:与周围文本的底端对齐

2.text-indent属性:

Html代码:<br class=”cl”>

inherit:使用带有盒子的float。

justify:文本两端对齐;

(2)百分比基于line-height,平时等于font-size值。

baseline:与周围文本对齐

4.float属性:

right:向下活动盒子充分远,以便它不围绕右浮动盒子浮动。

inherit:使用带有盒子的text-align的值;

 

right:向下活动盒子丰裕远,以便它不围绕右浮动盒子浮动。

 

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

 

比例:上升line-height的百分比

1.text-align属性:

super:上涨到上标水平

right:内容右对齐;

图片 2

负的大小:下跌到四周文本的底下

《css入门经典》第15章

图片 3

比例:设置基于包含盒子值的缩进;

负的轻重:设置悬挂缩进;

inherit:使用含有盒子的clear值。

left:内容左对齐;

inherit:使用含有盒子的text-indent值;

 

4.float属性:

效果图:图片 4

属性值:

3.vertical-align属性:调整内联盒子内部的垂直对齐形式。可以使文本比所在行其余文本更高照旧更低,适合创造上标或是下标。

middle:与周围文本的中线对齐

text-top:与周围文本的底端对齐

图片 5

 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>

要适可而止未来的文书围绕转变元素流动,能够对首个不想流动的因素设置clear属性。

left:盒子移动到左边,文本围绕左侧流动。

缩进块元素的第一行。(应用于内联元素标签,没有成效。)

大大小小:设置缩进;

负的尺寸:下落到四周文本的上边

eg:

高低:上涨到四周文本的方面

图片 6

(2)百分比基于line-height,经常等于font-size值。

text-bottom:与周围文本的底端对齐

注意:

sub:下降到下标水平

留神:当使用双边对齐的文书,让右边和右手都对齐。浏览器通过在单词和字母之间添加额外的空域落成那种效应。

top:顶端和行的上方对齐

(4)vertical-align的浏览器完毕是各差别的。最平时使用的是sub,super,大小和比例。

justify:文本两端对齐;

 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>

middle:与周围文本的中线对齐

属性值:

eg:

eg:

图片 7

left:向下活动盒子丰盛远,以便它不围绕左浮动盒子浮动。

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

        clear:left;

图片 8

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

eg:

 

属性值:

负的轻重:设置悬挂缩进;

baseline:与周围文本对齐

 

center:内容居中;

留意:除了表格单元格,只有内联元素拔取vertical-align属性。

2016-10-25

假使两端对齐段落的最后一行本身太短而无法填充整行,它一般是左对齐。

块属性内部的文书对齐格局。该属性只对块盒子有意义,内联盒子的内容并未对齐情势。(注意:只是盒子内部的情节对齐,而不是块盒子本身。)

 

1 <p>
2         H 2O
3         <br>
4         X 2-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     }

 

.cl{

负的比例:下落line-height的比例

bottom:底端和行底端对齐

3.vertical-align属性:调整内联盒子内部的垂直对齐情势。可以使文本比所在行其他文本更高仍旧更低,适合成立上标或是下标。

none:不运动盒子,然它正常浮动(默许)。

图片 9

缩进块元素的第一行。(应用于内联元素标签,没有出力。)

 

 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     }

(2)text-indent没有none值,text-indent只好动用大小(或者inhrit)作为值。要设置缩进为“none”,使用text-indent:0;

 

块属性内部的文本对齐形式。该属性只对块盒子有含义,内联盒子的始末没有对齐格局。(注意:只是盒子内部的内容对齐,而不是块盒子本身。)

 

inherit:使用带有盒子的float。

(3)top,bottom值是指所在行的参天和压低部分对齐,而text-top和text-bottom只是基于包罗盒子的font-size值。

(1)middle将文件的中线和高与周围文本基线0.5ex的冲天对齐,ex等于小写字母高度的测量单位,常常大概是font-size的一半。

 

eg:

(1)设置悬挂,即首先行实际不缩进,但是其余行文本缩进,可以设置text-indent为一负值,不过它将越出元素盒子的左侧,那就是意味可能是不可知的,或者可能改写其余的情节。可以透过给盒子添加边距解决这一难题。如上p#d{}里的代码。

top:顶端和行的顶端对齐

 

    }

注意:

1.text-align属性:

left:向下活动盒子足够远,以便它不围绕左浮动盒子浮动。

 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>

5.clear属性:

eg:

比方两端对齐段落的末段一行本身太短而不可能填充整行,它一般是左对齐。

 

inherit:使用含有盒子的clear值。

大大小小:设置缩进;

both:向下移动盒子丰硕远,以便它不围绕转变盒子流动。

效果图:图片 10

比例:上升line-height的百分比

right:内容右对齐;

 

 

《css入门经典》第15章

1 <p>
2         H 2O
3         <br>
4         X 2-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     }

注意:除了表格单元格,唯有内联元素采取vertical-align属性。

在上头例子的css代码中添加

 

注意:

 

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;}

    }

.cl{

(2)text-indent没有none值,text-indent只好采纳大小(或者inhrit)作为值。要安装缩进为“none”,使用text-indent:0;

2.text-indent属性:

inherit:使用带有盒子的text-indent值;

(1)设置悬挂,即首先行实际不缩进,可是其余行文本缩进,可以安装text-indent为一负值,但是它将越出元素盒子的左手,那就是意味可能是不可知的,或者可能改写其余的始末。可以通过给盒子添加边距解决这一标题。如上p#d{}里的代码。

 

5.clear属性:

属性值:

right:盒子移动到右手,文本围绕左侧流动。

(4)vertical-align的浏览器达成是各分歧的。最日常利用的是sub,super,大小和比重。

 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     }

 

left:盒子移动到左边,文本围绕左侧流动。

 

 

 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>

left:内容左对齐;

(1)middle将文件的中线和高与周围文本基线0.5ex的莫大对齐,ex等于小写字母中度的测量单位,平日大约是font-size的一半。

 

在上边例子的css代码中添加

inherit:使用带有盒子的text-align的值;

负的比例:下落line-height的比例

留神
:当盒子移动时,它一定在它的蕴藏盒子的内容部分的里边。浮动盒子保持在它的盈盈盒子的边距,边框和填充之内,它只是适当地移动到左手或是左侧。任何其后的情节放在浮动盒子的一旁。

比例:设置基于包蕴盒子值的缩进;

eg:

super:上升到上标水平

both:向下活动盒子丰硕远,以便它不围绕转变盒子流动。

专注
:当盒子移动时,它一定在它的包罗盒子的情节部分的其中。浮动盒子保持在它的含有盒子的边距,边框和填充之内,它只是适量地移动到右侧或是右侧。任何其后的情节放在浮动盒子的一旁。

2016-10-25

        clear:left;

center:内容居中;

要适可而止未来的文书围绕转变元素流动,可以对第三个不想流动的因素设置clear属性。

(3)top,bottom值是指所在行的参天和最低部分对齐,而text-top和text-bottom只是基于蕴含盒子的font-size值。

大小:回升到四周文本的地点

none:不移动盒子,然它正常浮动(默许)。

eg:

bottom:底端和行底端对齐

注意:

sub:下降到下标水平

Html代码:<br class=”cl”>

text-bottom:与周围文本的底端对齐

相关文章