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及以上版本可以使用 ...
随机推荐
- 苏浪浪 201771010120 《面向对象程序设计（java）》第9周学习总结
实验九异常.断言与日志 实验时间 2018-10-25 1.实验目的与要求 (1) 掌握java异常处理技术: (2) 了解断言的用法: (3) 了解日志的用途: (4) 掌握程序基础调试技巧: 2. ...
- 1417. 重新格式化字符串--来源：力扣（LeetCode）
题目描述: 给你一个混合了数字和字母的字符串 s,其中的字母均为小写英文字母. 请你将该字符串重新格式化,使得任意两个相邻字符的类型都不同.也就是说,字母后面应该跟着数字,而数字后面应该跟着字母. 请 ...
- Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权（三）
在前面两篇文章中,我介绍了基于IdentityServer4的一个Identity Service的实现,并且实现了一个Weather API和基于Ocelot的API网关,然后实现了通过Ocelot ...
- DevOps知识点——3C知多少
CI / CD是任何DevOps操作的两大基石,这是一种开发软件的方式,旨在生产快速而强大的软件,随时以可持续的方式发布更新. 当例行更改代码时,开发周期会更加频繁.更有意义且更快速.通过此过程,我们 ...
- 2/3/4G网络架构
1通讯网络演进 1.1 概念名词 LTE=Long Term Evolution=长期演进, 是3GPP制定的高数据率.低时延.面向分组域优化的新一代宽带移动通信标准项目. E-UTRAN 无线接入网 ...
- NOIP 2017 P3959 宝藏 （状态压缩DP板子）
洛谷题目传送门!! 题目的N这么小,当然是选择用状压DP啦! 等等,我好像不会状缩.... 首先,我们当然是要写状态转移方程了!! 那么,如果我们设 f[s] 状态s下,所要的最小花费,那么很显 ...
- [基础-001]C++字符串转换(char*，const char*，string)
1. string转const char* string str ="abc"; const char* charArr = str.c_str(); 2. const char* ...
- [批处理教程之Shell]002.Linux 常用命令大全
这一次收集的是比较基础的 Linux 命令,其实 Linux 命令未必每个都要记住,只要在用到时能查阅到需要的命令的用法. 系统信息 *.显示机器的处理器架构(1)arch *.显示机器的处理器架构( ...
- Python数据分析：pandas玩转Excel （一）
目录 1 pandas简介 2 导入 3 使用 4 读取.写入 1 pandas简介 1.Pandas是什么? Pandas是一个强大的分析结构化数据的工具集: 它的使用基础是Numpy(提供高性能的 ...
- Rocket - diplomacy - ValName
https://mp.weixin.qq.com/s/so-2x5KLfYF0IMCCqNThwQ 简单调试ValName实现: 1. 使用 Desugar之后如下: ...