前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • 等高布局
  • 伪等高:padding+margin
  • 伪等高:边框模拟
  • table-cell
  • absolute+padding
  • flex
  • grid
  • 百分比环形图

这有帮助吗?

  1. Css探索系列

CSS应用示例02

等高布局

等高布局是指子元素在父元素中高度相等的布局方式。

伪等高:padding+margin

背景色是在 padding 区域显示的,设置一个大数值的 padding-bottom,再设置相同数值的负的 margin-bottom,使背景色铺满元素区域,又符合元素的盒模型的计算公式,实现视觉上的等高效果。

.box_01 {
    overflow: hidden;
    font-size: 0;
}

.box_01 .equal_height {
    display: inline-block;
    width: 200px;
    padding: 15px;
    vertical-align: top;
    margin-bottom: -300px;
    padding-bottom: 300px;
    box-sizing: border-box;
    font-size: initial;
}

伪等高:边框模拟

用父元素左右边框伪装左右两个兄弟元素的背景色,然后将将两个透明背景的元素使用绝对定位覆盖在父元素的左右边框上,实现视觉上的等高效果。

注意: 左右两侧元素的内容高度不能大于中间元素内容高度。

.box_02 {
    position: relative;
    padding: 0;
    border-left: 200px solid sandybrown;
    border-right: 200px solid slateblue;
    box-sizing: border-box;
}

.box_02 .equal_height {
    width: 200px;
    padding: 15px;
    box-sizing: border-box;
}

.box_02 .equal_height:nth-child(1) {
    position: absolute;
    left: -200px;
    top: 0;
}

.box_02 .equal_height:nth-child(3) {
    position: absolute;
    right: -200px;
    top: 0;
}

table-cell

表格的一个特性:所有单元格高度都相等。

.box_03 .equal_height {
    width: 33.33%;
    display: table-cell;
}

absolute+padding

用 position: absolute 设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同,实现等高效果

.box_04 {
    position: relative;
    width: 200px;
    padding: 0 200px;
}

.box_04 .equal_height {
    width: 200px;
    padding: 15px;
    box-sizing: border-box;
}

.box_04 .equal_height:nth-child(1) {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.box_04 .equal_height:nth-child(3) {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

flex

flex 盒子下的子项目高度默认为父元素的高度。

.box_05 .container {
    display: flex;
    flex-direction: row;
}

.box_05 .container .equal_height {
    flex: 1 1 33.33%;
    padding: 15px;
    box-sizing: border-box;
}

grid

grid(网格) 布局的每一行的单元格高度默认相等。

.box_05 .container {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: 100%;
}
.box_05 .container .equal_height {
    padding: 15px;
}

百分比环形图

方法一: 绝对定位 + 旋转。

<style>
    .ring {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
    .ring .percent {
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 140px;
        height: 140px;
        line-height: 140px;
        background-color: white;
        border-radius: 50%;
    }
    .ring .left,
    .ring .right {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 200px;
        background-color: #e31515;
        overflow: hidden;
        border-radius: 200px 0 0 200px;
    }
    .ring .right {
        left: auto;
        right: 0;
        border-radius: 0 200px 200px 0;
    }
    .ring .left:after,
    .ring .right:after {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 200px 0 0 200px;
        background-color: #13cfe7;
        content: " ";
        transform-origin: right center;
    }
    .ring .right:after {
        border-radius: 0 200px 200px 0;
        transform-origin: left center;
    }
</style>
<div class="ring">
    <div class="left"></div>
    <div class="right"></div>
    <div class="percent"></div>
</div>

方法二: 锥形渐变。注意浏览器兼容性。

<style>
    .ring {
        width: 200px;
        height: 200px;
        margin: auto;
        border-radius: 50%;
        background-image: conic-gradient(#e31515 60%, #13cfe7 60% 100%);
        -webkit-mask: radial-gradient(transparent 70px, #fff 0);
        mask: radial-gradient(transparent 70px, #fff 0);
    }
</style>
<div class="ring"></div>
上一页CSS应用示例下一页由Z Index引发的层叠上下文思考

最后更新于3年前

这有帮助吗?

image-20211119193620424

伪等高:padding-bottom和负margin-bottom DEMO
伪等高:边框模拟 DEMO
table-cell DEMO
absolute+padding DEMO
Flex DEMO
Grid DEMO
查形绝对定位 + 旋转DEMO
查形锥形渐变DEMO