zoukankan      html  css  js  c++  java
  • CSS

    # 一:flex 大法 ## 步骤 1. 设置外部容器 `display: flex;` 2. 设置内部容器 `align-items: stretch;` ## 原理 > ## 示例

    img1 120*200

    img2 120*300

    img3 120*150

    # 二:padding 补偿法 网上搜了一下发现这种方法居然有这种这个高大上的名词。。 ## 步骤 1. 设置外部容器超出隐藏:`overflow: hidden;` 2. 设置内部容器一个很大的 padding-bottom 和负 margin-bottom:`margin-bottom:-10000px; padding-bottom:10000px;` ## 原理 > > CSS 的 margin-bottom 属性用于设置元素的底部外边距,允许设置负数值。一个正数值将让它相对于正常流与邻近块更远,而负数值将使得更近。 我的理解是用 padding-bottom 把外部容器撑开(外部容器设置了 overflow: hidden; 已经创建 BFC),然后负的 margin-bottom 并不会将元素实际高度改变,只会改变这个容器计算时的高度,这样外部容器的高度计算时就为最高内部容器高度了。 ## 示例

    img1 120*200

    img2 120*300

    img3 120*150

    # 三:table 布局 相当于用 HTML 的 table 元素 ## 步骤 1. 设置外部容器 `display: table;` 2. 设置内部容器 `display: table-cell;` ## 原理 > ## 示例

    img1 120*200

    img2 120*300

    img3 120*150

  • 相关阅读:
    [Effective JavaScript 笔记] 第7条:视字符串为16位的代码单元序列
    [翻译]CSS模块-未来的编码方式
    [Effective JavaScript 笔记] 第6条:了解分号插入的局限
    [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
    [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
    [翻译]理解CSS模块方法
    [翻译]纠正PostCSS的4大认识误区
    [翻译]Gulp.js简介
    [Effective JavaScript笔记]第3条:当心隐式的强制转换
    [翻译]在gulp构建工具中使用PostCSS
  • 原文地址:https://www.cnblogs.com/jffun-blog/p/10204045.html
Copyright © 2011-2022 走看看