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：

 <p>

         H <span class="xiabiao">2</span>O

         <br>

         X <span class="shangbiao">2</span>-1=80;

     </p>
 .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;

     }

5.clear属性：

要停止其后的文本围绕浮动元素流动，可以对第一个不想流动的元素设置clear属性。

both:向下移动盒子足够远，以便它不围绕浮动盒子流动。

left：向下移动盒子足够远，以便它不围绕左浮动盒子浮动。

right：向下移动盒子足够远，以便它不围绕右浮动盒子浮动。

none：不移动盒子，然它正常浮动（默认）。

inherit：使用包含盒子的clear值。

eg：

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

.cl{

clear:left;

}

Html代码：<br class="cl">

css对齐的更多相关文章

  1. css对齐方案总结

    css对齐方案总结 垂直居中 通用布局方式(内敛元素和块状元素都适用) 利用flex:核心代码: 12345 .container{ display:flex; flex-direction:colu ...

  2. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式！

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  3. CSS 对齐方式

    居中设置 Center Align - Using margin Setting the width of a block-level element will prevent it from str ...

  4. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  5. HTML+CSS提升小实战

    1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html ...

  6. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  7. CSS 高级

    1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内 ...

  8. checkbox/input文本框与文字对齐

    3种方法都能实现checkbox文本框或radio文本框与文字对齐: <meta charset="utf-8"> <input style="vert ...

  9. 3.CSS使用基础(2)

    目录 一.CSS 链接 二.CSS 列表样式(ul) 三.CSS Table(表格) 四.盒子模型 五.CSS Border(边框) 六.CSS 轮廓(outline)属性 七.CSS Margin( ...

随机推荐

  1. Xdebug 配置

    到官网 http://www.xdebug.com/download.php 下载 找到对应PHP版本的 Xdebug ,后面带 TS 的为线程安全,本机环境为 win7 64 + php-5.5.1 ...

  2. (扩展欧几里德算法)zzuoj 10402: C.机器人

    10402: C.机器人 Description Dr. Kong 设计的机器人卡尔非常活泼,既能原地蹦,又能跳远.由于受软硬件设计所限,机器人卡尔只能定点跳远.若机器人站在(X,Y)位置,它可以原地 ...

  3. Java多线程系列--“JUC线程池”04之 线程池原理(三)

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3509960.html 本章介绍线程池的生命周期.在"Java多线程系列--“基础篇”01之 基 ...

  4. Javascript定时器(一)——单线程

    一.JavaScript 引擎是单线程的 可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了. <script type=&quo ...

  5. 测试servlet学习笔记

    操作方法: 1.新建工程: File——>new——>Java Project——>TestServlet(工程名称)——>Finish. 2.加载servlet-api.ja ...

  6. java设计模式学习（-）

    在我目前看来博客的作用就是笔记了,所谓的原创也仅仅是复制了别人的东西实践了一下,但为了学习记忆确实要记录下来.在这里感谢网络各处的资源,原谅我对资源的索取. 接下来每天开始学以则设计模式或者几天学一则 ...

  7. [Core] .NET Core & VS Code 之路(1) Hello World

    目录 相关链接 dotnet命令 VS Code Hello World Web Hello World 总结 其实本篇上个月已经写好, 只是 但是,不忘初心方得始终 相关链接 Learn .NET ...

  8. js限制文本框只可以输入数字

    封装了一下,要用的话直接调用下面getEvent函数即可   function getEvent() { if (document.all) { return window.event; //for ...

  9. 使用CSS3对链接颜色与下划线进行优化

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. 【原创】Kakfa message包源代码分析

    笔者最近在研究Kafka的message包代码,有了一些心得,特此记录一下.其实研究的目的从来都不是只是看源代码,更多地是想借这个机会思考几个问题:为什么是这么实现的?你自己实现方式是什么?比起人家的 ...