内元素宽度设为100%为什么会超出外元素_width100%会突出去

相关文章推荐
睿智的墨镜 · java 使用mongoTemplate ...· 5 月前 ·
豪情万千的打火机 · Array相同数组合并 java java ...· 1 年前 ·
机灵的乌冬面 · mapstruct 忽略某些字段的值-掘金· 1 年前 ·
月球上的牛肉面 · 用 ...· 1 年前 ·
一个元素(外元素)嵌套着另一个元素(内元素)，外元素固定宽度，内元素宽度设置为 100%，但是内元素却溢出了，如图：
在这里插入图片描述
看下代码，来分析下什么原因造成的：
	<style type="text/css">
		.wrap {
			width: 500px;
			height: 500px;
			background-color: #ccc;
			margin: 30px auto;
		.inner {
			width: 100%;
			height: 300px;
			background-color: skyblue;
			padding: 20px;
	</style>
	<div class="wrap">
		<div class="inner">我是 内元素 。</div>
	</div>
1.外元素用的是 .wrap 类；内元素用的是 .inner 类。
 2.外元素固定宽度 500px ；内元素宽度为 100% ，同时还设置了 padding: 20px; 
 凭借着做了多年切图仔的经历，内元素溢出的部分就是左右 padding 的那 40px！ 
一、解决方法
 
其实这里涉及到了 css盒子模型 的知识点，解决方法就是在 .inner 里加上 box-sizing: border-box; 如下： 
	<style type="text/css">
		.wrap {
			width: 500px;
			height: 500px;
			background-color: #ccc;
			margin: 30px auto;
		.inner {
			width: 100%;
			height: 300px;
			background-color: skyblue;
			padding: 20px;
			box-sizing: border-box;
	</style>
	<div class="wrap">
		<div class="inner">我是 内元素 。</div>
	</div>
效果如下：
  
二、css盒子模型
 
 来自官方的解释:：当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
 每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。 
也就是说，我们可以把一个元素看作是一个盒子，这个盒子由四部分组成：内容 + 内边距 + 边框 + 外边距。 
内容就是元素存放文本等等区域。
内边距就是 padding 的间距。
边框就是 border 的间距。
外边距就是 margin 的间距。 
如下图：
 
 最中间 500x300 的浅蓝区域就是内容区域，以此向外依次为，内边距、边框、外边距。 
而在标准的盒子模型下，元素的宽度 = 内容宽度 + 内边距 + 边框宽度 
三、内元素超出外元素的原因
 
所以之前内元素溢出的原因就是： 
设置了 width:100%; 此时的 内容宽度 已经等于外元素的宽度，即 500px。
因为设置了 padding: 20px;，所以此时内元素的实际宽度为 500px + 20px + 20px = 540px，比外元素 500px 的宽度超出了 40px，所以就溢出了。 
四、box-sizing
 
box-sizing 是用来定义如何计算元素的宽度和高度，属性值如下： 
box-sizing: content-box; 这是默认值，标准盒子模型。width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。
box-sizing: border-box; width 和 height 属性包括内容，内边距和边框，但不包括外边距。 
所以用 box-sizing: border-box; 就可以解决内元素宽度为100%时超出外元素的问题了。
本文介绍的是利用CSS3的新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题，有需要的朋友们可以参考借鉴。
box-sizing: content-box|border-box|inherit;
值一、content-box 
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
值二、border-box 
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高
$ npm install vue-resize-text --save
 通过CDN安装
< script src =" https://unpkg.com/vue " > </ script >
< script src =" https://unpkg.com/vue-resize-text " > </ script >
全局注册VueResizeText：
 import Vue from 'Vue' ;
                                    预测Bs0-B′s0的宽度差ΔΓs依赖于重夸克展开和ΔB= 2算子的强子矩阵元素。 我们针对底面夸克，使用非相对论性QCD，对奇数夸克使用高度改进的交错夸克（HISQ）作用，给出了7维算子R2,3和线性组合R〜2,3的矩阵元素的第一格QCD结果。 计算使用带有2 + 1 + 1种夸克海味的仪表场配置的MILC协作合奏，并带有HISQ离散化，包括具有夸张或减少夸克质量的格子。 我们讨论了计算这些算子的矩阵元素所特有的功能，并分析了因序列截断，离散化和夸克质量依赖性而引起的不确定性。 最后，我们通过O（1 / mb）对所有强子矩阵元素使用晶格QCD结果报告了ΔΓs的第一个标准模型确定。 我们计算的主要结果产生了1 / mb贡献ΔΓ1/ mb = -0.022（10）ps-1。 将其添加到领先订单中，标准模型预测为ΔΓs= 0.092（14）ps-1。
因为传统的代码：
.box3{ width: 50%; height: 50%; background-color: aqua; border: 1px solid black; float: left; }
会导致溢出，所以这时我们加上代码：box-sizing: border-box;
原本代码变为：
.box2{ width: 50%; height: 50%; background-colo
                                    这实际上是一个纯粹的css问题，在小屏幕上非常容易出现。原因就是你的view使用了padding，而padding是算自身宽高的，而使用width 100%的时候，就变成了100% width加上padding的内容。所以就会在右边多出一部分内容。解决办法就是设置box-sizing: border-box。默认是box-sizing: content-box;
                                    // offsetParent：父级元素
function getElementLeft(element){
　　　　var left = element.offsetLeft;// 当前元素左边距
　　　　var top= element.offsetTop;// 当前元素上边距
　　　　var parent= element.offsetParent;// 当前元素的父级元素
　　　　while (parent!== null){
　　　　　　left += parent.offsetLeft;// 累
                                    在使用fixed,absolute 布局时，再使用width:100%，最终的实际宽度等于全屏宽度，若还有padding， 宽度再加上两边的pading值，设置margin值不影响其宽度。
这一点跟流中的元素表现有所不同。