css3 伸缩百分比的调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 400px;height: 400px;
border: 1px solid red;
display: flex;/*设置为伸缩的父元素*/
}
.dv1{
width: 100px;height: 100px;/*宽度无效*/
background: red;
flex: 2;
}
.dv2{
width: 100px;height: 100px;/*宽度无效*/
background: blue;
flex: 2;
}
.dv3{
width: 100px;height: 100px;/*宽度无效*/
background: yellow;
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="dv1"></div>
<div class="dv2"></div>
<div class="dv3"></div>
</div>
</body>
</html>
主要是用:
display:flex;
flex:1;/*宽度无效*/
css3 伸缩百分比的调整的更多相关文章
- css3伸缩布局中justify-content详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- 使用CSS3伸缩盒实现图片垂直居中
用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...
- css3的calc() css3的百分比减宽,减高,加,乘,除，适合用于后台的排版定位
css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...
- CSS3伸缩盒Flexible Box
这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...
- CSS3——伸缩布局及应用
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...
- css3圆环百分比，菜单栏定位导航
前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...
- CSS3 伸缩布局盒模型
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
随机推荐
- 对 IIC 总线的理解、调用函数以及常见面试问题
一.IIC 总线概述: IIC 即Inter-Integrated Circuit(集成电路总线) I2C总线是PHLIPS公司推出的一种串行总线, I2C总线只有两根双向信号线.一根是数据线SDA, ...
- Linux内存、性能诊断中vmstat命令的详解
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存 交换情况,IO读写情况.相比top,通过vmstat可以看到 ...
- ld: library not found for -lstdc++.6
ld: library not found for -lstdc++.6 Xcode10 删除 libstdc++.6.tbd libstdc++.6.0.9.tbd 用 libc++.tbd lib ...
- James 如何作为服务在后台启动
james 启动后是在前台运行的,就像你跑一个微服务,前台运行显然不合理,关闭ssh后就会断开,所以我们得配置在后台,使用service配置即可 配置 james/bin 下的phoenix.sh,配 ...
- 我的IntelliJ IDEA 设置
1.关闭代码折叠 2.设置代码格式 3.函数参数提醒
- 物联网架构成长之路(29)-Jenkins环境搭建
0. 说明 哈哈,前面中间插入了一篇Eclipse增加Git插件,在此之前真的没有用过GIT. 1. 运行Jenkins 这里为了方便,还是用Docker方式安装,由于这个是标准的war报,不对Doc ...
- 再谈Promise
方法 构造函数 接受的参数是一个带两个Function参数的函数,实际的异步代码编写在这个函数里,成功后调用第一个参数,失败调用第二个: Promise.prototype.catch 当构造函数里调 ...
- python环境与PyDev IDE配置
工具eclipse:我目前用是的Eclipse oxygen.历史版本可参考:https://wiki.eclipse.org/Older_Versions_Of_EclipsePython:http ...
- gsoap内存管理与释放
(一)gSoap客户端调用WebService完成后注意内存释放顺序 //Soap资源清理 soap_destroy(soap_sp.get()); //清理反序列化的类实例 soap_end(soa ...
- 为什么不应该使用Zookeeper做服务发现？（转载）
转载自: http://dockone.io/article/78 [编者的话]本文作者通过ZooKeeper与Eureka作为Service发现服务(注:WebServices体系中的UDDI就是个 ...