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及以上版本可以使用 ...
随机推荐
- python-基站位置查询
本文采用的接口是聚合数据提供的 python2.7环境,3.x环境试了下好像不支持,获取位置信息为空 如下为运用代码: #coding=utf-8 ''' Created on 2019年9月18日 ...
- MyBatis—— org.apache.ibatis.binding.BindingException: Type interface com.web.mybatis.i.PersonMapper is not known to the MapperRegistry.
报错信息: Exception in thread "main" org.apache.ibatis.binding.BindingException: Type interfac ...
- 使用OS模块来获取文件路径
1.os模块概述 Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的. 2.常用方法 os.getcwd() 函数得到当前工作目录,即当前Pyth ...
- 设计并测试Trapezium类 代码参考
#include <iostream> using namespace std; class Trapezium { private: int x1,y1,x2,y2,x3,y3,x4,y ...
- mysql去重复关键字distinct的用法
distinct的去重复的提前是表中所有列的数据完成相同时,才能把相同的数据只保留一条,并不是 distinct 列名,除去某一列相同的数据,并且 distinct要放在第一个列前面.案例如下:一个学 ...
- R语言入门二
一.R语言应知常用函数 1.getwd() 函数:获取工作目录(同eclipse设置workspace类似),直接在R软件中使用,如下图: 2.setwd(dir=”工作目录”) 函数:设置R软件RS ...
- Jpa使用详解
目录 ORM思想 1.ORM概述 2.为什么要使用ORM 3.常见的ORM框架 JPA简介 1.JPA概述 2.JPA的优势 3.JPA与hibernate的关系 JPA入门案例 1.搭建开发环境 常 ...
- akka-typed(3) - PersistentActor has EventSourcedBehavior
akka-typed中已经没有PersistentActor了.取而代之的是带有EventSourcedBehavior的actor,也就是一种专门支持EventSource模式的actor.Even ...
- UML ——区分类图中的几种关系.md
目录 关联关系 (association): 聚合关系 (aggregation): 合成关系 (composition): 依赖关系 (dependency): 总结: 原文地址 http://ww ...
- Linux（二） 系统远程访问
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 1. Why?为什么需要远程访问? 人和人之间对话有两种方式,一种是面对面直接交谈,另一种是打电话. 我 ...