css中width:auto和width:100%的区别是什么
width的值一般是这样设置的:
1,width:50px;//宽度设为50px
2,width:50%;//宽度设为父类宽度的50%
3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加而增加,随着浏览器的宽度而换行
width:auto和width:100%的区别:
一、width:auto
1、块级元素默认的宽度值,意味着浏览器会自己选择一个合适的宽度值。
2、内容的宽度='margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right'
如果margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right'比较大,就减小width的值,如果比较小呢,就增大width的值,使其满足上面的表达式。
二、width:100%
当width设置为100%之后,它的宽度就是父级的width,并且随着父级的width自动变化,增加子元素的padding和margin之后,它的width还是不变的,这是与设置为auto的区别。
三、width:auto和width:100%的区别
1、width:100% 并不包含margin-left margin-right的属性值,直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围,(这条相对于父容器是body)。
2、width:auto包含margin-left/margin-right的属性值。width:auto总是占据整行,这其中margin的值已经包含其中了,如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
3、一般width:auto使用的多,因为这样灵活,而width:100%使用比较少,因为在增加padding或者margin的时候,容易使其突破父级框,破环布局。
css中width:auto和width:100%的区别是什么的更多相关文章
- width:auto 和 width:100%有什么区别
width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...
- CSS 中,用 float 和 position 的区别是什么?
CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...
- width:auto; 和 width:100%;的不同
width:auto:会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小.width:100%:会强制将元素变成和父元素一样的宽,并且添加额外 ...
- 平常我们是如何区分css中class和id之间有什么区别的?
我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用 ...
- css中 Span 元素的 width 属性无效果原因及多种解决方案
先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...
- css中span元素的width属性无效果原因及多种解决方案
先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...
- CSS,height:auto和height:100%有什么区别?
auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...
- div+css中height:auto !important; height:663px; min-height:663px !important;区别
height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...
- css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?
auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...
随机推荐
- robotframework-ride支持python3
最近发现robotframework的RIDE工具终于支持python3了,赶紧就安装了一下. 最新版本1.7.3.1基于wxPython4.0.4,此时的wxPython也是支持Python3.x的 ...
- Java基础知识盘点(三)- 线程篇
创建线程的方式及实现 一.继承Thread类创建线程类 1.定义Thread的子类,并重写run方法,因为该方法的方法体就是代表了线程要完成的任务,因此run方法又叫做执行体. 2.创建Thread子 ...
- P2678 跳石头
传送门 思路: 二分跳跃的最短距离 mid .暴力判断如果有两个石头直接的距离小于 mid ,就把这个石头拿走.如果拿走的石头数目 cnt ≤ m,说明二分的答案可行,ans = mid,接着二分更短 ...
- 第 10 章 容器监控 - 079 - 监控利器 sysdig
sysdig 是一个轻量级的系统监控工具,同时它还原生支持容器. 通过 sysdig 我们可以近距离观察 linux 操作系统和容器的行为. Linux 上有很多常用的监控工具,比如 strace,t ...
- 如何增加亚马逊listing多个类目节点
流量是电商销售的必要因素,可以说,任何成功的电商平台都离不开流量.亚马逊listing优化做得好,不仅能提高产品的曝光率,还能提升转换率,而好的类目可以吸引大的流量.帮你快速爬升. 首先我们来了解一下 ...
- Linux 配置ssh 免密码登录
在平常应用中,我们经常会登录到其他主机,比如说服务器,每次都需要用户名和密码. 我们可以通过ssh免密码登录服务器而不需要输入密码. 现在有一台ubuntu的阿里云服务器,称之为 server. 公 ...
- 转入墙内:SAS HBA crossflashing or flashing to IT mode, Dell Perc H200 and H310
Default firmware for this guide is:2118it.binVersion 20.00.07.00Release date: 11-FEB-16 所有资源已转到百度盘: ...
- EF - Code First 开发方式
概述: 本节介绍通过 Code First 开发建立新数据库. 借助 Code First 可以选择使用类的特性和属性执行配置,或者使用 XML 配置文件来配置,当然也可以使用 Fluent API ...
- 【剑指Offer学习】【所有面试题汇总】
剑指Offer学习 剑指Offer这本书已经学习完了,从中也学习到了不少的东西,现在做一个总的目录,供自已和大家一起参考,学如逆水行舟,不进则退.只有不断地学习才能跟上时候,跟得上技术的潮流! 所有代 ...
- js 快速生成数组的方法
//实现方法一:循环赋值var arr1 = new Array(100);for(var i=0;i<arr1.length;i++){ arr1[i] = i;}console.log(ar ...