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的区别的更多相关文章

  1. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  2. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  3. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  4. width:100%;与width:auto;的区别

    <div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...

  5. css width="100" style ="width:100px" 区别

    1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...

  6. width:100%和width:auto区别

    在div父元素是body时 1.先看没有width限制的div <div style="border:1px solid red; margin-left:50px; margin-r ...

  7. width:100%和width:inherit

    前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...

  8. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  9. width:auto 和 width:100%有什么区别

    width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...

随机推荐

  1. hdu-4893-Wow! Such Sequence!-线段树【2014多校第三场-J】

    题意:一个初始为0的数组,支持三种操作:1.向第k个数添加d,(|d| < 2^31);2.把[l, r]区间内的数字都换成与它最相近的Fibonacci数;3.询问[l, r]区间的和. 思路 ...

  2. [转]SQL语句优化技术分析

    一.操作符优化 1.IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格.但是用IN的SQL性能总是比较低的,从Oracle执行的步骤来分析用IN的SQL与不用 ...

  3. [Python]计算豆瓣电影TOP250的平均得分

    用python写的爬虫练习,感觉比golang要好写一点. import re import urllib origin_url = 'https://movie.douban.com/top250? ...

  4. UUID的具体用法

    String deleteUuid = UUID.randomUUID().toString(); java.util 类 UUID java.lang.Object java.util.UUID 所 ...

  5. Storm安装与实验

    接上一篇Kafka的安装与实验: http://www.cnblogs.com/charlesblc/p/6046023.html 还有再上一篇Flume的安装与实验: http://www.cnbl ...

  6. Git基础(二)

    本章内容将介绍第二部分:本地仓储操作.为了加深对每个命令操作的理解,我们可以事先获取一个仓储边学边操作.这里首先 你要明白一个概念,所有本地工作目录下的文件状态无不在乎两种,已跟踪和未跟踪.已跟踪文件 ...

  7. [Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点

      有时候需要让光标显示在EditText的指定位置或者选中某些文本.同样,为了方便用户输入以提升用户体验,可能需要使EditText获得或失去焦点. 1. 设置光标到指定位置 EditText et ...

  8. 【笨嘴拙舌WINDOWS】剪切板

    Windows剪贴板是一种比较简单同时也是开销比较小的IPC(InterProcess Communication,进程间通讯)机制.Windows系统支持剪贴板IPC的基本机制是由系统预留的一块全局 ...

  9. 【英语】Bingo口语笔记(76) - 不知如何应答的场景对话

  10. Java之路

    Java程序员 高级特性 反射.泛型.注释符.自动装箱和拆箱.枚举类.可变参数.可变返回类型.增强循环.静态导入 核心编程 IO.多线程.实体类.集合类.正则表达式.XML和属性文件 图形编程 AWT ...