一.width:auto和width:100%的区别

 
1.width:100%的作用是占满它的参考元素的宽度。（一般情况下参考元素 == 父级元素，这里写成参考元素而不是父级元素，在下面我会再细说）
2.width:auto也是以“占满参考元素宽度”为目标。但不同的地方在于，它能根据margin和padding的值动态地调整width的值。当参考元素的宽度一定时，子元素的margin或者padding多一点，那么子元素的width就会少一点。
 
说白了width:auto试图达成这一等式：子元素的width+padding（左和右）+margin（左和右） = 参考元素的的width(参考元素一般为父元素)
【举个例子】：
  1. <style type="text/css">
  2.     .outer{
  3.         width:200px;
  4.         height:100px;
  5.         border:1px solid black;
  6.         margin:20px;
  7.     }
  8.     .inner-100percent{
  9.         width: 100%;
  10.         height:100px;
  11.         background: darkcyan;
  12.     }
  13.     .inner-auto{
  14.         width:auto;
  15.         padding:0px 10px;
  16.         height:100px;
  17.         background:salmon;
  18.     }
  19. </style>
  1. <div class="outer">
  2.         <div class="inner-100percent"></div>
  3.     </div>
  4.     <div class="outer">
  5.         <div class="inner-auto"></div>
  6. </div>
demo:
 
看起来一样？其实不一样，我们用控制台的盒模型的检查器看一下：
 
在这里，10px的padding * 2 + width(auto) = 200px(参考元素的宽度)
 
我们再对上面CSS更改一下,将inner-auto的部分修改为：
  1. .inner-auto{
  2.         width:auto;
  3.         padding:0px 10px;//设置左右内边距为10px
  4.         margin:0px 10px;//设置左右外边距为10px
  5.         height:100px;
  6.         background:salmon;
  7.   }
demo:
10px的padding * 2 + 10px的margin*2 + width(auto) = 200px(参考元素的宽度)
 
【注意】：width:100%不会将自身的margin和padding包含计算在参考元素的width内，所以如果我们把inner-100percent的CSS部分改成：
  1. .inner-100percent{
  2.         width: 100%;
  3.         height:80px;
  4.         padding:0px 10px;
  5.         background: darkcyan;
  6.   }
 
demo将变成：
在设置width:100%后，子元素“溢出”了父元素
 
【注意】宽度默认为width:auto，但高度默认height:0
 
二.浮动/定位对width:auto和width:100%的影响
 
1.浮动/定位对width:100%的影响
浮动/定位是通过改变元素width的参考基准来影响width:100%的，有以下三点规律
 
1.1 默认情况下：以它的父级元素宽度为参考基准
这也就是我们上面看到的demo所展示的
 
1.2:子元素相对定位，仍然以它的父级元素宽度为参考基准
我们给inner-100percent的style加上相对定位
  1. .inner-100percent{
  2.    position:relative;
  3.    width: 100%;
  4.    height:100px;
  5.    background: darkcyan;
  6. }
 
demo:
证明毫无影响
 
1.3子元素绝对定位，则分两种情况讨论
 
 <1>默认情况下以body元素宽度为参考基准
我们把inner-100percent对应的style改成：
  1. .inner-100percent{
  2.    position:absolute;
  3.    width: 100%;
  4.    height:100px;
  5.    background: darkcyan;
  6. }
然后我们就会看到如下一个糟糕的场景，inner-100percent的宽度变成了body也就是全屏的宽度
 
那么当我们使用定位导致这种情况的时候应该怎么办呢？看下面：
 
 <2>若存在被定位的上层元素，则以距离最近的相对定位的元素宽度为基准：
我们给inner-100percent加上一个相对定位的父级元素：
  1. <div class="outer">
  2.       <div style="position:relative;">
  3.         <div class="inner-100percent"></div>
  4.       </div>
  5. </div>
demo:
于是又恢复正常了
 
1.4子元素浮动对width:100%无影响（这里不做展示）
 
2.浮动／定位对width:auto的影响
 
2.1默认情况下，width:auto占满一行
不做展示
2.2子元素相对定位，无影响，仍占满一行
不做展示
3.3子元素绝对定位，固定定位，浮动，width:auto等同于width:0
将上面的style改成：
  1. .inner-auto{
  2.         position:absolute;//或position:fixed;或float:left
  3.         width:auto;
  4.         height:100px;
  5.         background:salmon;
  6. }
此时对inner-auto

