CSS width：100%和width：auto的区别
width：100%和width：auto的区别
width:auto比较聪明，如果margin已经左右占去10px的空间，那么width给的值就是580px。
<style>
div{
width:600px;
overflow:auto;
background:#ccc;
} p{
width:auto;
margin:10px;
background:red;
}
</style>
</head>
<body> <div>
<p>123</p>
</div> </body>
</html>
如果是width:100%，则说明p的width会得到600px就已经充满div区域，然后自己又有margin，所以会出现滚动条。
div{
width:600px;
overflow:auto;
background:#ccc;
}
p{
width:100%;
margin:10px;
background:red;
}
</style>
</head>
<body>
<div>
<p>123</p>
</div>
都是以父元素的宽度为参照。
CSS width：100%和width：auto的区别的更多相关文章
- css height:100%和height:auto的区别
css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
- 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%和width:auto区别
在div父元素是body时 1.先看没有width限制的div <div style="border:1px solid red; margin-left:50px; margin-r ...
- width:100%和width:inherit
前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...
- css中width:auto和width:100%的区别是什么
width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...
- width:auto 和 width:100%有什么区别
width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...
随机推荐
- 分布式缓存系统热点key解决方案
1. 读访问量高(万级别及以上),读访问远大于写访问 这种情况典型的业务场景之一就是存储配置信息,配置信息一般数据量较小,更新频率低,但读访问量高.这种场景有两种方法优化: a. 对同一个key存储多 ...
- Linux日常使用指令大全
Linux日常使用指令大全 Java代码 www.ahlinux.com 001.日常维护常用查询命令 #top 显示系统进程 #clear 清理屏幕信息 #cat /etc/redhat-r ...
- number-of-boomerangs
https://leetcode.com/problems/number-of-boomerangs/ package com.company; import java.util.*; class S ...
- 【转载】两军问题与Paxos算法 & 动画讲解Paxos算法
http://harry.me/blog/2014/12/27/neat-algorithms-paxos/ 这篇文章里面有用JS写的Paxos过程,有助理解.但是没怎么仔细看,没时间. 这篇文章用两 ...
- 使用spring @Scheduled注解执行定时任务
以前框架使用quartz框架执行定时调度问题. 老大说这配置太麻烦.每个调度都需要多加在spring的配置中. 能不能减少配置的量从而提高开发效率. 最近看了看spring的 scheduled的使用 ...
- SQL多表联合分页.....
set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go /* 支持多表查询分页存储过程(事理改进)2012.3 --多表联查1 declare @Count int ...
- .NET 实现异步处理的集中方式
对于异步,相信大家都不十分陌生.准确点来说就是方法执行后立即返回,待到执行完毕会进行通知.就是当一个任务在执行的时候,尤其是需要耗费很长的时间进行处理的任务,如果利用单线程进行操作的话,势必造成界面的 ...
- 用Visio画UML用例图
1.用例图 用例图描述参与者所理解的系统功能.主要元素是用例和参与者. 用例图的4个基本组件:参与者(Actor).用例(Use Case).关系(Relationship)和系统. 下面以银行储蓄系 ...
- A1377. 楼房重建
题目:http://www.tsinsen.com/A1377 题解:分块大法好.每块维护一个有序表,修改暴力修改,查询从前往后跳即可. 代码: #include<cstdio> #inc ...
- OE中admin的内置帐号
在OE中admin的内置帐号为SUPERUSER_ID,可以用来直接做判断登录用户是否admin from openerp import SUPERUSER_ID if uid == SUPERUSE ...