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 ...
随机推荐
- Biorhythms(中国剩余定理(模板题))
Description Some people believe that there are three cycles in a person's life that start the day he ...
- Spring Cloud Zuul 1(API 网关服务)
API网关是一个更为智能的应用服务器,它的存在就像是整个微服架构系统的门面一样,所有的外部客户端访问都需要经过它来进行调度和过滤. 它实现的功能包括:请求路由.负载均衡.校验过滤等功能. Spring ...
- bash shell笔记2 结构化命令
二.使用结构化命令 知识内容: # 改变命令流 # 使用if-then逻辑 # 嵌套if-then # 测试条件 # 高级if-then功能 许多程序在脚本命令之间需要某些逻辑控制流,有些命令允许脚本 ...
- 第一篇 UCOS介绍
第一篇 UCOS介绍 这个大家都知道.呵呵.考虑到咱们学习的完整性还是在这里唠叨一下.让大家再熟悉一下.高手们忍耐一下吧! uC/OS II(Micro Control Operation Syste ...
- random和os模块
一.random模块 常用方法如下: #-*- coding:utf-8 -*- import random print(random.randint(1,100)) # 获取一个范围内的随机数,包含 ...
- centos7 安装erlang rabbitMQ
环境: 虚拟机 centos7 minimal 一.安装Erlang 1.安装依赖 yum install build-essential openssl openssl-devel unixODBC ...
- 专利系统数据库连接出现 base-64字符串中的无效字符 错误
错误提示如图: 解决方法: 1.进注册表修改如下 2.进入系统配置页面http://10.10.0.70/eaf/init 对数据库进行重新配置 3.若不行再将如下密码修改一下 重启IIS生效
- 616. Add Bold Tag in String加粗字符串
[抄题]: Given a string s and a list of strings dict, you need to add a closed pair of bold tag <b&g ...
- 新浪SAE高级开发者认证通过
如题,新浪SAE高级开发者认证通过,申请的方式为提交开源项目地址,用的是如下的项目 http://jqext.sinaapp.com/ 之前该项目是部署在 mopaas 上的,在拿到高级开发者资格后迁 ...
- Android中如何区分界面组件创建和销毁的类型
本文主要描述: 1.分辨系统杀掉退出还是用户主动退出2.分辨全新的创建还是系统恢复性的创建 1.分辨系统杀掉退出还是用户主动退出 当一个组件失去焦点后,系统有可能为了释放资源而杀掉这个组件,这个时候系 ...