width和min-width的区别和差异性比较

1、正常情况下：

width :给块级元素/行内块元素设置固定的宽度，或者固定百分比的宽度。

min-width: 当盒子内部元素宽度小于 min-width的值时，盒子宽度为 min-width的值，当盒子内容宽度大于 min-width的值时，盒子随着内容的增加而被撑大，没有上上限，但是盒子宽度的最小值是设置的 min-width 的值。

2、在父元素已经设置为 display: flex; 弹性布局时：

width:

a、当父元素的width 大于子元素的width的前提下：给子元素设置多大的width,该子元素的宽度变就是多大。

示例代码：

<style>

.con1{

display: flex;

border: 1px solid pink;

width: 600px;

margin: 30px auto;

}

.con1 span:nth-child(1){

width: 550px;

background: red;

}

.con1 span:nth-child(2){

width: 550px;

background: pink;

}

.con1 span:nth-child(3){

width: 550px;

background: green;

}

.con1 span:nth-child(4){

width: 550px;

background: orange;

}

</style>

<span>我是一个兵</span>

</div>

运行效果：

b、当父元素的宽度小于子元素的width 时：给子元素设置的宽度将会按照该子元素在所有子元素宽度和所占的百分比，这个百分比，就是子元素占父元素宽度的百分比，计算公式：

子元素宽度 = （该子元素宽度 / 所有子元素宽度和） * 父元素宽度

示例代码：

<style>

.con1{

display: flex;

border: 1px solid pink;

width: 600px;

margin: 30px auto;

}

.con1 span:nth-child(1){

width: 550px;

background: red;

}

.con1 span:nth-child(2){

width: 550px;

background: pink;

}

.con1 span:nth-child(3){

width: 550px;

background: green;

}

.con1 span:nth-child(4){

width: 550px;

background: orange;

}

</style>

<span>我是一个兵</span>

</div>

运行效果：

min-width:

a、当子元素宽度和小于父元素：...该元素的内容小于 min-width的数值时，该元素的宽度为 min-width设置的值。

... 该元素的内容大于 min-width的数值时，该元素的宽度被撑大，值为其内容的宽度。

示例代码：

<style>

.con1{

display: flex;

border: 1px solid pink;

width: 600px;

margin: 30px auto;

}

.con1 span:nth-child(1){

min-width: 50px;

background: red;

}

.con1 span:nth-child(2){

min-width: 50px;

background: pink;

}

.con1 span:nth-child(3){

min-width: 50px;

background: green;

}

.con1 span:nth-child(4){

min-width: 50px;

background: orange;

}

</style>

<span>我是一个兵</span>

</div>

运行效果：（虽然给span设置的时min-width: 50;但是被内部的文字撑大，所以span width是 80）

b、当子元素的宽度大于父元素的宽度：子元素的宽度最小值为设置的值，随着内部内容宽度的增加而增大。父元素会出现滚动条。

示例代码：

<style>

.con1{

display: flex;

border: 1px solid pink;

width: 600px;

margin: 30px auto;

overflow: scroll;

}

.con1 span:nth-child(1){

min-width: 550px;

background: red;

}

.con1 span:nth-child(2){

min-width: 550px;

background: pink;

}

.con1 span:nth-child(3){

min-width: 550px;

background: green;

}

.con1 span:nth-child(4){

min-width: 550px;

background: orange;

}

</style>

<span>我是一个兵</span>

</div>

运行效果：（可以看到每个span宽度都为 550）

总结：

一般情况下，width设置盒子宽度的固定值。 min-width设置盒子宽度的最小值。

在父元素设置为flex弹性布局的情况下：

a、子元素宽度和小于父元素时，同上，width设置盒子宽度的固定值。 min-width设置盒子宽度的最小值。

b、子元素宽度和大于父元素时，width设置的盒子宽度会被压缩，具体宽度计算公式：

子元素宽度 = （该子元素宽度 / 所有子元素宽度和） * 父元素宽度

而此时min-width设置的盒子宽度不会被压缩，盒子的最小宽度为设置的min-width的值。

width和min-width的区别和差异性比较相关推荐

-ms-flexbox_Flexbox中width和flex-basis之间的区别
-ms-flexbox by Kyle Gallagher 凯尔·加拉格尔(Kyle Gallagher) Flexbox中width和flex-basis之间的区别 (The difference ...
css中width:100%与width:auto的区别
在布局中,width:100%和width:auto都会经常用到,那么,二者究竟有何区别呢?下面就来探讨下. 先上代码 <style>* {margin: 0;padding: 0;}.p ...
$(window).width()与window.innerWidth的区别
window.innerWidth能获得什么数据? 在自适应设计中,需要用js来判断浏览器宽度,从而调整网页宽度和布局,我一开始用的是window.innerWidth. window.innerWi ...
CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别一. 问题前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
前端面试题：width:100%和width:auto的区别
width属性100%和auto的区别 1.width:100% 表示子元素的宽度和父元素的宽度相等,不包括子元素设置的内外边距和边框的值,即子元素的宽度等于父元素content的宽度代码如下: & ...
今日前端小知识—— width:auto 与 width:100% 的区别
前段时间做页面的时候,发现给盒子设置 width:100% 和 auto 的效果不一样,这里来探讨一下. <style>.main {width: 300px;height: auto;p ...
html代码width什么意思,width：100% 啥意思呢，在什么情况下使用？
width:100% 啥意思呢,在什么情况下使用?很少用到这个,不怎么了解..有例子可以参考下么? 作者: kangyuan 发布时间: 2009-10-16 至少做规则覆盖的时候会用到吧作者: i ...
cin.width()和cout.width()问题
前言最近在跟着FishC大佬学C++,碰到了一个很有趣的输入输出问题,多方查资料,有了点心得,记录一下. cin与cout的功能虽然不同,但它们有许多类似点,如都可以指定域宽.cin的输入域宽可以使 ...
max(min)-device-width和max(min)-width的区别
max-device-width和max-width的区别表现在如下几个方面: 1. max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度. 2. max-width是目 ...

width和min-width的区别和差异性比较

示例代码：

width和min-width的区别和差异性比较相关推荐

最新文章

热门文章