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 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...
随机推荐
- Java中基于HTTP协议网络编程
java中为我们的网络支持提供了java.net包,能够使我们以编程的方式来訪问Web服务功能,这篇博客,就跟大家分享一下.Java中的网络编程的知识.主要是学习下该java.net包下的API. U ...
- 内核信号处理 & CPU8个通用寄存器
内核信号处理参考: http://www.spongeliu.com/165.html 信号本质上是在软件层次上对中断机制的一种模拟(注意区分中断.异常.信号),其主要有以下几种来源: 程序错误:除零 ...
- 1. 找出数组中的单身狗OddOccurrencesInArray Find value that occurs in odd number of elements.
找出数组中的单身狗: 1. OddOccurrencesInArray Find value that occurs in odd number of elements. A non-empty ze ...
- D3js-API介绍【中】
JavaScript可视化图表库D3.js API中文參考,d3.jsapi D3 库所提供的全部 API 都在 d3 命名空间下.d3 库使用语义版本号命名法(semantic versioning ...
- 【Spring四】AOP之XML配置
AOP:Aspect Oriented Programming 面向切面编程 面向切面编程的核心是动态代理设计模式.请先參见动态代理设计模式笔记. 以Hibernate保存一个对象到数据库为例,因为 ...
- hibernate投影查询
1. 投影查询就是想查询某一字段的值或者某几个字段的值 2. 投影查询的案例 * 如果查询多个字段,例如下面这种方式 List<Object[]> list = session.creat ...
- Codesys——TON和TOF的使用方法
1. 引言 介绍延迟导通.延迟关闭函数的使用方法. 2. 函数描述 TON: 当IN为FALSE时,输出Q为FALSE: 当IN为由FALSE变为TRUE时,延迟导通过程中Q为FALSE,当时间到Q变 ...
- Codeforces--631A--Interview（位运算）
Interview Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:262144KB ...
- POJ2352 Stars 树状数组
emm,ssy说可以直接CDQ分治...%%%但是注意到y是有序的,所以可以直接求一下前缀和就行了. 题干: Astronomers often examine star maps where sta ...
- NodeJs函数式编程
虽然标题是NodeJS函数式编程,但实际上NodeJS 是一个框架,不是一种语言,其采用的语言是 JavaScript.而JavaScript是一种典型的多范式编程语言,算不上是函数式语言,但它有函数 ...