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. 【.Net底层剖析】3.用IL来理解属性

    .Net底层剖析目录章节 1.[深入浅出.Net IL]1.一个For循环引发的IL 2.[.Net底层剖析]2.stfld指令-给对象的字段赋值 3.[.Net底层剖析]3.用IL来理解属性 未完待 ...

  2. Cocos2d-x 3.2 学习笔记（九）EventDispatcher事件分发机制

    EventDispatcher事件分发机制先创建事件,注册到事件管理中心_eventDispatcher,通过发布事件得到响应进行回调,完成事件流. 有五种不同的事件机制:EventListenerT ...

  3. NodeJs连接Oracle数据库

    nodejs连接oracle数据库,各个平台的官方详情文档:https://github.com/oracle/node-oracledb/blob/master/INSTALL.md 我的nodej ...

  4. Java多线程系列--“JUC集合”01之 框架

    概要 之前,在"Java 集合系列目录(Category)"中,讲解了Java集合包中的各个类.接下来,将展开对JUC包中的集合进行学习.在学习之前,先温习一下"Java ...

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

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

  6. linux下查看进程占用端口和端口占用进程命令

    Linux下查看进程占用端口: 查看程序对应进程号:ps –ef|grep 进程名 REDHAT :查看进程号所占用的端口号:netstat –nltp|grep 进程号 ubuntu:查看进程占用端 ...

  7. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  8. 利用ListView的基本方法实现效果

    日常的开发工作经常需要ListView作为布局的组件,而且很多时候都会遇到需要自定义ListView的情况. 也有些问题并不需要自定义的ListView,基于原生的ListView就能实现,但需要灵活 ...

  9. SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程（支持单表或多表结查集分页）

    SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程,支持单表或多表结查集分页,存储过程如下: /******************/ --Author:梦在旅 ...

  10. Hive SQL 监控系统 - Hive Falcon

    1.概述 在开发工作当中,提交 Hadoop 任务,任务的运行详情,这是我们所关心的,当业务并不复杂的时候,我们可以使用 Hadoop 提供的命令工具去管理 YARN 中的任务.在编写 Hive SQ ...