width:100%;与width:auto;的区别
<div>
<p>1111</p> </div> div{
width:980px;
background-color: #ccc;
height:300px;
}
p{
width:100%;
/*width:auto;*/
padding:10px;
background-color:#000;
}
如果是p的width:100%,则说明p的width会得到980px就已经充满div区域,然后自己又有padding,所以会超出div。
而当width:auto时它是总体宽度(包括width,margin,padding,border)等于父级宽度(width,不包含父级的margin,padding,border),所以如果padding已经左右占去10px的空间,那么width给的值就是960px。
但无论是width:100%还是auto,其计算的参照都是父级内容区width值,而非总宽度值.
width:100%;与width:auto;的区别的更多相关文章
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- css height:100%和height:auto的区别
css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
- width:100%和width:auto区别
在div父元素是body时 1.先看没有width限制的div <div style="border:1px solid red; margin-left:50px; margin-r ...
- css width="100" style ="width:100px" 区别
1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...
- width:100%和width:inherit
前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...
- width:auto 和 width:100%有什么区别
width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...
- css中width:auto和width:100%的区别是什么
width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...
- CSS width:100%和width:auto的区别
width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...
随机推荐
- BZOJ1800 [Ahoi2009]fly 飞行棋
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- 2.7我们的第一个Java程序
最后,让我们正式编一个程序(注释⑤).它能打印出与当前运行的系统有关的资料,并利用了来自Java标准库的System对象的多种方法.注意这里引入了一种额外的注释样式:“//”.它表示到本行结束前的所有 ...
- CSS之列表标签
1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,"无序列表"的意思. li 就是英语list ...
- Linux学习之CentOS(二十)--CentOS6.4下修改MySQL编码方法
但是当我们在试图对数据库中的数据进行备份或者将sql文件导入到我们的数据库时可能就会碰到编码的问题,在windows下安装mysql时我们可以在安装的时候就选择好整个数据库的编码方式(通常设置成utf ...
- [Android]快捷键
小技巧,快捷键 快捷键创建资源: Windows下是 alt+enter; Mac下是Option+enter 创建构造函数,Get/Set:Command+N,Windows环境中Alt + Ins ...
- python 生成器等语法
生成器 调用生成器函数,不会执行生成器函数中的代码,而是返回一个对象, 这个对象是生成器(可用type()函数判断这个对象类型), 如果要运行生成器函数中的代码, 需要调用 next()方法, ...
- 关于LESS
LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单. 翻译成大白话:写CSS算是体力活,并没有编程的感觉,不给前端人员装逼的机会,于是就搞了这玩意,相当于编程写C ...
- svn 版本迁移到 git 仓库
1.拉取 svn代码并转成 git 版本 git svn fetch http://svn.qtz.com/svn/qtz_code/java/qtz_sm/project/qtz_sm -Auser ...
- synchronized使用说明
好久没有更新博客了,今天试着用简单的语言把synchronized的使用说清楚. synchronized是什么? synchronized是用来保证在多线程环境下代码同步执行的可重入的互斥锁.所谓互 ...
- web加密的基本概念
1.需求 了解web加密的一些基础概念. 2.基本概念 a.对称加密方式 对称加密方式 加密和解密用同一个密钥 不足之处是,交易双方都使用同样钥匙,安全性得不到保证.此外,每对用户每次使用对称加密算法 ...