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. ssh整合,hibernate查询表数量count以及批处理添加

    String sql = "select count(*) from LogEntity as log "; Long count = (Long)getHibernateTemp ...

  2. jmeter接口自动化测试

    一.正常单个接口 1.自定义变量设置服务器地址ip和端口 2.可以正则表达式提取取出token值设置为请求头里 如图 二.接口请求参数涉及取参(单个或多值) 提取多个值参数,用Json提取器可以直接提 ...

  3. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  4. Xilinx Vivado的使用详细介绍(1):创建工程、编写代码、行为仿真

    Xilinx Vivado的使用详细介绍(1):创建工程.编写代码.行为仿真 Author:zhangxianhe 新建工程 打开Vivado软件,直接在欢迎界面点击Create New Projec ...

  5. python+selenium测试

    网址http://blog.csdn.net/u011541946/article/category/6788788/1

  6. curl的Get请求,封装方法

    //GET请求//参数1是请求的url//参数2是发送的数据的数组//参数3是其他GET选项private function curlGET($url, array $get = array(), a ...

  7. NetSec2019 20165327 Exp4 恶意代码分析

    NetSec2019 20165327 Exp4 恶意代码分析 一.实践目标 1.监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分 ...

  8. 关于requestAnimationFrame与setInterval的一点差异

    requestAnimationFrame与setInterval都可以实现循环触发事件,但是setInterval是基于时间的,而requestAnimationFrame是基于帧数的,在我的一次开 ...

  9. leetcode 103

    此题难度在于如何标记每一层的末尾节点. 思路1:队列层次遍历,遇到偶数层末尾反转一下数组 class Solution { public: vector<vector<int>> ...

  10. LInux下几种定时器的比较和使用

    在数据通信过程中,会遇到对数据发送时间的格式要求.所以要在应用中根据实际要求选择不同的定时器,就要考虑到几种应用定时器的特点. 定时器文章参考 一般而言有, 1.sleep,usleep和nanosl ...