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,iVBORw0KGgoAAAANSUhEUgAAAeEAAABsCAIAAADScZ3rAAAgAElEQVR4nO2deZRkZ1nwf+92b92q6uptJslkwmTBLCaREDCi4QMERSIoigsgn4gI8ikkCAEVNd+Bw1GBBJPAIaBiCIQsosZAIAtZICYkoCgYEsjOZJ/MvnZ3dd3l+f54763qnkSP3Yyf3ec8vzPnTHd11a3b88evnnneZ0EURVGUlQr/0zegKIqi/IeooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu/z2OrkqRUkSq0UOlSF5JWQ0fLEUqqUQKKSvJ4/Olij8o45PqJ1cLL1SKlNWCr+ufxocWvJ80DxSjh+u7UhRFWS0s2dHV/sqrrVeUUlZSiRjoWBIwBowFC3gPtvljvDVpim9hsRAgAQd4h0/q7ywEjMd4R+oIzvj6eqa+joMAHjLfcniD9wSDB29sUj/JBmyKCWA9JGBQFEVZPSzP0VXt6HxhZNo42qaQAAactS4AxhBScOBIOuOQdgjtKNoEPFgMIZAltUkteAgQPMHjHd5bFwVtWx6LgdR5Bw48eKzDJz4z9RXBWFzApRhvIFFHK4qy6liqo58ulF70I7DWWuuwBkwtRe/i19ZkXUwafLuDa0EdRy9wtCEQ42sLhGFk3XKZwbdSl7YdDkKCSSHgLIaOpWvr6NvgnQvEizuLswY8xFg7XldRFGV1sAxHy6JQuk4xV0VZDHIRwXh8C+eNwQHgXDAQQsCkJD1sK/FZB9qAaRIdBoM3pJBibIy4wRqsbwwbXAui1lNcRhjDBCxJZlNoQQADwSWGJiXiwNJkOVLI6hBbURRlVbAcPTdncdHR9aFclUs5kEpwCWGCpGsMXd+E0SaBFDeFnSBkBqbxHQBLEmLiwuNiNhljR4at9W091mF9u40LuC7JFKa2uU1JoAUJdFI8BN9cAQvD3EcGHXW0oiiriaXHz6VUUojkdTTdOLrsS9Uv8nlc+to/+vAmkS9+6bI2eAN4QwhuAta2xo7ctnPfticfP3KsNwFg8Skx/sWbaOuYM24yFPHlBovxpD1Cj6R33l9eVFUiUhZS9su5HdufPPIZU6klhbEETx1HO7zH+/qSGkcrirLaWGIUXUqVx9i5cXRT3JbPSDU7mJ/BZ6edec6jIjfd+HdjECBKFrrwjFb36J17923d9P3jpntTsX7DJQYcJNbVOQoTo2cwHlJPcARCi2ycbN0xL3v1PpH5/l7J+zIYFP25QmQ2l0oG137pgravA+p4nZQsjbGzoSkrURRFWT0sx9FVmYvM7+foqi/VrMiAtPeiM8+7V+T6L186DglYGx3dgw3diRM2bd2ybfN9x0xlE+CxxtaODsa6UXojkkGW4h0e1yWd/uFX/uajInPVbH/3w4d3kwnohRak19/y7b6IyBMfP//tHeg0F2nRSelCil0QoSuKoqwWlufop4mjq77kMyIDkrHnv+tj94pce81nJiGttehhHI5IO8ftndm1bdNdx02FSUjBmsRAYk00dRvq3IcL0DEmS2Mpnl/PxPHf+P7WOZGbrrlsHNp1Dtp7O46Zfu1bfi+Xffn8I6ccNTnZFFmndDxd6GA9JpZs/4/+cyuKoiyJH9DR0hR4FPP7RPr5YJbQe8F7/vp7Il++7rNT8bzOxyRDF47p9H5k645N25/8zvHTYRoyMFgD1uCcS0PSxvZcBh4bjM/AdgPGJvhnnnTaW3bP7Hvo7tsnDV1ouZiy9tChdQh+6twLL64kv+3zFx4MbfB4R2rIIMOooxVFWYUsz9GLe6yl6WfJRXJakz/+rgu+J3L9ly+ZhjSe3lmgA0eH1rG79m7ZseWOkw5pT0EK3rrgra1rMIIhs7QhNcYZS13AZzqkx5z7qaul/+ilH/jtOs1twfnEpIYU06V92A//5Bv2DGT73besgzFwBIzF2mEBtgpaUZRVxtIUXdd1PHUWRykiVVVVUhJ6L/yDT9wvIrJN8vuk2hsNXojM5dIvZV5mtj357ROnwhpIwRlrDcYYTLDZNH4SOsElHhKHg3awuB5hw9W3fkv69/z5G5/XMxgHxuJTg098hgm4g5j8yY07JH/833/iIMbAEGItnxsWc6ijFUVZXSwxjl7UDL4gss6rJvuB773k9z/2oIjIdskflGqfSCnS38/RP9wLh9S5DgAfUkyG7ZFOXf21r0u+R/LdUpX33nl3GxyebO1lN14vxX1nveGUxGASDMGTOWwrSV3w+DWMv/jBXTL3yB0nT9ABSGMTYxJz3LF6T0s7FEVZRSzZ0ftrupRyIFVeiMyLFCKkky9+x4cfELnu+rquw4B1sZDuaJedsGPvth2b7/yRqc4aaMXTQecwHtNLpo74+r0Pbh/sfc5JGzwkE+u27imKzY8esXac9vQVt90mgwfe8+undBOMw5E6Mm9DncRw40y+8LG+zD323ZOnopRrR7egBeAxqTpaUZTVxHIcLaOMh0gpxUCqfGYgfZG5vMJ3T3v3eQ+JXHvdZT1IIDiPAeMxx2bjz92848ntT9514kQ3Otrb2DEebLb+R089rcpnP37++7yDFnTWv+L035fi8TNffxph+i8uuUr6D//DuW+dhBakSQfbqeugswTXPemVZzwxkMfvvO2g2PtisjjNI1aAYKw6WlGUVcZyHb0wjs6lLAuRfimFCGH8Je885yGRa6+5eLyOlON5XQuOTdrP3jWzc8uTdx430T0YWrEg2ljnM+gZPxYnb+Agc6w9/rTT3yPlg5edcwZu/Dk//bqy6G9/6N9OWu/GAWy0sAsWY0m7H7roin0iN3/+s1PR0QQMBpo5fBaruQ5FUVYVS3TzqM+wEKkWTNmvyr5IX6TE9174hx+7X+RLV13YZJyDCx4zAc/K2j+2c8/mzZu/fcR0exI6sbQDDNalLYw1kLUSPCSe7KhzL7pS+vee9bpTWtCZOvHme/ZsE7npukvGIDWuLqqz1ob2W976toHMzRdbn/1DB401l22aYgKkzfTq/+l/cUVRlP86S3a0DETyvD4hjNtVYky9T6o9Ijmh9/x3f+Q+keu+eNHaYSIYa9wUnDg1+fytOx7ftu07R62baEMbMhjzqRvOUYpjo1OHD4wdvmNP+cS3rjnCMAEwffIvvGuTSCl7dm/+zjOm1zhSl7bx6VVX3ygiIls/dv7v9zytUYdLDKg70K2HNKmjFUVZRSzL0cMellwkb5IesyJ7RUpC98Xv+vBGka/c8Lexk9AYhwE6cGyve/K2nU9u23HPMw9b04IJa7L6XNE7n7gsM6GFCdiMrPdPX79tdu+2U45aPx7j4mQKu/6kl/zyrMyV1Q4pSsklL6qByHwhIuX1N17uLS2ICZMmQo9v3dE4WlGU1cfSHT3KdcgCR8dcR1EU+M4r//CcjSJXX/WZeGZoDFhCaww2tNJjduzaunnLPevW9NIm1xHqvVcpJsWm2BZkN9xwU3920+lvefVkCCm2ZT0mwfSwXTyf/PRfyWAgAxGRQuS++zcC1tFK60q7BJJYTgKQQVrH6epoRVFWEUt0tIyG+i92tEheyaASwWWkaxlbkwbqhkCDjeP3WevDoRicIzF1LiKBTtImDsZLpkkn8e1bvnyj9Pe+7c2vagUc1puuw1sCNsH6OCDJY7KQgMU47+tW78TjDYmpV2c1u1dCPfpOBa0oyupiqYZe3MLSOLqSvCzi45iUdByfuqZso15CGIAujA+nj3oIsWEQIODWYKZ//BWv296vZGb38w6fHk8xdY94FsgcPs6R9iEDH7fQZmk7/iK+qZNOkziWw8bFLqZexqUoirIKWZ6jY0C90NFFKTEBggkkGdZ618zoN7gQu/zieKMAJME58BjvDODSNkxka45/cJ/sKeWPfutXnmFIaV5onCdNTCuuvXJYjzfGWRcM1hlrwFmALMuAJPHNqsQMUrNot6KiKMrqYblBdDnaC16VUkklkldSiBibWGsNJKEeM5cEE8/rjLPYFIJ1KRC8tQYgySwG6H30wi/sEOmLSH+L9B+XaraSsqjmr732Wk8IpDGL4bHd0I0z+70NDkKI/rXgrXfNRP8AHcjqPkTVtKIoq44fwNF5021YOzrG0cY436x/pU44sOC8zhIXyw57ScxwQUoXJnBdjG9DL05cYvSs+q96O62P35p4MGjqxYnEteIGjDpaUZTVz5IcLf+Ro0WkkrKSQoSm9A2I0hxtKVzk6Fqyw+3dkEEXEzD1Ju90VOC88OW+njVaP1w7GhPfLq1X1sbuczpxzUDjaG0yVBRlVbFUR8vCXEcj7NjGUlVSidDo1dQ+DSMdwyJHm/0cHer5dMTZGvV16hrn+jne1I9Zam/XuWbM8Ap28edBGH5AqKMVRVllLMPRo2g6nhYOvy6r6Ogm1/G0jgbComK4oaONr9eIA9ZirYtrXIaOdkAwpGZBncZTHB1YoOThGzU217WziqKsKpbu51Ka1POwRroQkbKUohApY47Y4honN1o0w3TwgnzFsPevzlQ0C1PiGSPeYevqvbpGxEPq8KMESHNxGF6BBY/YxV+roxVFWVUsPX4uRco4ryMyH78uc8nnRfI6ejXJ6ICuiWoXHNnZOsId9WcPxe2HB4yGYAgMf+iIh5Ae74YqX3QI6Ecx+9OcD9qFiWxFUZRVwJKD6Crfz9H92tEDyedEBhgwKbZlhg0six3dmHNBXqI+WvRNX4tvnm8NHmMXODoWRwe3QOV16N2EyYtSHYu+8epoRVFWGcuJo6sm1yFS1XF0KdVAiiaONh4TnuroiK9LLNJ6hoYhngS6eoF3ivE0+edR3Z4DG7sT47bvFBZedpj4tvt/HiwqKfELPT5iwXPM4p/Gb5+eRVe2TsfqKYpywFliHC2xFHrBd2Uhg0L6heSDqoy1dwHaFldHwVjf1MYZD6FdT33OLGM2SbGEEAxpYI3jIPwYPvHYFrQ93tAKwyNBEkISS/TIYjd5EhtWaNVldjYh9VgMIaatjVmochv7yDtJO/o0JKZOdnt85uKrOs4kTerc4VObxNGpLgGLD2DiAkaLheCwwdg0xXYw7un/mRVFUZbFUsPoYQRdl0VLKTKomonSg0oMdEy9fsX4DJdgTQi4WLlhklg9bUkgYKwLNhi8acFawiHfvvOuvJiLpX1XXfmppNlGGB3rST0dyGJFXQzJO+0EAjZztoUJuNjaGDzeL4zlocmDBwPOErwFQuqx9YBUQ2iHbr0cwAI2De1hxV7cWBv7JzHgvEliHib1IctwicbRiqIcWJbq6Pl6t+ywEVykEClFKunPlyJlsMSR0DiD97gUE2KyGRsw1kEWS5wTWq0kqRteAlNHPlrIzI4Hjj4khc4LXvbLhfTv+s6tbegOVVtvVKmzHjis9RBiLtpjPA5rY8LDL0w+jFIiKaZ5vrcG600r1vx10iSJmW4PniS11lp8zI9bDMZZa63HBoxfoGM3SniopBVFOaAs1dG5yLyUxWigUjNLqajTIBhvbIpxNnZlJ21IE0iNwWWE4DzONY0shpa1bWMx/pfe8cebRf7PG35uHEjHCRPnXXLhXLn7uesPXhelbxekgN2w8DpAl7SLJbMk4Jqk9CidXSeafX0saWzdZm6AFKYMa2JwnZiWAxyhjYm2tSkuw3ZIeuAdTATXgpbDxjSJMw5MzHUnRh2tKMqBZEmOljoBXRYi9UbwYhAnSpeFFJXsHQjjRz6Uy6a+nPH6X1xT70MJ49FdrYMu+9rtIg9fcP5boi1tZprzQE/o4uosM9YzNvbHn71wt+Tv/bVffCa0GZ0c1hmM+NRWG9ODDS956avzfXd/4tw3ORujXm+aQ0YsYA2pIzjqKDwEh7WYnkmenXRO2T4jewZFvxSR/vlnv3XM0wJvWthJ/CE/9rI3bp6VwbxIMSv9h2++6i+NBYt1WGtjoO2zoIJWFOUAs0RFlyJlJWU1dHTZr6f+lzIoZE4Ev+5V7/7gDpHBlgdPHGesHo1k8d0PX3zlHpGH77+hR5Rl02HoLcFjg007IaTgsR2ysUtv/+pO2fOiw6c2xHyIiXNK680A4DEpNsNOubGTN28rRb534fm/ltUVfYGYtQgxZK4dHYPvdrAG67NxzPRJL3jzjr4MSqligbeIlJtuuPKCsXpD+Zrn/Mwbts7JfPzt+zNFvllky8YHv+EN3hCCw3hC6+kqshVFUX4wluroSspK8qqeqZRLUdZjSkuZm5NcBNvDTX/+K/88P5h55P5v9lycQDf9v1715t07d8meJ19w9Lq45zCtFeqdGzVwBwNk2A2nvvyN/Zkdt1x/eTIaWWcNHUPm67FNqWfCtTbQPerJgcxUuci/X/zh/92CxIc6y+GHaWlr8LHSo+Wdqw8tp3Dr/uHWO2ZEPnP+WZMAnWzN8Y/uLCvJ3/Omn+4BfurK2x6QUh785j9nBPzYCT//moeKUuYe+79v+rl4mJl2WxiMw2rttaIoB5YlOjqOt8vrZHQ8MyxFCikHIpXMDwTTwo51127YMlfuK/sf+dCZ7Qy6h9563zbJ9/3xr718bTN3NDYaJiQOb7CdrG2whhQmyI6763tbBw/fd+xELJEDEyume4ZezDUn9BwHf+QTV+4W2Szy6I4npPzniz/4q2tSHI2jncXb6HiDdfi4cjzzxmBhis7hX3v48R3V7hccFdZD5iZhwzkXXT8n8ukPvnkKWHvUA3Oy+9HvnbTGpICdYuzY9332Gim2X/6Bt4/Vs0QCPjiL10haUZQDy1IdHaPpKOjRZKVSiqbv0EDmUshec/r/3SUiM9uee+z6q2+9fVbk9qsuPwQ69cTR4G0KJD44gifNTNfQg/Xj7eMfuONh2Tf74iPWrYV2ExCnjkAwpNYFfBvWpb0TNs/IkwNZ86yXnf/JC0Vuv+zsV/Qg0DF0oYMLJPViLgMBb2k7fDOZL8Wvuf2xbdtk/oVHtTeAJ2DWfvCv/r4QueTs352AZ73y9Q+J3P2v16y3pIDt0Tr+hJf+pszufPyb149DwL/mne/bJvLVqz83WSdhFEVRDhBL9nP11G7DcuRrERvn1/kufv0/3HyPlLJt471Szu58/P6jJmwPpnttsJYkcfUqQod1No71n07chsfv3Sk7Z37iGYeuhYPiqaPDW7wlgdTGPbMpYR3uIHxGe5LsmI98+nIpbr3ivF/ogKFjWJOkh93xwCMzIvOSVzIQGcTbllKk3PHlz3+mZS22d9Zf/f0ukU+d/d6DYno8G7/voYeqwY5Tjwgd+Jnffe/DIrfcdNEUZBb8BOaEsPYn9uzYWu64//jJbob91d/5g60iX7n2ijHdnKgoyoFlyYJuss/R0blILrO57OvLXByAByEkLUyGeYaZOOmJ3VLMDmTfw+9//UvGLDZOu7NkIfHYduhYHAbSlOzQ1777/SL5no33nDi1dhLGCCnOW1enOywGWtZ2jPWAT/GexBIyus/84CcvkvKbnzv7VWMGZ3qwJqQb7rh/05xILmUlA5G+SL+qZqXcLeWWW7/0mQQIk9gTPnfjY1KKzO0SGYjslZl7Tz02W2dx+Fee+dFHRK699oJxg6+XxTyH9JRde7dtfexfjuu2Dope9pakRdLSeSCKohxIlu9oqR1dSL+Q2UIGs/lcWUmSdsCS9LCH4Y/+4k33SCEys/GlR5rENLOjLQ7a3juTWJNgIUuPeNlr7y8lL7Y979iJMRh3qSN1rgPeBB+LQAykMAadOCAj1myMTdBaf/ZFF0t1x+Uf+JUUIIMpmMZM4NvUy1rqT4hWSgfakFigF6Z/7NE9cdRqvnfvVpHdIo9d8Genj0Pqx37mjHMfEbnu+gsmQ+Noc2qn9+LNuzbv2fHdE8c7h0KXWAiY4rM4bERRFOXAsDRH12eGdXKjnn4XxV0nqQce2sZi2mQbzvrEVZKL7BMpdt75b1/sdusqC+No6qDBWdIEn/791+/cLlLJnMj2QbmlkH4h0u/Lxz/+qeGk6cTRgmmYMvXEf2PBBTrrz774Mpn91hXn/mZiwCXQgymYwo4R9wUYTN3lTRpIPIS1hEPv3vhIXsz+7m+9LoMWJCZc9dWvz4t84gPv8fCz7zznIZFrrvnolKFtMYzDjxKet3nn9t3b7jk2y9YAeBJff2AoiqIcQJYq6ELyQvJK8tjJUkhd1yGlSN4XGRiAgO3+yM//+lYRGchLTjp5856dczL4yHnvaVmMBUPi4jhohwuYQGsc38Gn1mAMdCAA3tDGtE990U/1y/lCBiK5yF4ZPHThOe9KLUDqLC4wdsQHPn2p5Pdd+dHfCbHeznRDa9137t08Hz9FpIzdN/1qMCj3iWy/9vovYA97wzs/0J/ffMsNF8W2x4OzFqQn/exvbSrkkbu+3rG8/Pc+/IjIzTd8KpajOCbh2W7Ni7bt3bpz03eevWZ6LQkmwVsswWldh6IoB5QlhtFlJYNKBk2rYXNQWFfglZUItkP7EDrrvvHd+0UGH/3zd7Q9rz7jT7aKyNyW5x2eTqd11XLmUk/asr04sg4wdcmHxVqMTSEjYLNTX/FLuyuZE9mVl5XMimz863NOzywOmwChRXb4n170d1JuvPD9rzFxYa1thdbBd967qY70m83llchgfkbmn/jCtVfQPfoVb3ufyJM3f/F8B845D9iE6ZMfnpW9Dz94xMTEcS8942GR73/rq0fCJECX1gnP/Pk3zVabH/i3f5yCsdiXHoLH6GxSRVEOMEt1dAyYi9FYpabmbiBSyUwhhClaB/3Z31wikt//719pG3wAv/6KWzZKmT9x183j0K3nPfsWrYSOt+MQEuphTIaAaWGSVj2bKRAyXAeXkXYIpIZ2XWHtWoBtkR519iVfkHLjpX/xhtrRJna6xARGsCYBb2wCwRp6sZI53fDKM98/X235ypf/BsCExIEzz37FbzyZy+yjG39ozVrWPv97u2TP4xufNck4QEbnyNPedZbIlm/e8NexjtBYH2dF6dw7RVEOMEtTdFVXdMSx0ZX0RfrxwTyXvJJZEcLE69/6jpl8Tsodzz1mOqv7Og7Npp776IzsKfZ+5vw/WNPUETuCIY1z/eMAPA/DjSrNUKQ4EMMP58+5UechHjAp7WM+9Ol/lPK+S89/o7fNggBbDwUZziONjS3e+zYkeOyUOfiHHp+f21POv+W33xZnmWK56tab5iX/xjV/1wb8YX97y70i5SPf/dcEMPaU0169oxSRLaf/xk+1HRhP6BIyY2hpRlpRlAPLD+boWZG+SCmlDAqZyWVGhGxqTz4QmX3r614+FgfCYRMOg8N+6ffeu0tEZu5/wVEhIfb+eQi4gK37SpbkOAOpB5uQHPmnn7hUinsvOvdNDjA+jlKKWebYEj5aLG5oERJS/Diu+5q3vXuPSL8f61QGIv1C9j36xHePXpuMWXDd1779T3YOYiV4LlIORETk+3f8U10N3Wq//O1nPSFyy1f/UeujFUU5wCzN0bIwt5tX0hcZRHFXlcyL7Knk6lu+MS9y5ZWXd2DCY22clTEdkqPoHvq5G6+X8slN3742xtEm7q+yAeP90nMFzTquQOsZ51x4ucijF513hgOcj4NME0gW7Dl04J0BjImFe5lrr8F0s6n1e+bK2UEpUlZl/4brrmz7Op1iHPj2s176ml0i86VI2RcZ3H3nv0wZJqHtIISfPvNDj4h87cbPrak/EhRFUQ4Qy3Z0NRohLVLVA5V2zgshwxI8a9q0IKQxXu4ZezB+Au87MN7Em/VWWQLGx2q8peZzvTM+6+KnSDqt5gQPa6KjPdY3m8JNM800OI+1hBZkkBnakGGD7XbqNhloQWZxscLPBpKDCeuwWSzeSyxj0IsZmxCYPOGsi6++/spP1v3iiqIoB4olO1pGBRL1EWLTdjhfyLwIPkQ/ptAyYHFpYkgNXWyHJE1h3NU5DVOH0iFuQlnmgZvx+A5pmkKndnR9LUNqCPU71ZOYSHzAO7zHZt60E9LEtGhlBIcla9WfImmzKyC0x2iNE7rWtTwk1jjoQMfigHab9jNve2jvBeeepfM6FEU5wCxP0MWCaUrxT1XETVplXPlqbb0mxbU8Bm+DwYf2BMaHBfGyIa6mDfXQo6VL2vsE40lS327FU8dstAzFQrZg+3gdIxvAw1gbgiOkBI/H1SeMBtpxpYCJrncYX0+2cyGxzjRpEwchtSTpj77s1f/07fsSGPd6ZqgoygFleYLe39F1k8igkDwmFFywBrx1GBtzwL7JPhtsktThZiO7YGL9xXL2AVrnE7yL54+jHVgQi7DrFHHzkINutx0z0/Xab4KvA2aDxZp6Gy7W0OxYabfb8efOAt6HrN4LbgIm4KyxZMnCt1YURTkQ/EBB9MjRdSN4If2kM4yIPSZgwzCsTrCeEAuWh4GtAz909NIl53wSxxjFvYIOGwweU6e56znVo7i9HsPvY0egddjUhDr4NWDwzhgIIcV4fIp31sanuebu6gR6k9EOzuHibkOvA5UURTmgLN3R5VMTHVKVIoP5+d0i/Tj3zVjvfMwz+LjgKga5Hg8dTDasdPbg4zZYu/RDw2Z7S7Nh1hqswzb5k7QuqR5WxA1X1i7eXruw4Lr5WcySW1+/OIV0tMc2riA3ITo6vnJ5Z56Koij/GctztMhTEh1lPw7/LMo5kbIsZW5QtyEWUorMiuyTYiCF5CJ9kVykimvFyzoyz6XM6y1cS7ofqaSUspSyeeEwRb5fZkZKkUEledXUoiz4U0pVSpXHVw5fJSJSzkrVz0Xm67fM9+ssr+rfUaQaSNWXpdy/oijKf85ych1PyURL3SBezpXFXFX2RcqiqAqRuWLo6L7IbHR0UQ0dPRjNYxIpluXoPM7hK8vo1EpGN1aJxNWL+WgXwWDUv/5URzd2rxY6uuhL1Z8XmVuY4amGt1BWIvWm2mog1b5Rc7yiKMoPzHLqOkYeLIcRZTmQ+bn5fXERbdGfFxkG0bUrRQZS5NHR88PdKGVt6+jsdBAAAALJSURBVKoZqrfUm8mlLKQJxuPC8tGNxcC5bKy82NHDX6bc/7eqmk8jEZFyINUgxtG1o4fzsyX+lpKLFFUMsTWOVhTlQLK8fYYLgugqxr9ljGdn981IKVJUVVHOl1W+KO4spcpjR2IuMi+DQvr1moBRnLsMR0c5x1xHOQx1qxiny0CknI+Zilqj+aJ3qRbd4tC/i257/webbMlwanYliqIo/x0sy9HNJNKoxVzKeSl3zO2Ls6SrftFs0ir71WAYk1ZSb0GUSgqReenXjh7Ukfji+PS/eiMjR1f5YkcPKpmVahDbt/v1bTeO3j8fPbxkFH05HLna3HkuVd7kQMpquBA9fvDIYJghURRFOYAsqxc8JhaKqKd8vpFgPe8/F5krpCrnitmYXx6ld2OioIrdLrOFzMYUSExZiJS1xJdyL815XR51HB1diRQyW8leKQdSyZzInDSfK8P+9VGipnFrXeVdFjF/IqUsPg8cpk0KEZGBVP3mU6ccXkpRFOUAsty94OUwdM3zJpkwM18sOAMsK8lzGVT7HcFJbeFc+lWT6xjF0Ut3dDFydL7Y0X2RfbEMY5TrqD9Gyv/Y0bLI0aPd5wORfiV5MXJ0X2R2+D8D2S8cVxRFORAsNx+94JBt/4TBgtzusEjjqf6qhq5sBLfgr6XfyFPyJM3Ip7LJTS++iQVfP929PfWJ5X6/rGaiFUX5/8ByHa0oiqL896OOVhRFWbmooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu6mhFUZSVizpaURRl5aKOVhRFWbmooxVFUVYu/w9oIAeO2F/XZAAAAABJRU5ErkJggg==" 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 Modeling Algorithms Fillets and Chamfers

    Modeling Algorithms Fillets and Chamfers 造型算法——倒圆与倒角 eryar@163.com 一.倒圆Fillet Constructor 1． BRepFil ...

  2. Android入门(十三)内容提供器

    原文链接:http://www.orlion.ga/612/ 内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一 ...

  3. 深入理解PHP内核(五)函数的内部结构

    php的函数包括用户定义的函数.内部函数(print_r count...).匿名函数.变量函数($func = 'print_r'; $func(array('a','b'));) PHP内核源码中 ...

  4. JSP网站开发基础总结《九》

    本篇属于附加篇,在之前的总结中给大家提到过一个关于登录状态验证的效果,当时是通过Session对象完成的,今天我查了一下,JSP为我们封装了一个用于过滤用的过滤器类Filter,通过它我们就可以非常轻 ...

  5. Angularjs中link函数参数含义小节

    restrictE: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>A: 表示该directive仅能以attribu ...

  6. Oracle Dataguard之switchover

    Oracle Dataguard的角色转换包含两类:Switchover和Failover.Switchover指主备之间角色转换,主库降为备库,备库升级为主库.而failover则是指主库出现问题时 ...

  7. Android Studio项目转Eclipse项目

    Android Studio项目的目录结构和Eclipse项目不同.如何转换? 以FloatingAction 项目为例:实现向上滑动隐藏悬浮按钮,向上滑动显示悬浮按钮. GitHub 地址:http ...

  8. PHP类和对象函数实例详解

    1. interface_exists.class_exists.method_exists和property_exists: 顾名思义,从以上几个函数的命名便可以猜出几分他们的功能.我想这也是我随着 ...

  9. java中复制对象通过反射或序列化

    在使用缓存读取数据后修改发现缓存被修改.于是找了下复制对象的方法. 关于对象克隆 按我的理解,对象是包含引用+数据.通常变量复制都是将引用传递过去.比如: Person p1 = new Person ...

  10. 使用redis和fastjson做应用和mysql之间的缓存

    第一次做这种javaweb的项目,难免还是要犯很多错误. 大概也知道,redis常常被用来做应用和mysql之间的缓存.模型大概是这样子的. 为了让redis能够缓存mysql数据库中的数据,我写了很 ...