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及以上版本可以使用 ...
随机推荐
- poj2778 AC自动机
以下内容均为转载,,只有代码是自己写的=-= http://blog.csdn.net/morgan_xww/article/details/7834801 转载地址 博主写的很好 ------- ...
- 【MySQL】MyISAM和InnoDB存储引擎区别详解
MyISAM 主键索引(引擎的索引文件和数据文件是分离的) (图片来自:https://blog.csdn.net/u010922732/article/details/82994253) 非主键索引 ...
- js生成一个上限跟下限的随机数
function sj() { //x上限,y下限 var x = 2000; var y = 1800; var rand = parseInt(Math.random() * (x - y + 1 ...
- layui 数据表格使用
//第一个实例 table.render({ elem: '#demo' ,height: 400 ,url: '/My_NewsTest/LookServlet' //数据接口 ,page: tru ...
- day20 函数闭包与装饰器
装饰器:本质就是函数,功能是为其他函数添加新功能 原则: 1.不修改被装饰函数的源代码(开放封闭原则) 2.为被装饰函数添加新功能后,不修改被修饰函数的调用方式 装饰器的知识储备: 装饰器=高阶函数+ ...
- DQN（Deep Q-learning）入门教程（二）之最优选择
在上一篇博客:DQN(Deep Q-learning)入门教程(一)之强化学习介绍中有三个很重要的函数: 策略:\(\pi(a|s) = P(A_t=a | S_t=s)\) 状态价值函数:\(v_\ ...
- Linux系统部署JavaWeb项目(超详细tomcat,nginx,mysql)
转载自:Linux系统部署JavaWeb项目(超详细tomcat,nginx,mysql) 我的系统是阿里云的,香港的系统,本人选择的是系统镜像:CentOS 7.3 64位. 具体步骤: 配置Jav ...
- 基于 kubeadm 搭建高可用的kubernetes 1.18.2 (k8s)集群 三 集群可用性测试
1. 创建nginx ds # 写入配置 $ cat > nginx-ds.yml <<EOF apiVersion: v1 kind: Service metadata: name ...
- Spring_使用JdbcTemplate和JdbcDaoSupport
1.JdbcTemplate 简化 JDBC 模板查询 ①每次使用都创建一个 JdbcTemplate 的新实例, 这种做法效率很低下.②JdbcTemplate 类被设计成为线程安全的, 所以可以再 ...
- 【Python】自己写日志功能
Python有自带的logging模块,用于日志记录,功能很强大,但不好用,使用挺麻烦的,而且发现了几个bug,调用了一个logger.warning()一次,结果日志文件中出现了n行记录,且逐渐变成 ...