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 ...
随机推荐
- Python基础学习五 内置函数
1.函数补充: 1)函数返回值return可以有多个 2)补充示例: nums = [0,1,2,3,4,5,6,7,8] #如何将list里面的元素变为字符串类型 new_nums = [str(x ...
- iOS坑爹的could not find any information for class named xxx
关掉项目也无法解决,最后把文件delete掉,然后选“Remove Reference”,这样就不会真正删除文件.接着选“File -> Add Files to ...”添加回来就可以了.
- java基础之JDBC三:简单工具类的提取及应用
简单工具类: public class JDBCSimpleUtils { /** * 私有构造方法 */ private JDBCSimpleUtils() { } /** * 驱动 */ publ ...
- solr4.3+tomcat入门部署
solr4.3的入门配置 目前阿帕奇官方仅推荐2个比较稳定的版本一个是4.3的版本,一个3.6的版本 3.6的版本没有用过,所以在此无涉及,下面就来说说solr4.3的入门配置 s ...
- 解决nginx: [emerg] bind() to [::]:80 failed (98: Address already in use)
nginx先监听了ipv4的80端口之后又监听了ipv6的80端口,于是就重复占用了.更加坑人的是你去看了端口占用它又把80端口释放了,是不是很囧. 解决方案是编辑nginx的配置文件 修改这一段:
- SpringBoot20 集成SpringSecurity02 -> 利用SpringSecurity进行前后端分离的登录验证
1 SpirngBoot环境搭建 创建一个SpringBoot项目即可,详情参见三少的相关博文 参考博文 -> 点击前往 SpirngBoot项目脚手架 -> 点击前往 2 引入Spirn ...
- javac老提示无效的标记
加上-cp libs/*后,就开始提示无效的标记,搞了半天,似乎是shell展开的问题,估计是把后面的jar文件当源文件了? 加上引号就行了-cp "libs/*",不让shell ...
- jQuery--修改表单数据并提交
目的: 点击'编辑',弹出对话框,修改数据. 主要知识点: prevAll(),获取同级别本元素前面的所有元素. 代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
- CF547D Mike and Fish
欧拉回路,巧妙的解法. 发现每一个点$(x, y)$实际上是把横坐标和$x$和纵坐标$y$连一条线,然后代进去跑欧拉回路,这样里一条边对应了一个点,我们只要按照欧拉回路间隔染色即可. 注意到原图可能并 ...
- selenium使用ChromeDriver
什么是ChromeDriver? ChromeDriver是Chromium team开发维护的,它是实现WebDriver有线协议的一个单独的服务.ChromeDriver通过chrome的自动代理 ...