起初是遇到这样一个问题:当盒模型设为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. Mycat实战之连续分片

    1 按照日期(天)分片: 从开始日期算起,按照天数来分片 例如,从2017-11-01,每10天一个分片且可以指定结束日期 注意事项:需要提前将分片规划好,建好,否则有可能日期超出实际配置分片数 1. ...

  2. Properties & Method

    [Properties] 1.lazy property,通过@property来定义, lazy property的属性直到使用的时候才初始化: 2.Computed Properties: 2.对 ...

  3. NFA/DFA算法

    1.问题概述 随着计算机语言的结构越来越复杂,为了开发优秀的编译器,人们已经渐渐感到将词 法分析独立出来做研究的重要性.不过词法分析器的作用却不限于此.回想一下我们的老师刚刚开始向我们讲述程序设计的时 ...

  4. 【HDU6026】Deleting Edges

    题意 有一个n个节点的无向图,结点编号从0-n-1,每条边的长度时1to9的一个正整数.现在要删除一些边(或者不删),使得到的新图满足下面两个要求. 1.新图是一颗树有n-1条边2.对于每个结点v(0 ...

  5. POJ 3169 C - Layout

    题意 有n头奶牛从1到n编号,按照编号顺序站成一排,有可能有多头奶牛站在同一个坐标上.一些奶牛互相喜欢,所以他们的距离不能大于某个距离,一些奶牛互相讨厌,所以他们的距离不能小于某个距离,请计算如果可能 ...

  6. 507. Perfect Number 因数求和

    [抄题]: We define the Perfect Number is a positive integer that is equal to the sum of all its positiv ...

  7. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  8. 性能优化之_android内存

    优化内存使用主要是三个原则: CPU如何操纵特定的数据类型 数据和指令需要占用多少存储空间 数据在内存中的布局方式 处理大量数据时,使用可以满足要求的最小字节数据类型,能用short就不用int,能用 ...

  9. sklearn scoring . xgboost.train . ---> rsme

    http://scikit-learn.org/stable/modules/model_evaluation.html#scoring-parameter 3.3.1. The scoring pa ...

  10. 529A And Yet Another Bracket Sequence

    传送门 题目大意 给定有一个长度为n n的括号序列,现在有两种操作: 在任意一个位置插入有一个左括号或右括号 将末尾的一个括号放到最前面 可以对这个序列进行若干次操作,问在使括号序列合法的前提下,长度 ...