（注意inner-auto本来是有颜色的）

 
此时该div的宽度已被挤压为0了，从控制台上看inner-auto:
所以，当我们在绝对定位，固定定位，浮动时候，要记得给元素设宽度。
 
三.margin的"层叠现象"
 
  1. <style type="text/css">
  2.     *{margin: 0;padding: 0;}
  3.     .div{
  4.         width:100px;
  5.         height:50px;
  6.         margin: 10px;
  7.         border:1px solid black;
  8.     }
  9.     .div1{
  10.         background:seagreen;
  11.     }
  12.     .div2{
  13.         background: cornflowerblue;
  14.     }
  15.     .div3{
  16.         background: gold;
  17.     }
  18.     .div4{
  19.         background: lightcoral;
  20.     }
  21. </style>
  22. <body>
  23.     <div class="div div1">div1</div>
  24.     <div class="div div2">div2</div>
  25.     <div class="div div3">div3</div>
  26.     <div class="div div4">div4</div>
  27. </body>
 
demo:
 
上下两个div之间的距离为10px;嗯？为什么是10px呢，我们将4个div的margin都为10px,两个div的上下距离不应该是10px +10px = 20px吗？没错，在一般情况下（没有浮动，不是行内框），并排的div 的margin可以彼此重叠,而且重叠后值为两者中较大的那个
 
 
 
四.浮动将打破这种层叠关系，倘若我们给div1,dv2,div3加上浮动
  1. .div2,.div3,.div4{
  2.          float: left;
  3. }
 
demo:
间距变为20px，这时候margin已经不重叠了
 
五.浮动/定位对其他元素物理空间的影响
 
这首先要提到我们经常挂在耳边的一个词——“脱离文档流”
 
脱离文档流 == 不占据元素的空间（物理上）
  1. .div2,.div3{
  2.         float: left;
  3. }
 
demo:
 
 
其中float,position:absolute/fixed能够脱离文档流 ，而position:relative不能够脱离文档流
 
在这里，我们把脱离文档流的那一部分元素归为“浮动流”，而把没有脱离文档流的那一部分元素归为“标准流”，那么：
 
1.浮动流顺序排列，这个顺序是和HTML中元素的顺序一致的,HTMl中先浮动的元素排在前面，这个“前面”指的是靠近屏幕边缘的一端，“后面指的是远离屏幕的一端”
以上面的例子为基础
  1. .div1,.div2,.div3,.div4{
  2.         float: left;
  3. }

  1. .div1,.div2,.div3,.div4{
  2.        float: right;
  3. }

2.浮动流的起始位置由最先设置浮动的元素未浮动时的位置决定
 
我们再回到上述的例子，div2,div3,div4向左浮动的时候

浮动流的起始位置被最先设置浮动的元素原本的位置决定了。其他元素的只能跟在“领头浮动元素”的后面
 
但即使其他元素的没有跟在“领头元素”的后面，而是向相反方向浮动，也始终不能高于“领头浮动元素”
  1. .div2,.div3{
  2.      float: left;
  3. }
  4. .div4{
  5.      float:right;
  6. }

3.浮动流本身并不会影响标准流元素的定位,但是却影响着标准流文本的定位
 
如果我们仔细看一下五中开头的demo会发现一个难以忍受的bug:
"div4"这个文本不是被包裹在div4这个元素里面吗，为什么被浮动元素div2“怼”下来了？刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。浮动元素会影响文本的位置！
 
我们甚至可以无脑地推测，float的一开始设计的作用就是为了解决以下的这个问题——
让文本环绕一个图片，就像下面这个W3C的案例一样：

4.浮动流位居标准流之上(也就是说浮动流的元素会覆盖标准流的元素)
这个根据上面那个例子就可以看出来，这里就不多说了
 
六.实践案例
好，说了这么多，还是用以上的知识点来一个实践的案例比较痛快，下面这个案例是CSS布局方面的经典考题：两列布局，左边固定高宽，右边自适应：
  1. <style type="text/css">
  2.     *{margin: 0;padding: 0;}
  3.     .div{
  4.         border:1px solid black;
  5.         margin: 10px;
  6.     }
  7.     .left{
  8.         float: left;
  9.         width: 200px;
  10.         height:200px;
  11.         background:darkcyan
  12.     }
  13.     .right{
  14.         margin-left:230px;
  15.         height: 400px;
  16.     }
  17. </style>
  18. </head>
  19. <body>
  20.     <div class="div left">我是div1</div>
  21.     <div class="div right">我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2</div>
  22. </body>
