1.width:100%和width:auto

  width:100%,设定对象的宽度占父元素的100%不论设定元素的margin值是多少,不包含margin;

  width:auto,根据设定对象的实际大小而自适应宽度,考虑设定元素的Margin值得大小,包含Margin

2.max-width:100%和min-width:100%

  max-width:100%,如果指定元素宽度不超过父元素的宽度,则大小不变,如果超过了父元素的宽度则将宽度收缩为父元素的宽度。

  min-width:100%最小宽度为100%,用的地方很少但是最近一个树形控件中用到了,需要个树形控件添加横向滑动条,在vue的一个插件也用到了treeselect里面也需要添加横向滑动条。

/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}

min-width:100%和max-width:100%的区别的更多相关文章

  1. width:100px; min-width:100% 解释:宽度大于100px 就是100% 小于100px 就是100像素

    <div style="width:100px; background-color: aqua; min-width:100%">kkk</div>

  2. Frame size of 257 MB larger than max allowed 100 MB

    ActiveMQ有时会报类似Frame size of 257 MB larger than max allowed 100 MB的错误,意思是单条消息超过了预设的最大值,在配置文件中 <tra ...

  3. LeetCode面试常见100题( TOP 100 Liked Questions)

    LeetCode面试常见100题( TOP 100 Liked Questions) 置顶 2018年07月16日 11:25:22 lanyu_01 阅读数 9704更多 分类专栏: 面试编程题真题 ...

  4. 深入子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  5. 深入理解子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  6. jQuery.width()和jQuery.css('width')的区别

    [TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...

  7. VirtualBox: Effective UID is not root (euid=1000 egid=100 uid=1000 gid=100)

    桌面上运行virtualbox出错: The virtual machine 'xp' has terminated unexpectedly during startup with exit cod ...

  8. linux内核中的min(x, y)和max(x, y)宏定义

    /linux/include/linux/kernel.h中有min(x, y)和max(x, y)的定义如下: #define min(x, y) ({ \ typeof(x) _min1 = x; ...

  9. width() innerwidth() outerwidth() css('width')

    不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...

  10. 微软BI 之SSIS 系列 - 平面文件格式的区别(Delimited,Fixed width,Ragged Right, Fixed width ...)

    开篇介绍 SSIS 中处理文件,一般在描述输出平面文件格式的时候通常会出现以下几种选项: Delimited - 默认输出列使用逗号分隔,也可以选择其它的诸如 | ,或者 Tab 等. Fixed W ...

随机推荐

  1. TYVJ4239 [NOIP2015提高组DayT3]斗地主

    P2668 斗地主 题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中, 牌的大小关系根据牌的数码表示如 ...

  2. API安全验证之JWT(JSON WEB TOKEN) OLCMS

    假如www.olcms.com/getUserInfo获取用户信息,你怎么知道当前用户是谁?有人说登陆时候我把他UID写入session了,如果是API接口,没有session怎么办,那么就需要把UI ...

  3. 怎样判断一个exe可执行程序(dll文件)是32位的还是64位的

    看到一个比较简单粗暴的方式,做个记录. 直接用记事本或者notepad++(文本编辑软件都可)打开exe文件(dll文件), 会有很多乱码,接下来只需要在第二段中找到PE两个字母,在其后的不远出会出现 ...

  4. Ajax--art-template + 调用天气接口

    一.实现原理: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. 从0开始学习 GitHub 系列之「02.加入 GitHub」

    转载地址: http://blog.csdn.net/googdev/article/details/52787586 看完昨天的文章「从0开始学习 GitHub 系列之「初识 GitHub」」估计不 ...

  6. 下载额外数据文件失败 以下软件包要求安装后下载附加数据,但其数据无法下载或无法处理 ttf-mscorefonts-installer

    故障显示: 一些软件包的数据文件无法下载 以下软件包要求安装后下载附加数据,但其数据无法下载或无法处理. ttf-mscorefonts-installer 这是一个永久错误,系统中的这些软件包将无法 ...

  7. CSS 连接后面加上"?"表示什么意思?

    举例来说: <link rel="stylesheet" href="http://static.ak.facebook.com/css/actionspro.cs ...

  8. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  9. 调用Lua脚本print(xxx)报attempt to call a nil value (global 'print')错误

    在自己程序里调用Lua脚本print(xxx) 报出attempt to call a nil value (global 'print')错误 解决方法: luaopen_base(L); 或者 l ...

  10. 用JS实线放大镜的效果

    今天花了点时间,复习了下使用原生JS实线放大镜的效果.在制作过程中,也是很到了一些问题,在这里总结下. HTML代码如下: <div id="preview"> < ...