html5——伸缩比例
基本概念
1、父盒子设置了伸缩属性，子盒子设置伸缩比例
2、以上设置完之后子盒子会按照比例分布在父盒子中
3、当设置伸缩比例时默认会按照x轴方向分配，因为默认情况下伸缩布局主轴方向是x轴方向
4、设置伸缩属性，没有设置具体宽度，默认是100%
5、父盒子设置了伸缩属性，子盒子设置伸缩比例，子盒子不会超出父盒子，如若添加边框也是盒子模式中的border-box模式
案例描述
1、父盒子设置了伸缩布局，子盒子设置了比例
2、上述设置完之后，子盒子无需设置宽高，会自动填满
3、注意调换主轴方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
} ul {
width: 400px;
height: 30px;
display: flex;
margin: 70px auto;
border: 1px solid #000;
} li {
background-color: pink;
margin: 0 5px;
} li {
flex: 1;
} .layout {
width: 300px;
margin: 20px auto;
height: 500px;
display: flex;
flex-direction: column;
} .nav {
background-color: pink;
flex: 1;
} .section {
flex: 5;
display: flex;
} .section .left {
flex: 1;
background-color: #ccc;
} .section .right {
flex: 4;
background-color: blue;
} .footer {
flex: 1;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="layout">
<div class="nav"></div>
<div class="section">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
html5——伸缩比例的更多相关文章
- html5——伸缩比例案例（携程）
1.有图片的盒子,最好是父盒子设置伸缩属性,a标签设置伸缩比例1,img标签宽度100% 2.不要见到父盒子就设置伸缩属性,而是根据子盒子是否占据一行,若是子盒子占据一行,那么只要给子盒子设置伸缩比例 ...
- HTML5按比例缩略图片并上传的实例
<!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <sc ...
- CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
- html5——伸缩布局
基本概念 1.主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 2.侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 3.方向:默认主轴从左向右,侧轴默认从上到下 4.主轴和侧轴并不是固 ...
- 关于Cocos2d-x中实例伸缩后的位置设置
在有的时候觉得图片太大,会进行缩放,但是在设置位置的时候,用fire->getContentSize(),用的是它原来的大小,就会产生不能准确设置节点的现象 1.在设置伸缩比例的时候,记住比例值 ...
- CSS 伸缩布局
转载于:https://blog.csdn.net/weixin_41342585/article/details/80140513 1. flex-direction:设置伸缩容器中成员的排列方式 ...
- Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
- web前端知识大纲：系列二 css篇
web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...
- （转）web前端知识精简
Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...
随机推荐
- Spring的发展【一】
1.1. Spring1.x 时代 在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在java类和xml配置文件中切换. ...
- HDU1914（稳定婚姻）
http://acm.hdu.edu.cn/showproblem.php?pid=1914 思路:Gale-Shapley算法.算法过程是男士不停地求婚,女士不停地拒绝.在每一轮中,每个尚未订婚的男 ...
- 为什么Java使用System.getenv()获取刚刚设置的环境变量时为空
场景: 在Ubuntu下已经启动了Eclipse,然后通过终端设置了环境变量(export $ENV=123),然后通过System.getenv()获取时显示为空. 解释: 环境变量仅在进程树下方, ...
- 非常适合新手的jq/zepto源码分析04
$.extend = function(target){ var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean ...
- mysql limit具体用法
MYSQL中LIMIT用法_百度知道 答 limit是mysql的语法select * from table limit m,n其中m是指记录开始的index,从0开始,表示第一条记录n是指从第m+1 ...
- 3.5 在批处理模式下使用mysql
在前面的章节中,你交互式地使用mysql输入查询而且查看结果.你也能够以批模式执行mysql.为了做到这些.把你想要执行的命令放在一个文件里,然后告诉mysql从文件读取它的输入: shell> ...
- 三问JavaBean
曾经觉得javabenan是一些java类.后来查看了一些百科 .javabean是java组件技术,又是遵循一些约定.不是非常理解. 什么是javabean? 在jsp程序中用来封装业务逻辑,数据 ...
- CentOS-6.4-DVD系统中安装Oracle-11.2.0.4
完整版见https://jadyer.github.io/2014/05/18/centos-install-oracle/ /** * CentOS-6.4-DVD系统中安装Oracle-11.2. ...
- js对象实例化的常见三种方式
三种常见模式:工厂模式,构造函数模式,原型模式 <span style="font-size:18px;"><!doctype html> <html ...
- Selenium在Jenkins中的配置
// Goals and options -Dmode="" -DuseGrid="true" -Dhub=${Hub} -DbrowserType=${Br ...