width:100%以什么为基准的测试
起初是遇到这样一个问题:当盒模型设为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%以什么为基准的测试的更多相关文章
- style="width:100px" 和width=100 异同
异: 1.width属性不是每个元素都支持的,一般就table和body支持. 2.style="width: 100px"是CSS样式. 2.1.CSS样式有多种方式设置,直接写 ...
- width:100%;与width:auto;的区别
<div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...
- css width="100" style ="width:100px" 区别
1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...
- width:100% 和 max-width:100%; 有区别吗【转藏】
这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...
- width:100%缩小窗口时背景图片出现空白bug
页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...
- width:auto; 和 width:100%;的不同
width:auto:会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小.width:100%:会强制将元素变成和父元素一样的宽,并且添加额外 ...
- css中width:auto和width:100%的区别是什么
width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...
- 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 ...
- input 设置 width:100% 和padding后宽度超出父节点
input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...
随机推荐
- java之yield(),sleep(),wait()区别详解-备忘笔记(转)
1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...
- 非root配置linux下vim
在机子目录下建立 .vim文件夹 例如 /home/xxx/.vim 在~文件夹下建立.vimrc文件 这是你自己配置文件 vim虽然启用了格式化高亮.行号显示,以及括号匹配.自动缩进等编辑功能,对于 ...
- android样式相关
转载自Keegan小钢,原文链接http://keeganlee.me/post/android/20150830
- PyGrub
from:https://wiki.debian.org/PyGrub Using pyGRUB on Wheezy to boot a domU kernel Using pyGRUB from x ...
- Luogu 4784 [BalticOI 2016 Day2]城市
斯坦纳树复习,我暑假的时候好像写过[JLOI2015]管道连接来着. 设$f_{i, s}$表示以$i$为根,$k$个重要点的连通状态为$s$,($0$代表没有连进最小生成树里面去,$1$代表连进了最 ...
- Django框架 之 querySet详解
Django框架 之 querySet详解 浏览目录 可切片 可迭代 惰性查询 缓存机制 exists()与iterator()方法 QuerySet 可切片 使用Python 的切片语法来限制查询集 ...
- Nhibernate HQL 匿名类(严格说是map的使用以及构造函数的使用
1.map的使用 var hql=string.Format(@"select new map( tc.LimitIndexType as LimitIndexType, tc.LimitS ...
- float在内存中的存取方法
今天做了一些题目,想到float数据如何在内存中的形式.不知道一个浮点数是如何存成32位01字符串的.下面是查找的一些资料. 我们先通过java获取这些数的二进制表示. public class De ...
- 通过批处理操作注册表实现winform应用中Webbrowser以指定的IE版本加载网页
通过批处理操作注册表实现winform应用中Webbrowser以指定的IE版本加载网页 rem 强制WebBrowser控件使用指定IE版本显示应用的网页 IF EXIST %windir%\Sys ...
- 《the art of software testing》第六章
更高级别的测试 模块测试的目的是发现程序模块与其接口规格说明之间的不一致 功能测试的目的是为了证明程序未能符合其外部规格说明 系统测试目的是为了证明软件产品与其初始目标不一致 功能测试,作者从三个方面 ...