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及以上版本可以使用 ...
随机推荐
- [!] Unable to find a pod with name, author, summary, or description matching `AFNetworking`
大量的答案是删除~/Library/Caches/CocoaPods/search_index.json 没有起作用 有用答案: https://blog.csdn.net/qq_35827461/ ...
- C# 数据操作系列 - 14 深入探索SqlSugar
0.前言 在上一篇中,我们知道了如何使用SqlSugar,但是也只是简单的了解了如何使用,仿佛是套着镣铐行走,这明显不符合一个合格的程序员应有的素养.所以,这一篇我们将对其进行深挖,探究其背后的秘密. ...
- uniapp打包发版到linux服务器步骤----H5端
最近在写uni-app项目,项目打包部署到服务器后,搞了好一会一直打开是空白页,原来自己有几个地方疏忽了,现把步骤整理一下: 第1步:编辑配置 mainifest.json 文件 tip:运行的基础路 ...
- Java——倒序输出Map集合
package com.java.test.a; import java.util.ArrayList; import java.util.LinkedHashMap; import java.uti ...
- ## 0521Day04内部类
[重点] Math公式 静态导入 正则表达式 内部类 访问修饰符 [Math] Math包的相关方法: round:四舍五入:-10.9==>-11/-11.2==>-11 floor:向 ...
- 小技巧：用 GitBook 组织 Markdown 文档
喜欢用 Markdown 写文档,那怎么把一个个 Markdown 文档组成在一起呢? 这篇文章,分享了一个用 GitBook 来组织 Markdown 文档的办法.一起了解下吧. Markdown ...
- jchdl-GSL-实例 - 使用Intellij IDEA创建Mux
https://mp.weixin.qq.com/s/yP9xKeg0iHJChuMPzxdJtA https://github.com/wjcdx/jchdl/blob/master/src/org ...
- for循环的嵌套 函数方法
1.双层for循环:外层循环控制行,内行循环控制列 for循环嵌套例子 用五角星组成一个矩形 // 99乘法表 // for(var i = 1 ;i <= 9 ; i++){ // f ...
- Java实现 LeetCode 770 基本计算器 IV（暴力+分析题）
770. 基本计算器 IV 给定一个表达式 expression 如 expression = "e + 8 - a + 5" 和一个求值映射,如 {"e": ...
- Java实现 LeetCode 151 翻转字符串里的单词
151. 翻转字符串里的单词 给定一个字符串,逐个翻转字符串中的每个单词. 示例 1: 输入: "the sky is blue" 输出: "blue is sky th ...