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

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

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

  2. CSS 中,用 float 和 position 的区别是什么?

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  3. width:auto; 和 width:100%;的不同

    width:auto:会将元素撑开至整个父元素width,但是会减去子节点自己的margin,padding或者border的大小.width:100%:会强制将元素变成和父元素一样的宽,并且添加额外 ...

  4. 平常我们是如何区分css中class和id之间有什么区别的?

    我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用 ...

  5. css中 Span 元素的 width 属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

  6. css中span元素的width属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

  7. CSS,height:auto和height:100%有什么区别?

    auto是随内容的高度而撑开的.100%是根据父级元素的高度来决定的.例如:<div style="height:100px;width:200px;"> <di ...

  8. div+css中height:auto !important; height:663px; min-height:663px !important;区别

    height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...

  9. css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

随机推荐

  1. 20165306 Exp3 免杀原理与实践

    Exp3 免杀原理与实践 一.实践内容概述 1.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,加壳工具,使用shellcode编程 2.通过组合应用各种技 ...

  2. webpack的css样式文件加载依赖

    1.需要两个依赖包: npm i style-loader css-loader -D

  3. API测试:Chai & Mocha

    (一)Chai($npm install chai)https://www.chaijs.com/  安装到devDependencies中,线上不用,开发用 Chai is a BDD(行为驱动开发 ...

  4. js面向过程-经典选项卡

    源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. ASP.NET MVC CSRF (XSRF) security

    CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站 ...

  6. js用解构来定义变量并赋值

    解构数组 var [a,b]=[1,2]; a //1 b //2 ------------- var [a,b]=[1,2,3,4]; a //1 b //2 ---------------- va ...

  7. vue版 文字滚动

    用法:<marque :text="bannerText"></marque> 下载

  8. Vue-CLI3.0版本配置BootStrap的方法

    一.引入jquery bootstrap popper   用   cnpm install jquery bootstrap@3 popper.js --save  用cnpm 来导入 用npm会出 ...

  9. kubeadm安装kubernetes-v1.13.1

    kubeadm安装kubernetes-v1.13.1 centos虚拟机使用kubeadm安装k8s-v1.13.1. 机器信息如下: 主机名 ip master 192.168.239.200 n ...

  10. JCache只缓存部分字段

    项目中使用的JCache缓存实体,发现每次缓存时存进去了实体,取出的时候字段有些是空的. 具体环境为 Springboot v2.01 JCache(ehcache 3.4.0) jdk 1.8.0_ ...