【转】CSS 规避脱标之两种用法

       我们知道我们网页布局 有三模式。   普通流 normal flow （标准流、常规流）    浮动（float）    和  定位 （position） 

标准流 

       标准流实际上就是一个网页内标签元素正常排列的顺序的意思；比如块级元素（例如：div，p，h1，ul，li，form等）会独占一行，行内元素（例如：br，a，img，select，input等）会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局；

这种布局，我们还是比较喜欢的，因为他是默认的布局模式，稳定， 浮动和 定位毕竟是脱标的。会带来很多不方便。

因此，我们有些地方能用 标准流还是 可以避免用 浮动和 定位  ，我们称之为规避脱标。

       

       这里举两个简单例子：

         1. margin-left：auto；

         假如要做下面的例子：

  　　

　　     

　　    

　　  想要蓝色的小方块 到  红色盒子的右侧。  除了浮动和 定位

        其实，我们可以用  margin-left：auto 就可以把蓝色小方块移动到右侧。

        代码如下：

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
  .father{width:350px;height:45px; border:1px solid red; margin:100px auto;}
  .son{width:15px;height:15px; background-color:#00F; margin-left:auto; margin-top:15px; margin-right:5px;}

</style>
</head>

<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

 

        就可以了。  auto  自动的意思， margin-left：auto   左侧外边距自动 充满  这样，把盒子挤到右侧了。同时大家也明白了，以前我们写 margin: 0 auto;  为什么可以使块级有宽度和盒子居中对齐。   分开看，就是 margin -left：auto；margin-right：auto ; 当然上下margin 为0；  左侧自动充满， 右侧也自动充满， 盒子 保证左侧有 自动，右侧也有自动，就在中间了。

         当然了，这个元素只能是块级元素  并且左侧不能用其他元素了。这是使用的限制。但是如果遇到了这种情况，我们知道有这种写法就好了。

　　　

         2. vertical-align：middle;

         大家看下面的案例怎么做？

         注意红色方块， 必须要有大小的，因为以后要填写背景图片的。

         因为后面还有文字，再同一行上，你可能想到浮动或者定位。

         其实这里我们用 行内块 +  vertical-align：middle 更合适，因为没有脱标，用的标准流。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0}
h2{width:240px;  margin:100px auto; border:1px solid red; font-size:14px; line-height:35px;}
h2 s{ 
display:inline-block;width:15px; 
height:15px; 
background-color:#930; 
vertical-align:middle;
margin:-3px 5px 0;
}
</style>
</head>

<body>
<h2><s></s>我的标题</h2>
</body>
</html>

       行内块 +  vertical-align  可是两个好基友哦，他们一起使用非常的方便。两者同时出现，vertical-align的本质上是个独立的个体，与后面的line水平的元素是不存在直接的关 系的。 可以随意的移动这个红色方块上下位置而不会引起 文字的移动。

      来看看淘宝的做法吧：

-------------------------------------------------------------------我是强大的分割线---------------------------------------------------------------------------

                                                                                                      【本文转自小强老师的博客】http://www.cnblogs.com/xiaoqiang001/p/4726910.html

 

posted on 2015-08-17 23:47  矿泉水  阅读(363)  评论(0)    收藏  举报

导航