Flex布局

Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

/*父容器,设置弹性布局*/
.parent{display: flex;}
/*设置父容器主轴方向*/
.parent{ flex-direction: row | row-reverse | column | column-reverse;} /*设置内容放大比例,0为有剩余空间也不放大,默认0*/
.item {flex-grow: <number>; }
/*设置内容缩小比例,0为剩余空间不足也不缩小,默认0*/
.item {flex-shrink: <number>; }

相连DIV边框重复

.border{
margin-right:-1px;
margin-bottom:-1px;
}

百分百宽度减去固定宽度

box-sizing:border-box;
border-left:100px solid transparent;

inline-block并排后

父容器下方多出间距

width: 300rpx;
display: inline-block;
vertical-align: bottom;

【前端技术】一篇文章搞掂:CSS的更多相关文章

  1. 【前端技术】一篇文章搞掂:uni-app

    语法 //列表遍历,遍历数组,第一个参数为数组中元素,可以给第二个参数作为索引值 <view v-for="(item, itemIndex) in card" :key=& ...

  2. 【前端技术】一篇文章搞掂:WeX5

    一.组件 Data组件 http://docs.wex5.com/data/ 遍历输出

  3. 【前端技术】一篇文章搞掂:微信小程序

    实战: 1.[openId]获取openId 有如下几种方法: 通过wx.login()获取临时登录凭证 code,然后通过code2session获取openId wx.login():https: ...

  4. 【前端技术】一篇文章搞掂:JS

    待补充 //以下等价 if(val) if(val!=null&&val!=undefined&&val!="") //以下等价 if(!val) ...

  5. 【已转移】【Java架构:基础技术】一篇文章搞掂:Spring

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 本文是对<SPRING实战第4版>的总结,大家也可以去仔细研读该书 [------------------------ ...

  6. 【进阶技术】一篇文章搞掂:Spring Cloud Stream

    本文总结自官方文档http://cloud.spring.io/spring-cloud-static/spring-cloud-stream/2.1.0.RC3/single/spring-clou ...

  7. 【Java架构:进阶技术】——一篇文章搞掂:JVM调优

    Sun官方定义的Java技术体系: Java程序设计语言 各种硬件平台上的Java虚拟机 Class文件格式 Java API类库 来自商业机构和开源社区的第三方Java类库 JDK(Java Dev ...

  8. 【进阶技术】一篇文章搞掂:OAuth2

    一.第一步 1.什么是OAuth2,为什么应该了解 应用程序请求资源所有者进行认证,并接受tokens来访问这些资源应用程序不是以控制资源的“人”的角度去访问资源,而是用许可证举例,备用钥匙,车主主钥 ...

  9. 【进阶技术】一篇文章搞掂:Spring高级编程

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 本文基于<Spring5高级编程>一书进行总结和扩展,大家也可以自行研读此书. 十一.任务调度 任务调度主要由三部分组 ...

随机推荐

  1. 【LeetCode 38】报数

    题目链接 [题解] 模拟题 [代码] class Solution { public: string inttostr(int x){ string temp=""; while ...

  2. 高精度小数BigDecimal+二分——java

    高精度小数第一题 import java.util.*; import java.math.*; public class Main { public static void main(String ...

  3. JMeter ServerAgent服务器资源监控插件

    本文介绍对Linux服务器的服务进行压测时,使用jmeter serverAgent插件监控服务器资源. 1.插件准备 所需插件: JMeterPlugins-Extras.jar JMeterPlu ...

  4. python find()函数

    实例(Python 2.0+)  str1 = "this is string example....wow!!!"; str2 = "exam"; print ...

  5. IE8 indexOf

    因为ie8中的js数组没有indexOf方法,所以使用之前要先加入这段js代码 if (!Array.prototype.indexOf) { Array.prototype.indexOf = fu ...

  6. 【react】---react项目中如何使用iconfont

    一.路由配置 export const TabBarRouter = [ { path:"/home", icon:"\ue628", name:"首 ...

  7. Java 实例 - 连接字符串

    以下实例演示了通过 "+" 操作符和StringBuffer.append() 方法来连接字符串,并比较其性能: StringConcatenate.java 文件 1 2 3 4 ...

  8. Cocos2d-x之Layer

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Layer是处理玩家事件响应的Node子类.与场景不同,层通常包含的是直接在屏幕上呈现的内容,并且可以接受用户的输入事件,包括触摸,加速度 ...

  9. linux kill命令

    代码 elif [ "$SIGNAL" = 'reload' ]; then kill -USR1 $PID 总结:kill -9 pid 等同于kill -USR9 pid 等同 ...

  10. 14-vim-替换命令-01-替换

    命令 英文 功能 工作模式 r replace 替换当前字符 命令模式 R replace 进入替换模式 替换模式 R命令进入替换模式,输入新字符替换当前光标所在位置的字符,替换完成后,按下ESC可以 ...