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 篇
领域:运维 网站 游戏 搜索 嵌入式 C/S软件 Openstack二次开发 绿色版:Portable Python 面向对象.解释型动态语言 env python 切换版也好使,自己寻找系统中pyt ...
- 斯坦福CS229机器学习课程笔记 Part1:线性回归 Linear Regression
机器学习三要素 机器学习的三要素为:模型.策略.算法. 模型:就是所要学习的条件概率分布或决策函数.线性回归模型 策略:按照什么样的准则学习或选择最优的模型.最小化均方误差,即所谓的 least-sq ...
- Physics Material
[Physics Material] 1. The Physics Material is used to adjust friction and bouncing effects of collid ...
- 【原创】3. MYSQL++ Query类型与SQL语句执行过程(非template与SSQLS版本)
我们可以通过使用mysqlpp:: Query来进行SQL语句的增删改查. 首先来看一下mysqlpp::Query的一些最简单的调用, conn.connect(mysqlpp::examples: ...
- 相关度算法BM25
BM25算法,通常用来作搜索相关性平分.一句话概况其主要思想:对Query进行语素解析,生成语素qi:然后,对于每个搜索结果D,计算每个语素qi与D的相关性得分,最后,将qi相对于D的相关性得分进行加 ...
- CSS 内容生成
原文地址:http://www.zhangxinxu.com/wordpress/?p=739 一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在CSS2 ...
- 面试题:MySQL性能调优——索引详解与索引的优化 没用
——索引优化,可以说是数据库相关优化.理解尤其是查询优化中最常用的优化手段之一.所以,只有深入索引的实现原理.存储方式.不同索引间区别,才能设计或使用最优的索引,最大幅度的提升查询效率! 一.BTre ...
- Java EE的十三个规范
J2EE想必大家都不陌生吧,貌似现在更流行将其称作JavaEE,不管名字怎么变,核心和思想是没有变的.学习J2EE首先要了解它的规范,下面我们一起看看它的十三个规范. 1,JDBC(Java Data ...
- tensor 维度 问题。
tf.argmax takes two arguments: input and dimension. example: tf.argmx(arr, dimension = 1). or tf.arg ...
- Spring Boot 启动失败,描述/Description: Cannot determine embedded database driver class for database type NONE
异常截图====> 快速解决方式==> 在SpringBoot的启动类上面添加注解:@EnableAutoConfiguration(exclude={DataSourceAutoConf ...