CSS

CSS

CSS

13705 文章 话题 18999 浏览

左侧固定右侧自适应两栏布局

以下六种方案中,只有方案二 flex 布局能保证两栏是等高的;其他方案两栏均不等高。 方案一:float + BFC #wrapper { overflow: hidden; // 清除浮动 } .left { float: left; width: 200px; } .right { overflow: hidden; // 触发BFC } 方案二:flex (同时两栏等高) .wrapper …

JSmiles 2022-05-26 浏览 780 评论 0 收藏 0

弹性方框模型(Flexible Box Model)快速入门

我可以肯定,您对于页面上水平或垂直排列的样式元素已经了解得够多了。但是, CSS 还缺少适用于此任务的合适机制。了解 CSS3 弹性方框模型(简称 Flexbox) 该草案将 Flexbox 描述如下: [...]针对接口设计而优化的 CSS 框模型。除了 CSS 中已有的布局系统之外,该模型还提供了一个额外的布局系统。[CSS21] 在这个新的框模型中,框的子代采用水平或垂直布局,而且可将未使用…

带上头具痛哭 2022-05-11 浏览 779 评论 0 收藏 0

用 DOM 与 CSS 展示二叉树

  • 用 DOM 与 CSS 展示二叉树
  • 用 DOM 与 CSS 展示二叉树
  • 用 DOM 与 CSS 展示二叉树
  • 用 DOM 与 CSS 展示二叉树

本文内容较长,主要涉及如下内容: 二叉树及相关算法 Flexbox 布局 CSS 背景图片,计数器等应用 使用 SVG 做为背景图片会遇到的问题 最近在讲各种树的算法与题目的时候,为了给学生演示,总是想要看到树的结构,总是画出来又慢又丑,在控制台里展开看的话实在太麻烦,而且不够直观,我就寻思能不能把树给展示在页面里。 什么是二叉树 首先看一下二叉树的定义:一颗二叉树是由一个根结点和一个左子树和一颗…

JSmiles 2022-05-04 浏览 746 评论 0 收藏 0

避免 Web 中不必要的渲染

  • 避免 Web 中不必要的渲染
  • 避免 Web 中不必要的渲染
  • 避免 Web 中不必要的渲染
  • 避免 Web 中不必要的渲染

为站点或应用程序绘制元素可能会非常昂贵,并且会对我们的运行时性能产生负面的连锁反应。 在本文中,我们将快速了解什么可以触发浏览器中的绘画,以及如何防止发生不必要的绘画。 绘画:超级快速的游览 浏览器必须执行的主要任务之一是将您的 DOM 和 CSS 转换为屏幕上的像素,它通过一个相当复杂的过程来完成。 它首先读取标记,然后创建一个 DOM 树。 它对 CSS 做了类似的事情,并由此创建了 CSSO…

兮颜 2022-05-03 浏览 760 评论 0 收藏 0

具有 CSS 区域和排除的 Web 杂志式布局

  • 具有 CSS 区域和排除的 Web 杂志式布局
  • 具有 CSS 区域和排除的 Web 杂志式布局
  • 具有 CSS 区域和排除的 Web 杂志式布局
  • 具有 CSS 区域和排除的 Web 杂志式布局

Web 是一个极其强大的文本平台,Adobe 在这一领域拥有丰富的经验和专业知识。 因此,当 Adob​​e 正在寻找帮助推动 Web 向前发展的方法时,进一步提升 Web 的文本功能似乎是我们显而易见的起点。 Web 通常采用单列、垂直方向的文本。 尽管可以在图形周围排列文本,甚至可以使用 CSS 将文本格式化为多列,但在 Web 上实现真正的杂志式布局仍然非常困难。 借助 CSS Region…

坏尐絯 2022-04-16 浏览 814 评论 0 收藏 0

什么是最好的兼顾桌面和移动 Web 适配的响应式方案?

rem 数值计算 如果利用 rem 来设置 css 的值,一般要通过一层计算才行,比如如果要设置一个长宽为 100px 的 div,那么就需要计算出 100px 对应的 rem 值是 100 / 16 =6.25rem 对于使用 sass 的工程 前端构建中,完全可以利用 scss 来解决这个问题,例如我们可以写一个 scss 的 function px2rem 即: @function px2r…

JSmiles 2022-04-15 浏览 733 评论 0 收藏 0

下一代网络布局:National Geographic Forest Giant

  • 下一代网络布局:National Geographic Forest Giant
  • 下一代网络布局:National Geographic Forest Giant
  • 下一代网络布局:National Geographic Forest Giant
  • 下一代网络布局:National Geographic Forest Giant

使用 CSS 和浏览器布局中的工具可以实现令人惊叹的 Web 内容可视化。 使用 CSS 过滤器、WebGL、HTML5 视频、SVG、Canvas 画布等 Web 功能以及 CSS 区域、CSS 形状和 CSS 自定义过滤器等不断发展的未来技术,可以极大地扩展创意领域。 Adobe 长期以来一直与热衷于布局和设计的内容创建者合作,因此一直积极地将这些知识应用于网络,并为许多不断发展的网络标准做出…

