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(默认值),宽度是自动的,随着内容的增加 ...
-
css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？
壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...
随机推荐
-
js动态的把左边列表添加到右边，可删除。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
[js] js判断浏览器（转）
(function($, window, document,undefined){ if(!window.browser){ var userAgent = navigator.userAgent.t ...
-
php中单例模式的解析说明
<?php //单例模式 class Dbconn{ private static $_instance=null; protected static $_counter=0; protecte ...
-
数据结构与算法分析(2)&mdash;&mdash;表、栈和队列
抽象数据类型 抽象数据类型(ADT)是一系列操作的集合.诸如表.集合.图和他们的操作一起可以看做是抽象数据类型 表 List 表的实现有两种:数组和链表.数组实现的表在插入和删除操作上的花 ...
-
Android（java）学习笔记235：多媒体之计算机图形表示方式
1.多媒体 很多媒体:文字(TextView,简单不讲),图片,声音,视频等等. 2.图片 计算机如何表示图片的? (1)bmp 高质量保存 256色位图:图片中的每个像素点可以有256种颜 ...
-
iOS 9之SFSafariViewController
金田( github 示例源码) 有时候需要在App内部打开一个网页,例如为了展示公司官网,产品列表信息,Facebook,微博等.以前都是使用 UIWebView,iOS 8引入了WKWebView ...
-
RabbitMQ~开篇与环境部署
想写这篇文章很久了,今天终于有时间总结一下,一个大型的系统里,消息中间件是必不可少的,它将并发环境处理的数据异步进行处理,有效的提高了系统的并发能力,有很多系统的瓶颈点都在于此,而消息中间件在这个时候 ...
-
xss的一般防护措施（及CreateDefaultBuilder源码）
从上个礼拜开始,公司的安全小组就开始排查公司项目的安全性,首屈一指的就是xss问题,为此我总结了下我的经验. 1.对后台程序的输出数据做html编码处理,前端做简单的替换处理 2.如果业务需要,后台可 ...
-
学习小片段——thymeleaf入门
1: 概述 thymeleaf是一个跟 Velocity.FreeMarker 类似的模板引擎,和以前学的jsp相近,但性能上无疑是比jsp好. 参考文档官方文档:https://www.thymel ...
-
【Java面试题】28 简述synchronized和java.util.concurrent.locks.Lock的异同 ？
主要相同点:Lock能完成synchronized所实现的所有功能 主要不同点:Lock有比synchronized更精确的线程语义和更好的性能.synchronized会自动释放锁,而Lock一定要 ...