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. ie ajax 跨域情况遇到的各种问题

    jQuery.support.cors = true; http://blog.csdn.net/jupiter37/article/details/25694289 jQuery ajax跨域调用出 ...

  2. 日志文件的配置----【logback-spring.xml】

    一.引入相关包 <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-c ...

  3. stm32实现DMX512协议发送与接收(非标)

    最近把玩了一下485,期间也接触了dmx512通信协议,该协议主要用于各种舞台灯光的控制当中,进而实现各种光效以及色彩变化.根据标准的512协议,其物理连接与传统上的RS485是完全一致的,并没有什么 ...

  4. 点双连通分量F. Simple Cycles Edges

    F. Simple Cycles Edges time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  5. 【JAVA习题一】古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一 对兔子,假如兔子都不死,问每个月的兔子总数为多少?

    斐波那契函数:f(n)=f(n-1)+f(n-2); package XXXXX; import java.util.Scanner; public class Fbonaci斐波那契 { publi ...

  6. docker安装和基本使用

    1.安装环境 此处在Centos7进行安装,可以使用以下命令查看CentOS版本 lsb_release -a 在 CentOS 7安装docker要求系统为64位.系统内核版本为 3.10 以上,可 ...

  7. 【JAVA习题六】输入两个正整数m和n,求其最大公约数

    import java.util.Scanner; public class Oujilide欧几里得 { public static void main(String[] args) { // TO ...

  8. vue中生命周期

    1,说器生命周期,总觉得有熟悉,又陌生,直到看到一道面试题,问父子组件的生命周期的执行顺序,我擦,真没太注意啊,不知道. 2,网上搜了一下,说法是有点像洋葱圈的形式,由外到内,在到外,因为就像一个盒子 ...

  9. Misdirection: 1靶机writeup

    看下端口 nmap -A 172.16.61.131 一些坑3306无法访问,80,web2py漏洞无法利用 利用dirb遍历网站路径 得到下面命令执行漏洞 http://172.16.61.131: ...

  10. DNS域传输漏洞利用总结

    操作基本的步骤是: 1) 输入nslookup命令进入交互式shell 2) Server 命令参数设定查询将要使用的DNS服务器 3) Ls命令列出某个域中的所有域名 4) Exit命令退出程序 攻 ...