成熟的代价 2022-04-14 浏览 921 评论 0 收藏 0

CSS 题集 烧脑集合

1.css 属性命名区分大小写么? 2.margin-top 和 margin-botton 对于行内(内敛 inline)元素效果一样么? 3.padding-top 和 padding-bottom 对于 inline 元素都会增加元素本身的大小么? 4.如果一个 p 标签拥有 font-size:10rem,那么这个 p 标签会自动响应窗口布局么? 5.伪类 :checked 对于 opti…

JSmiles 2022-03-18 浏览 790 评论 0 收藏 0

Shadow DOM 201:CSS 和样式

这篇文章将继续讨论更多有关 Shadow DOM 的精彩内容。 文中内容完全基于 Shadow DOM 101 中讨论的概念,如果你在找入门文章,那么先去看看那一篇。 介绍 首先得承认,没有样式的标记谈不上漂亮。好在 Web 组件背后的那群聪明家伙们 早就预见了这一点。所以当我们在样式化 shadow 树中的内容时便拥有了众多选择。 在 Chrome 中,开启 about:flags 页面中的"E…

勿忘初心 2022-03-04 浏览 1004 评论 0 收藏 0

CSS 编码规范

在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 便于维护 保持代码清晰易懂 保持代码的可拓展性 为了实现这一目标,我们要采用诸多方法。 本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的态度。 CSS 文档分析 无论编写什么文档,我们都应当尽力维持统一的风格,包括统一的注释、统一的语法与统一…

JSmiles 2022-02-26 浏览 951 评论 0 收藏 0

简明 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); /*个性化样…

JSmiles 2022-02-23 浏览 1005 评论 0 收藏 0

创建移动优先的响应式网页设计

我们将介绍如何创建以移动为先的自适应 Web 体验。 本文和 演示 将讨论以下内容: 关于我们的新产品,还有更多最新的响应式指南 Web 基础知识 站点。 为什么我们需要创建移动优先、响应式、自适应的体验 如何为自适应站点构建 HTML 以优化性能并优先考虑灵活性 如何首先编写定义共享样式的 CSS,使用媒体查询为更大的屏幕构建样式,并使用相对单位 如何编写不显眼的 JavaScript 以有条件…

猫九 2021-12-29 浏览 846 评论 0 收藏 0

CSS 设计指南之界面组建

  • CSS 设计指南之界面组建
  • CSS 设计指南之界面组建
  • CSS 设计指南之界面组建
  • CSS 设计指南之界面组建

导航菜单 菜单由一组链接组成。用 HTML 中的列表元素(ul 或 ol)来分组链接不仅符合逻辑,而且即使没有额外的 CSS 也能适当显示链接的层次。默认列表项(li)是块级元素,因此它们会上下堆叠。 纵向菜单 标签: <nav class="list1"> <ul> <li><a href="#">Alternative</a><…

JSmiles 2021-12-25 浏览 830 评论 0 收藏 0

CSS 设计指南之页面布局

  • CSS 设计指南之页面布局
  • CSS 设计指南之页面布局
  • CSS 设计指南之页面布局
  • CSS 设计指南之页面布局

布局的基本概念 多栏布局三种基本的实现方案: 固定宽度、流动、弹性 固定宽度布局: 大小不会随用户调整浏览器窗口大小而变化,一般是 900 到 1100像素宽。 其中 960 像素是最常见的,因为这个宽度适合所有现代显示器, 而且能够被 16、12、10、8、6、5、4 和 3 整除, 不仅容易计算等宽分栏的数量,而且计算结果也能得到没有小数的像素数。 参考:http://www.960.gs 流…

JSmiles 2021-12-21 浏览 1018 评论 0 收藏 0

再谈等高列布局、水平垂直居中与置顶页脚

  • 再谈等高列布局、水平垂直居中与置顶页脚
  • 再谈等高列布局、水平垂直居中与置顶页脚
  • 再谈等高列布局、水平垂直居中与置顶页脚
  • 再谈等高列布局、水平垂直居中与置顶页脚

CSS 中的等高布局、水平垂直居中以及置顶页脚 Sticky Footer 这几个效果(我喜欢把他们说成是CSS效果,而不喜欢说其是问题)并不陌生,而且很多同学都似乎有碰到过,也经常体验过。甚至在很多前端面试中也常被考官问到,有的时候还直接被考官给秒杀了。 既然都有相关的教程,为何还费那么多劲再次扯蛋,难道真的闲得蛋疼了吗?其实并不如此,随着技术的更新,我们很多思路也得跟着创新,不能固定自封。那么…

甜柠檬 2021-12-20 浏览 930 评论 0 收藏 0

简介

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

更多

推荐作者