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. OpenCascade Shape Representation in OpenSceneGraph

    OpenCascade Shape Representation in OpenSceneGraph eryar@163.com 摘要Abstract:本文通过程序实例,将OpenCascade中的拓 ...

  2. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

  3. Android入门(十二)SQLite事务、升级数据库

    原文链接:http://www.orlion.ga/610/ 一.事务 SQLite支持事务,看一下Android如何使用事务:比如 Book表中的数据都已经很老了,现在准备全部废弃掉替换成新数据,可 ...

  4. 深入理解javascript函数系列第一篇——函数概述

    × 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...

  5. 算法与数据结构(2)--英雄会第三届在线编程大赛：几个bing

    基础知识的回顾不再写到这里面了,会写一些算法算法的解答或者读一些相关书籍的笔记. 今天做了一道算法题,来自微软必应·英雄会第三届在线编程大赛:几个bing? 做出来了...但不知道为啥执行测试用例失败 ...

  6. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  7. 小meta的大作用

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...

  8. 怎么让composer加速

    composer install 为什么这么慢? 下面是一个composer install(在没有composer cache的情况下)做的所有事情: [vagrant@localhost comp ...

  9. HT for Web自定义3D模型的WebGL应用

    有不少朋友询问<HTML5 Web 客户端五种离线存储方式汇总>文章例子的3D表计模型是如何生成的,这个例子是通过导入3dmax设计好的表计模型,然后通过obj格式导入到HT for We ...

  10. SpringIOC使用扩展

    在上篇博客中,我们使用Spring通过setter访问器实现了对属性的赋值,这种做法被称为设值注入.除此之外Spring还提供了通过构造方法赋值的能力,成为构造注入.下面我们通过一个小demo来了解如 ...