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. linux系统RabbitMQ启动错误记录

    安装并配置好RabbitMq之后终端执行rabbitmq-server报错 试了网上的各种方法也无济于事 最后发现可能是因为访问权限的问题(并不确定) 解决方法:sudo rabbitmq-serve ...

  2. 微信小程序--Tab栏切换的快速实现

    上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-i ...

  3. web前端学习常用网址记录

    jetbrains下载各种软件和试用 www.jetbrains.com www.jetbrains.com/idea php服务器下载 php文档查询 php.net webAPI网站(各种教程文档 ...

  4. ecshop二次开发之后台秒杀

    1.进入admin->includes->inc_menu.PHP中此文件为定义左侧功能模块超链接 2.添加include/inc_menu.php秒杀管理超链接找链接 $modules[ ...

  5. Linux操作系统各版本ISO镜像下载(包括oracle linux\redhat\centos\u

    Linux操作系统各版本ISO镜像下载(包括oracle linux\redhat\centos\ubuntu\debian等) 1.Oracle Linux(下载地址) (1)OracleLinux ...

  6. vuehomework1

    红黄蓝三个按钮,点击不同的按钮可以切换一个200*200的矩形框对应的颜色 <!DOCTYPE html> <html lang="en"> <hea ...

  7. git命令入门

    http://www.cocoachina.com/ios/20160629/16855.html 译者序:这是一篇给像我这样的新手或者是熟悉图形工具的老鸟看的.仅作为快速入门的教程. git 现在的 ...

  8. python 基本数据结构 ndarray

  9. PHP 从 MongoDb 中查询数据怎么样实现

    一.软件环境(版本非必须) php v5.6 扩展:MongoDB nginx v1.11 mongodb v3.2 note: 必须安装MongoDB扩展 二.连接 $client = new Mo ...

  10. linux中各目录及详细介绍

    一.Linux文件系统的层次结构 在Linux或UNIX操作系统中,所有的文件和目录都被组织成一个以根节点开始的倒置的树状结构,如图: 二.目录 1.目录的定义 目录相当于Windows中的文件夹,目 ...