flex模型是w3c最新提出的一种盒子模型，很好的解决了普通模型的一些弊端。

一、比较两种盒子模型：

demo： 给div添加边框，观察他们的区别

<body>

    <div class="container"></div>

</body>

①普通模型css：

* {

    box-sizing: content-box;

}

.container {

    margin: 30px;

    width: 300px;

    height: 300px;

    background-color: red;

    border:20px solid aqua;

}

②flex弹性模型css：

* {

    box-sizing: border-box;

}

.container {

    display: flex;

    margin: 30px;

    width: 300px;

    height: 300px;

    background-color: red;

    border:20px solid aqua;

}

运行后DIV分别的样式：

普通模型                                                                flex弹性模型

区别：两种盒子类型下设置了border后div的实际大小（粉色区域）存在区别，即：

普通盒子模型：总宽度 = margin+border+width；

flex弹性盒子模型：总宽度 = width；

持续更新中……

flex弹性模型的更多相关文章

  1. 慕课网3-13编程练习：采用flex弹性布局制作页面主导航

    小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...

  2. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 响应式布局（CSS3弹性盒flex布局模型）

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

  5. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  6. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  7. 【flex弹性盒布局】------这个强大的功能

    你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...

  8. flex弹性布局的基本介绍

    最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...

  9. 网页布局——Flex弹性框布局

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 需要安卓4.4及以上版本可以使用 ...

随机推荐

  1. Redis学习笔记（十三） 复制（下）

    上一篇写了Redis复制功能的简单应用,下面我们看下Redis复制功能的实现过程.下面基本上是理论部分,枯燥乏味,但希望大家能看看,毕竟知识不都是感兴趣的.耐得住寂寞,经得起诱惑,方能守得住繁华 ~. ...

  2. Redis学习笔记（十四）Sentinel(哨兵)（上）

    最近谈到Redis就会听到哨兵模式,工作期间同事也分享过关于哨兵模式的知识,但由于工作忙(给自己找个借口)没有没认真看,现在恶补下,老样子还是分上篇应用,下篇看实现过程,下面我们来看下哨兵到底是啥? ...

  3. 有向图变为强连通图 hdu2767

    Proving Equivalences Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  4. Lightoj1356

    题目链接:https://vjudge.net/problem/LightOJ-1356 题目大意: T个 test case,每个 test case 给出一个 N 个数的集合.请找出一个最大的子集 ...

  5. 换个角度学习ASP.NET Core中间件

    中间件真面目 关于ASP.NET Core中间件是啥,简单一句话描述就是:用来处理HTTP请求和响应的一段逻辑,并且可以决定是否把请求传递到管道中的下一个中间件! 上面只是概念上的一种文字描述,那问题 ...

  6. 二刷Redux笔记

    关于react的一些思考 所有的数据全部先要发送给容器,然后容器负责接受数据单后再分发数据给他下面的组件,通过props来传递,一个页面就可以相当于一个容器,容器之中就会有很多子组件,一般组件只负责接 ...

  7. [工具-001]C++更换EXE的ICON图标

    我们都知道每个可执行文件EXE都会有自己的图标,它可以在项目生成的时候进行指认,但是有时候我们会遇到两种情况:1.没有源代码,2.我们的项目很多,一个个进行更换很耗时.本人就是因为接到这么一个需求,要 ...

  8. SET运算符

    -- SET操作符: -- union   联合去重 两个表的字段个数和类型都得一样,起别名 应该在第一个表上操作,,排序按照第一列从小到大来排的 select employee_id, depart ...

  9. 2017-ICLR-NAS_with_RL-Neural Architecture Search with Reinforcement Learning-论文阅读

    NAS with RL 2017-ICLR-Neural Architecture Search with Reinforcement Learning Google Brain Quoc V . L ...

  10. 【已解决】Ubuntu U盘启动出现“Failed to load ldlinux.c32”问题

    利用UltraISO制作了Ubuntu的U盘启动,在USB启动时出现了 Failed to load ldlinux.c32 Boot failed: please change disks and ...