demo:

 

【实现思路】：正如上面所说，浮动会脱离文档流从而不占据其他元素的物理位置,而我们让div1向左浮动了，这表示我们在考虑div2的布局的时候完全可以把div1当作不存在。那么这个时候又由于div2默认为width:auto;并且此时参考元素为body，那么设margin-left:230px;（略大于div1的宽度），那么由于width:auto会自动计算宽度，此时div2宽 = body宽度（全屏宽度）- 230px = 除去div1部分剩余的屏幕宽度，实现右栏自适应
其实啊，我只是把你们喝咖啡的时间，都用来喝啤酒而已
 
 
标签: 前端, css样式表

CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响的更多相关文章

  1. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  2. CSS 中浮动的使用

    float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动 <!DO ...

  3. css的浮动与定位

    显示与隐藏 标签 属性 值 效果 区别 css的style display none 元素不可见 不占页面空间 css的style visibility hidden 元素不可见 占页面空间 disp ...

  4. CSS的浮动和定位

    一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个 ...

  5. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  6. CSS中浮动的使用

    CSS有两个性质 第一个是 :继承性 第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁 { 里面分两种情况: 分别是 选中和没选中. 1.选不中的情况下,走继承性,(font,color,t ...

  7. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

  8. 关于css中浮动的理解及实际应用

    一.元素浮动的意义及使用:1. 浮动的意义:设置了浮动属性的元素会脱离普通标准流的控制,移动到其父元素中指定的位置的过程,将块级元素放在一行,浮动会脱离标准流,不占位置,会影响标准流,浮动只有左右浮动 ...

  9. 深入学习CSS中如何使用定位

    CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...

随机推荐

  1. 简单地总结几种常见web攻击手段及其防御方式

    web攻击手段有几种,本文简单介绍几种常见的攻击手段及其防御方式 XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS XSS 概念 全称是跨站脚本攻击(Cross Site Scr ...

  2. 如何用快速傅里叶变换实现DFT

    [目标]   如何以 \(O(N \log N)\) 的效率将系数多项式转换为点值多项式. [前置技能]   众所周知,\(x^n=1\)的根有n个,而且它们分别是\(e^{\frac{2*π*i}{ ...

  3. 怎么调试nodejs restful API 以及API的Authorization

    最近Nodejs,python越来越火了,同时也越来越多的人在用node写服务,可是怎么去调试服务呢?以及当你一个服务发布出去,怎么保证其安全性呢? 环境:linux unbuntu 语言:nodej ...

  4. DDD理论学习系列（11）-- 工厂

    DDD理论学习系列--案例及目录 1.引言 在针对大型的复杂领域进行建模时,聚合.实体和值对象之间的依赖关系可能会变得十分复杂.在某个对象中为了确保其依赖对象的有效实例被创建,需要深入了解对象实例化逻 ...

  5. Spring Boot 1.5.4集成Redis

    本文示例源码,请看这里: 如何安装与配置Redis,请看这里 首先添加起步依赖: <dependency> <groupId>org.springframework.boot& ...

  6. docker~docker-machine的介绍

    回到目录 国外的hub.ducker.com速度确实有些慢,还好,有咱们的阿里云,今天和大家聊聊通过添加docker-machine来改变docker的hub服务器,最终来加速咱们下载镜像的速度! 工 ...

  7. Java - 初始化

    用构造器保证初始化 构造器名称必须与类名完全相同,所以“每个方法首字母必须小写”的风格不适合构造器. 不接受任何参数的构造器叫做默认构造器.Java文档中通常叫做无参构造器. 构造器没有返回值,但与返 ...

  8. Java 操作jar包工具类以及如何快速修改Jar包里的文件内容

    需求背景:写了一个实时读取日志文件以及监控的小程序,打包成了Jar包可执行文件,通过我们的web主系统上传到各个服务器,然后调用ssh命令执行.每次上传前都要通过解压缩软件修改或者替换里面的配置文件, ...

  9. 1010: [HNOI2008]玩具装箱toy [dp][斜率优化]

    Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1... ...

  10. jenkins - jsp或其他web样式无法展示

    背景 因为jenkins安全性的问题,默认加载出来的报告是无css的,通过以下配置解决:HTML Publisher Plugin 插件在新的Jenkins版本中会导致打开的网页中无法加载CSS以及无 ...