CSS 布局
8篇文章 · 0订阅
  • 重温 Flex 布局
    1. 两栏布局 flex 是一个简写属性，用来设置 flex-grow、flex-shrink、flex-basis。一般来说让元素等高需要额外设置，而 flex 容器的存在一个默认属性值：align-items:stretch，它会帮助你，当然也会给你带来糟糕的体验。 2. …
    CSS
    重温 Flex 布局
  • 一些有趣的 CSS 魔法和布局（上）
    布局和样式，是每个前端的必修课。在日常的工作中，也会碰到一些特定场景的布局需求，配合上样式，就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局，以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享。 由于篇幅原因，会分为 2 篇。今天，会先介绍一些有趣而又实用的布局的写…
    CSS
    一些有趣的 CSS 魔法和布局（上）
  • grid布局指南
    Grid Layout是CSS的一种新的布局模型，它具有强大的功能来控制框及其内容的大小和位置。与单轴布局的Flexible Box Layout不同，Grid Layout可以在两个轴（列和行）中对齐内容。 设计一个如图的模块，划分为5个区域：游戏标题，排行榜，分数栏，游戏区…
    CSS
  • 「译」Flexbox 基本原理
    整理自 MDN web docs 的笔记，同时参考了 Web Bos 上的 什么是 Flexbox 系列视频。 Flexbox 是 Flexible Box Module 的缩写。 它是一种布局模型，允许我们方便地控制 html 元素之间的空间分布和对齐 [2]。 Flexbo…
    CSS
  • Css实现垂直居中的几种方法
    在前端布局过程中，我们实现水平居中比较简单，一般通过margin:0 auto;和父元素 text-align: center;就能实现。但要实现垂直居中就没有那么容易，下面向大家分享下我工作中实现垂直居中的几种方法。 这种方法比较适合文字的居中，其核心是设置行高（line-h…
    CSS
  • css经典布局系列二——等分等高布局
    此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。 相当于right也开启了bfc，就不会被left的浮动影响到。 设置 over…
    CSS
  • css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
    缺点：如果有文字出现，布局就会错乱，导致扩展性不好。 3、将未浮动的middle挤了下去。 此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来； 如果某一列内容过多，文字会溢出。解决方法：等高布局；
    CSS