width = 100%??

最新推荐文章于 2021-02-08 18:55:33 发布
最新推荐文章于 2021-02-08 18:55:33 发布
阅读量94 收藏
点赞数
原文链接：http://www.cnblogs.com/shuhaonb/p/11202435.html
版权

子元素设置width=100%获取的宽度时父容器的宽度，我们都知道，那父容器存在margin、padding、border时呢，宽度是多少呢？？

根据盒模型的不同，content是不同的

当box-sizing设置为border-box时，

盒子的大小为content+padding+border即内容的(width)+内边距的再加上边框

当box-sizing设置为content-box时，盒子的大小不包括padding和border

这个时候子容器设置width=100%时，宽度时content的宽度

转载于:https://www.cnblogs.com/shuhaonb/p/11202435.html

weixin_30346033
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS | width、height中auto与100%与固定值有什么不同
Errorong的博客
07-08 2万+
由于多次在设置width及height处出错导致不显示，总结了一篇固定值与auto、100%的差别，前面举例对比部分有基础的同学可以略过直接看总结。总结：（1）width、height使用固定值是一定会显示的，但是除非是小型项目或是特殊情况，最好不要使用固定值。不利于响应式开发，当从移动端看页面就会非常不美观。（2）不设置width、height时默认为auto，当position不同时显示效果不...
关于width: 100%的一些看法
weixin_33754913的博客
05-16 1570
一.position对width 设置为百分比的影响<html> <head> <style type="text/css"> img { width: 50% } body { margin: 8px; } </style&...
width：100%和width：auto的区别
Tie_may的博客
02-08 1万+
width属性100%和auto的区别 1.width：100% 100%表示子元素的宽度和父元素的宽度相等，其中并不包括子元素内外边距以及边框的值，为子元素真正的宽度 2.width：auto auto表示子元素的 宽度+内边距+外边距+边框 才等于父元素的宽度 注意：上述父元素的宽度都是父元素真正的宽度，即父元素width属性值 当父元素width值为500px的时候（不论父元素是否有内外边距以及边框），示例如下： width为100%的子元素： width为auto的子元素： ...
关于width=100%&width=auto的区别
young_bird_1996的博客
03-05 1万+
最近在学习前端的一些基本知识，今天碰到了一个问题，关于width的问题首先是width=100%:当width=100%时，子元素的宽度是继承的父元素宽度，不包括子元素设置的margin padding 和border部分css样式：.main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px...
HTML5<div>标签中width=100%达不到想象中的效果
starvingzk的博客
10-12 4763
标签中width=100%达不到想象中的效果 html,body{ width: 100%; height: 100%; margin: 0 auto; } 需要加上以上代码
CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body).pdf
12-16
CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body)
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
09-28
在网页布局设计中，我们经常会遇到这样一个问题：当一个元素（如`div`）的宽度设置为`width: 100%`时，如果再添加`padding`或`margin`，元素的总尺寸会超出其父元素的宽度，导致布局混乱。为了解决这一问题，我们...
解析width:100%;与width:auto;的区别
09-24
本文将详细解析`width:100%;`与`width:auto;`的区别，帮助开发者更好地理解和应用这两种不同的宽度设置。 首先，`width:100%;`的含义是，元素的宽度被设置为其父元素内容区域的宽度。这意味着，如果一个元素的父级...
关于table的width:100%和margin导致溢出
09-25
这里我们将详细探讨`width:100%`和`margin`在表格中的应用以及它们如何可能导致内容溢出。 首先，`width:100%`是一个相对单位，它意味着元素的宽度将根据其父元素的宽度来设置。当给表格设置`width:100%`时，表格的...
css属性width默认值width: auto与width: 100%区别详解
01-18
width: auto 子元素（包括content+padding+border+...width: 100% 强制将子元素的content区域 撑满 父元素的content区域 子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保
在css中实现width:100%-100px，即100%宽度减去100px
一只小辣鸡
04-30 2万+
尝试了很多，最简单的办法是加一个margin-left： .class-name{ width: 100%; margin-left: 100rpx; }
html,body{ width: 100%;height: 100%;}的解释
qq_26239917的博客
03-13 1万+
按道理，子元素百分比是以父元素为标准，那么问题来了，html有父元素吗？ html{ width: 100%;height: 100%;}拿谁的宽高？ 经过测试，是当前浏览器窗口的大小 看图 &amp;lt;body&amp;gt; &amp;lt;div onclick=&quot;func()&quot;&amp;gt;xxx&amp;lt;/div&amp;gt; &amp;lt;/body&amp;gt
width：100%与width：auto的区别
Great_Eagle的博客
07-20 2391
width：100% width：100%代表自身Width=父contentWidth*100% 其中当自身box-sizing:content-box（也是默认值）时，自身Width的含义为自身contentWidth，当box-sizing:border-box（IE盒模型，IE8及以下只支持IE盒模型）时，自身Width的含义为自身contentWidth+paddingWidth+b...
CSS的width:100%和width:auto区别
热门推荐
0溺水的鱼O的专栏
12-05 5万+
CSS的width:100%和width:auto区别 一、   问题 前段时间在调整树结构的时候，发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素，导致节点的名称只显示了一半，同时图标和名称换行显示了，但是在IE8和IE9下则显示正常。定位到问题后，最终发现是下面的属性导致的，如下图红色所致，把width的值设置为auto后即可解决问题：     .TreeVi
width=100%之后出现水平滚动条
李豆豆的博客
04-02 4081
解决方法： 一、分别给一下元素添加不同颜色背景。html、body、父元素、本元素、子元素二、最右边出现html标签的背景颜色。说明width=100%;是以html标签设置的。 三、块元素默认占满整行，如果是块元素，可以不用设width，如果是行内元素，则转为块元素可以解决。
CSS中width:100%和width:auto的区别
卡卡的笔录
06-07 1万+
&lt;div class="parent"&gt; &lt;div class="child"&gt; &lt;/div&gt; &lt;/div&gt; &lt;style&gt; .parent { width: 100px; background-color: red; } .child { width: 100%; backgro
关于width=100%时会出现滚动条的情况
lianglizhongblog
03-02 2万+
我们常常会看到一些网页永远都是充满屏幕的，不会出现水平方向的滚动条，那这些灵活的页面布局是怎样做到的呢？而有些出现水平方向的滚动条的页面又是因为什么原因呢？ 例： 1.出现水平方向滚动条的页面及代码： *{margin:0;padding:0;} #box{width:100%;background:black;border:5px solid red;} .box1{w
<object type="text/x-scriptlet" da ta="imp ort.htm" width=100% height=30></object>
最新发布
06-09
这是一个非标准的HTML标签，它的作用是在页面中嵌入一个脚本文件。具体来说，`<object>`标签的`type`属性指定了嵌入文件的MIME类型，`data`属性指定了要嵌入的文件的URL或数据，`width`和`height`属性指定了嵌入内容的宽度和高度。 在这个例子中，`type`属性是"text/x-scriptlet"，它表示嵌入的文件是一个脚本文件。`data`属性的值是"import.htm"，表示要嵌入的文件是同一目录下名为"import.htm"的文件。`width`属性设置为"100%"，表示嵌入内容的宽度占据父元素的全部宽度；`height`属性设置为"30"，表示嵌入内容的高度为30个像素。 需要注意的是，由于这个标签不是HTML标准中定义的标签，不同浏览器的支持情况可能不同。同时，使用这个标签也可能存在安全隐患，因为嵌入的脚本可以执行任意代码。因此，不建议在生产环境中使用这个标签。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值