起初是遇到这样一个问题:当盒模型设为box-sizing:border-box;(移动端上经常这么干)。子盒子的width:100%,子盒子的width等于父盒子contend的长度还是condend+padding+border的长度?

css和html:

  

结果:

(second的width)=(first的contend的长度)

接下来总结正常情况(box-sizing:contend- box)下width:100%的基准:

1.标准流中:子盒子处于标准流中,其width等于上一级父盒子的width(父盒子无论是浮动还是定位)

2.浮动的情况:子盒子浮动,同上

3.定位的情况:子盒子定位(position:relative或absolute),其width等于上层盒子中  最近的   position不为static的那个的width。

子盒子为position:fixed时,width以html为基准。

 

width:100%以什么为基准的测试的更多相关文章

  1. style="width:100px" 和width=100 异同

    异: 1.width属性不是每个元素都支持的,一般就table和body支持. 2.style="width: 100px"是CSS样式. 2.1.CSS样式有多种方式设置,直接写 ...

  2. width:100%;与width:auto;的区别

    <div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...

  3. css width="100" style ="width:100px" 区别

    1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...

  4. width:100% 和 max-width:100%; 有区别吗【转藏】

    这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...

  5. width:100%缩小窗口时背景图片出现空白bug

    页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...

  6. width:auto; 和 width:100%;的不同

    width:auto:会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小.width:100%:会强制将元素变成和父元素一样的宽,并且添加额外 ...

  7. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  8. miniui中可以设置是否让页面进行分页 <div id="datagrid1" class="mini-datagrid" style="width:100%" allowAlternating="true" showpager="true"/> 就是设置showpager属性为true

    <div id="datagrid1" class="mini-datagrid" style="width:100%" allowA ...

  9. input 设置 width:100% 和padding后宽度超出父节点

    input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...

随机推荐

  1. java使用POST发送soap报文请求webservice返回500错误解析

    本文使用JAX-WS2.2编译webservice,并使用HttpUrlConnection的POST方式对wsdl发送soap报文进行请求返回数据, 对错误Server returned HTTP ...

  2. saltstack系列(五)——zmq扩展(一)

    问题 假设我们的一个客户端既有pull又有sub,他们两个都需要接收消息,该如何协调呢,毕竟,当一个socket要收消息的时候,函数recv是阻塞的,所以,我们第一个思路是不让它阻塞? 实例代码: # ...

  3. 使用递归函数,输出n个元素的所有子集

    题目描述: 请编写一个递归函数,用来输出n个元素的所有子集.例如,三个元素{a,b,c}的所有子集是:{},{a},{b},{c},{a,c},{ac},{b,c},{a,b,c}. 解题思路: 根据 ...

  4. 1-new对象与直接构建对象

    #include <iostream> using namespace std; class A { public: A(){} A (int a){ this->a = a; } ...

  5. 如何撤回经由Outlook2016刚发出的邮件

    在Outlook2016中,刚发出了一封邮件,发现有问题,想撤回,如何处理? 在对方尚未查看和接收时,可撤回. 参考步骤 1.选中这封邮件,用鼠标双击打开 2.点Move旁边的下拉按钮 3.点击&qu ...

  6. javac老提示无效的标记

    加上-cp libs/*后,就开始提示无效的标记,搞了半天,似乎是shell展开的问题,估计是把后面的jar文件当源文件了? 加上引号就行了-cp "libs/*",不让shell ...

  7. codefirst 关系处理

    1.http://www.cnblogs.com/libingql/archive/2013/01/31/2888201.html 2.多对多 protected override void OnMo ...

  8. [GO]将随机生成的四位数字拆分后放到一个切片里

    package main import ( "math/rand" "time" "fmt" ) func InitData(p *int) ...

  9. Hadoop安装所遇问题及解决方法

    1.错误:java.io.IOException: File /hadoop/hadooptmp/mapred/system/jobtracker.info could only be replica ...

  10. 【转】SSH指南

    OpenSSH OpenSSH 是 SSH (Secure SHell) 协议的免费开源实现.它用安全.加密的网络连接工具代替了 telnet.ftp. rlogin.rsh 和 rcp 工具.Ope ...