flex弹性模型
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弹性模型的更多相关文章
- 慕课网3-13编程练习：采用flex弹性布局制作页面主导航
小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...
- Flex 弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web的Flex弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 响应式布局（CSS3弹性盒flex布局模型）
传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 彻底搞懂flex弹性盒模型布局
为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...
- 【flex弹性盒布局】------这个强大的功能
你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...
- flex弹性布局的基本介绍
最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...
- 网页布局——Flex弹性框布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 需要安卓4.4及以上版本可以使用 ...
随机推荐
- ie ajax 跨域情况遇到的各种问题
jQuery.support.cors = true; http://blog.csdn.net/jupiter37/article/details/25694289 jQuery ajax跨域调用出 ...
- 日志文件的配置----【logback-spring.xml】
一.引入相关包 <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-c ...
- stm32实现DMX512协议发送与接收（非标）
最近把玩了一下485,期间也接触了dmx512通信协议,该协议主要用于各种舞台灯光的控制当中,进而实现各种光效以及色彩变化.根据标准的512协议,其物理连接与传统上的RS485是完全一致的,并没有什么 ...
- 点双连通分量F. Simple Cycles Edges
F. Simple Cycles Edges time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- 【JAVA习题一】古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一 对兔子，假如兔子都不死，问每个月的兔子总数为多少？
斐波那契函数:f(n)=f(n-1)+f(n-2); package XXXXX; import java.util.Scanner; public class Fbonaci斐波那契 { publi ...
- docker安装和基本使用
1.安装环境 此处在Centos7进行安装,可以使用以下命令查看CentOS版本 lsb_release -a 在 CentOS 7安装docker要求系统为64位.系统内核版本为 3.10 以上,可 ...
- 【JAVA习题六】输入两个正整数m和n，求其最大公约数
import java.util.Scanner; public class Oujilide欧几里得 { public static void main(String[] args) { // TO ...
- vue中生命周期
1,说器生命周期,总觉得有熟悉,又陌生,直到看到一道面试题,问父子组件的生命周期的执行顺序,我擦,真没太注意啊,不知道. 2,网上搜了一下,说法是有点像洋葱圈的形式,由外到内,在到外,因为就像一个盒子 ...
- Misdirection: 1靶机writeup
看下端口 nmap -A 172.16.61.131 一些坑3306无法访问,80,web2py漏洞无法利用 利用dirb遍历网站路径 得到下面命令执行漏洞 http://172.16.61.131: ...
- DNS域传输漏洞利用总结
操作基本的步骤是: 1) 输入nslookup命令进入交互式shell 2) Server 命令参数设定查询将要使用的DNS服务器 3) Ls命令列出某个域中的所有域名 4) Exit命令退出程序 攻 ...