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

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

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

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

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

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

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

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

 

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

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

  1. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  2. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  3. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

  4. c/c++再学习：C++中public、protect、private的访问权限控制

    C++中public.protect.private的访问权限控制 访问权限 一个类的public成员变量.成员函数,可以通过类的成员函数.类的实例变量进行访问 一个类的protected成员变量.成 ...

  5. ReactNative学习之css样式使用

    前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...

  6. 如何从零开始学习DIV+CSS

    CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...

  7. HTML 学习笔记 CSS样式（外边框 外边框合并）

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  8. 前端学习 -- Html&Css -- 表格

    表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单.在网页中也可以来创建出不同的表格. 在HTML中,使用table ...

  9. Web学习之CSS总结

    银角大王武Sir的博客地址 1.positoin属性固定元素的定位类型 说明:这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而无论该元素是什么类型.相 ...

随机推荐

  1. javaScript绑定事件委托 demo

    事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...

  2. 快乐Node码农的十个习惯 转

    从问世到现在将近20年,JavaScript一直缺乏其它有吸引力的编程语言,比如Python和Ruby,的很多优点:命令行界面,REPL,包管理器,以及组织良好的开源社区.感谢Node.js和npm, ...

  3. 对Golang有兴趣的朋友，推荐一款go语言Web框架-dotweb

    Go语言,2009年推出,对我个人,2015年下半年,才下定决心正式开始引入使用Go,自此,让我获得了一种全新的开发体验. 在不断的项目过程中,一个开发人员总喜欢堆积一些代码段,由于Go的开源特性,逐 ...

  4. Lvs+keepalived+mysql主从热备

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...

  5. Adobe 系列软件通用破解方式（animate cc,Photoshop cc,Flash cc）等

    破解之前准备工作: ①:安装好 试用版的 Adobe软件 ②:下载好破解软件: amtemu.v0.9.2-painter,下载地址:链接:http://pan.baidu.com/s/1nvNR74 ...

  6. WPF之路五：wpf 隐藏与显示 Visibility

    WPF里枚举变量Visibility 有三个值:Visible, Collapsed和Hidden.其中Collapsed是WPF新引进的,其作用是不仅隐去Control,同时也会移除Control所 ...

  7. android Instrumentoation 问答

    android Instrumentoation 问答   1.instrumentation是执行application instrumentation代码的基类.当应用程序运行的时候instrum ...

  8. Xmpp实现简单聊天系列 --- ②用户注册和登陆

    不管是注册还是登陆,亦或是聊天等功能,都必须先进行服务器连接,连接代码如下 ①自定义Xmpp连接工具类:     ②调用创建连接的方法:     ③连接服务器方法:       *注意 连接方式为客服 ...

  9. 9.Linux系统引导流程

    一.Linux系统引导流程 当我们按下主机电源键的那时候开始,主板上的CMOS/BIOS模块将进行固件自检,以此检查各个硬件是否正确连接. 在Linux引导流程中,一般可以分为以下几个主要过程: 1. ...

  10. ServerSuperIO 3.5版本的体系结构，以及未来规划的几点思考

    一.特点 1.轻型高性能通信框架,适用于多种应用场,轮询模式.自控模式.并发模式和单例模式. 2.不仅是通讯框架,是设备驱动.IO通道.控制模式场景的协调机制. 3.支持协议驱动器,可以按规范写标准协 ...