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 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...
随机推荐
- 使用C#执行PowerShell命令
按照网上的教程配置会发生SSL链接错误 该文章的最后使用了SSL来保证账户在连接服务器的时候不发生账户认证错误,但是我经过测试发现这个是不可行的,有一种更为简单的方法 首先要对服务器进行winrm设置 ...
- 使用AtomicInteger原子类代替i++线程安全操作
Java中自增自减操作不具原子性,在多线程环境下是线程不安全的,可以使用使用AtomicInteger原子类代替i++,i--操作完成多线程线程安全操作. 下面是等于i++多线程的自增操作代码: pu ...
- MVC中动作方法三个特性以及解决同名方法冲突
一.Http请求谓词特性(解决方法同名冲突问题的一个方案) 关于Http谓词特点:经常使用,如果不加上该特性,默认动作方法接收所有谓词的请求一般开发中都会加上谓词,限定请求谓词类型 二.NonActi ...
- [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript
Vue watchers allow to perform async updates as a side effect of a property change. This lesson shows ...
- Ubuntu下用hadoop2.4搭建集群（伪分布式）
要真正的学习hadoop,就必需要使用集群,可是对于普通开发人员来说,没有大规模的集群用来測试,所以仅仅能使用伪分布式了.以下介绍怎样搭建一个伪分布式集群. 为了节省时间和篇幅,前面一些步骤不再叙述. ...
- struts2国际化---配置国际化全局资源文件并输出国际化资源信息
我们首先学习怎么配置国际化全局资源文件.并输出资源文件信息 1.首先struts2项目搭建完毕后,我们在src文件夹下.即struts2.xml同级文件夹下创建资源文件.资源文件的名称格式为: XXX ...
- objc_setAssociatedObject
学习笔记:通过 objc_setAssociatedObject alert 和 button关联 及传值 标签: ios 2013-11-22 16:25 7924人阅读 评论(1) 收藏 举报 ...
- java文件和目录的增删复制
在使用java进行开发时常常会用到文件和目录的增删复制等方法.我写了一个小工具类.和大家分享,希望大家指正: package com.wangpeng.utill; import java.io.Fi ...
- 【网络流】 HDU 3468 Treasure Hunting
题意: A-Z&&a-z 表示 集结点 从A点出发经过 最短步数 走到下一个集结点(A的下一个集结点为B ,Z的下一个集结点为a) 的路上遇到金子(*)则能够捡走(一个点仅仅能捡一次) ...
- cmd 命令操纵文件管理器、创建（删除）多级文件夹
命令行打开文件夹窗口的六种方法 1. 使用 start 命令 # 打开指定文件夹 > start 路径 # 打开当前文件夹 > start . # 打开含空格文件夹 > start ...