左侧固定右侧自适应两栏布局
以下六种方案中，只有方案二 flex 布局能保证两栏是等高的；其他方案两栏均不等高。 方案一：float + BFC #wrapper { overflow: hidden; // 清除浮动 } .left { float: left; width: 200px; } .right { overflow: hidden; // 触发BFC } 方案二：flex （同时两栏等高） .wrapper …
弹性方框模型（Flexible Box Model）快速入门
我可以肯定，您对于页面上水平或垂直排列的样式元素已经了解得够多了。但是， CSS 还缺少适用于此任务的合适机制。了解 CSS3 弹性方框模型（简称 Flexbox） 该草案将 Flexbox 描述如下： [...]针对接口设计而优化的 CSS 框模型。除了 CSS 中已有的布局系统之外，该模型还提供了一个额外的布局系统。[CSS21] 在这个新的框模型中，框的子代采用水平或垂直布局，而且可将未使用…
用 DOM 与 CSS 展示二叉树
本文内容较长，主要涉及如下内容： 二叉树及相关算法 Flexbox 布局 CSS 背景图片，计数器等应用 使用 SVG 做为背景图片会遇到的问题 最近在讲各种树的算法与题目的时候，为了给学生演示，总是想要看到树的结构，总是画出来又慢又丑，在控制台里展开看的话实在太麻烦，而且不够直观，我就寻思能不能把树给展示在页面里。 什么是二叉树 首先看一下二叉树的定义：一颗二叉树是由一个根结点和一个左子树和一颗…
避免 Web 中不必要的渲染
为站点或应用程序绘制元素可能会非常昂贵，并且会对我们的运行时性能产生负面的连锁反应。 在本文中，我们将快速了解什么可以触发浏览器中的绘画，以及如何防止发生不必要的绘画。 绘画：超级快速的游览 浏览器必须执行的主要任务之一是将您的 DOM 和 CSS 转换为屏幕上的像素，它通过一个相当复杂的过程来完成。 它首先读取标记，然后创建一个 DOM 树。 它对 CSS 做了类似的事情，并由此创建了 CSSO…
具有 CSS 区域和排除的 Web 杂志式布局
Web 是一个极其强大的文本平台，Adobe 在这一领域拥有丰富的经验和专业知识。 因此，当 Adobe 正在寻找帮助推动 Web 向前发展的方法时，进一步提升 Web 的文本功能似乎是我们显而易见的起点。 Web 通常采用单列、垂直方向的文本。 尽管可以在图形周围排列文本，甚至可以使用 CSS 将文本格式化为多列，但在 Web 上实现真正的杂志式布局仍然非常困难。 借助 CSS Region…
什么是最好的兼顾桌面和移动 Web 适配的响应式方案？
rem 数值计算 如果利用 rem 来设置 css 的值，一般要通过一层计算才行，比如如果要设置一个长宽为 100px 的 div，那么就需要计算出 100px 对应的 rem 值是 100 / 16 =6.25rem 对于使用 sass 的工程 前端构建中，完全可以利用 scss 来解决这个问题，例如我们可以写一个 scss 的 function px2rem 即： @function px2r…
下一代网络布局：National Geographic Forest Giant
使用 CSS 和浏览器布局中的工具可以实现令人惊叹的 Web 内容可视化。 使用 CSS 过滤器、WebGL、HTML5 视频、SVG、Canvas 画布等 Web 功能以及 CSS 区域、CSS 形状和 CSS 自定义过滤器等不断发展的未来技术，可以极大地扩展创意领域。 Adobe 长期以来一直与热衷于布局和设计的内容创建者合作，因此一直积极地将这些知识应用于网络，并为许多不断发展的网络标准做出…
CSS 题集 烧脑集合
1.css 属性命名区分大小写么？ 2.margin-top 和 margin-botton 对于行内（内敛 inline）元素效果一样么？ 3.padding-top 和 padding-bottom 对于 inline 元素都会增加元素本身的大小么？ 4.如果一个 p 标签拥有 font-size：10rem，那么这个 p 标签会自动响应窗口布局么？ 5.伪类 :checked 对于 opti…
Shadow DOM 201：CSS 和样式
这篇文章将继续讨论更多有关 Shadow DOM 的精彩内容。 文中内容完全基于 Shadow DOM 101 中讨论的概念，如果你在找入门文章，那么先去看看那一篇。 介绍 首先得承认，没有样式的标记谈不上漂亮。好在 Web 组件背后的那群聪明家伙们 早就预见了这一点。所以当我们在样式化 shadow 树中的内容时便拥有了众多选择。 在 Chrome 中，开启 about:flags 页面中的"E…
简明 CSS 2.1 参考手册
原文：http://www.jinbuguo.com/w3c/css21.html 导入样式表的方法 <style type="text/css" media="all" title="应用于所有媒体的样式"> @import url(/style/css/global.css); /*全局样式*/ @import url(/style/css/skyblue.css); /*个性化样…
创建移动优先的响应式网页设计
我们将介绍如何创建以移动为先的自适应 Web 体验。 本文和 演示 将讨论以下内容： 关于我们的新产品，还有更多最新的响应式指南 Web 基础知识 站点。 为什么我们需要创建移动优先、响应式、自适应的体验 如何为自适应站点构建 HTML 以优化性能并优先考虑灵活性 如何首先编写定义共享样式的 CSS，使用媒体查询为更大的屏幕构建样式，并使用相对单位 如何编写不显眼的 JavaScript 以有条件…
CSS 设计指南之界面组建
导航菜单 菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认列表项（li）是块级元素，因此它们会上下堆叠。 纵向菜单 标签： <nav class="list1"> <ul> <li><a href="#">Alternative</a><…
CSS 设计指南之页面布局
布局的基本概念 多栏布局三种基本的实现方案： 固定宽度、流动、弹性 固定宽度布局： 大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100像素宽。 其中 960 像素是最常见的，因为这个宽度适合所有现代显示器， 而且能够被 16、12、10、8、6、5、4 和 3 整除， 不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素数。 参考：http://www.960.gs 流…
再谈等高列布局、水平垂直居中与置顶页脚
CSS 中的等高布局、水平垂直居中以及置顶页脚 Sticky Footer 这几个效果（我喜欢把他们说成是CSS效果，而不喜欢说其是问题）并不陌生，而且很多同学都似乎有碰到过，也经常体验过。甚至在很多前端面试中也常被考官问到，有的时候还直接被考官给秒杀了。 既然都有相关的教程，为何还费那么多劲再次扯蛋，难道真的闲得蛋疼了吗？其实并不如此，随着技术的更新，我们很多思路也得跟着创新，不能固定自封。那么…
- 共 12 页
- 1
