1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

CSS 规避脱标之两种用法

作者:用户 来源:互联网 时间:2016-08-21 19:31:25

marginauto浮动元素自动右侧

CSS 规避脱标之两种用法 - 摘要: 本文讲的是CSS 规避脱标之两种用法, 大家好,我是小强老师,今天讲解一小点知识哈 对比了才知道什么好 看不出,很漂亮吧! 有木有倾国倾城的美色。 呵呵,好多东西也是这样的,好的东西只有对比

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

对比了才知道什么好

CSS 规避脱标之两种用法-现在进行时的两种用法

看不出,很漂亮吧!

CSS 规避脱标之两种用法-whose两种的用法

有木有倾国倾城的美色。

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

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

标准流 

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

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

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

    这里举两个简单例子:

   1. margin-left:auto;

   假如要做下面的例子:

     CSS 规避脱标之两种用法-七节骨的两种用法

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

    其实,我们可以用  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;

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

     CSS 规避脱标之两种用法-现在完成时的两种用法

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

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

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

      来看看淘宝的做法吧:

       CSS 规避脱标之两种用法-css important的用法



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索margin , auto , 浮动 , 元素 , 自动 右侧 现在进行时的两种用法、whose两种的用法、七节骨的两种用法、现在完成时的两种用法、css important的用法,以便于您获取更多的相关知识。

VB6.0中For语句的两种用法,如何用第二种用法遍历一个数组?

问题描述 VB6.0中For语句的两种用法,如何用第二种用法遍历一个数组? VB6.0中For语句的两种用法,如何用第二种用法遍历一个数组? 解决方案 正序 for i = lbound(arr...

ASP.NET 中文显示之两种解决方法_实用技巧

    方法一:  在翻阅了微软NGWS文档后发现在文档的常见问题部分有提到要添加一个config.web文件到web目录下,试了一下,中文显示果然OK了。  方法如下:  建立一个文件config.web,内容如下,放在WEB目录下  <configuration>  ...

HTML5教程-浮动流-李南江

...准流中的行内块级元素很像 定位流排版方式浮动元素的脱标什么是浮动元素的脱标? 脱标: 脱离标准流 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标浮动元素脱标之后会有...

SASS用法指南

...{     &:hover { color: #ffb3ff; }   } 3.4 注释 SASS共有两种注释风格。 标准的CSS注释 /* comment */ ,会保留到编译后的文件。 单行注释 // comment,只保留在SASS源文件中,编译后被省略。 在/*后面加一个感叹号,表示这是"重...

JQuery框架之两对小括号()()的理解

JQuery框架之两对小括号()()的理解,有需要的朋友可以参考下。 如果大家看jquery的sourcecode就知道一开始就有两对小括号, 是什么意思呢! 真的是比较困惑, 这么神奇的代码,什么意思啊? 我们先看看jQuery一开始是怎么写的: (function()...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备