您的位置：首页 > Web前端 > CSS

CSS 规避脱标之两种用法

2015-08-13 12:07 555 查看

大家好，我是小强老师，今天讲解一小点知识哈

对比了才知道什么好

看不出，很漂亮吧！

有木有倾国倾城的美色。

呵呵，好多东西也是这样的，好的东西只有对比了才觉得好。

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

标准流

标准流实际上就是一个网页内标签元素正常排列的顺序的意思；比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局；

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

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

这里举两个简单例子：

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水平的元素是不存在直接的关系的。可以随意的移动这个红色方块上下位置而不会引起文字的移动。

来看看淘宝的做法吧：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航