网格布局中的动画
See the Pen Untitled by xugaoyi (@xugaoyi) on CodePen. 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/02.页面/20.CSS/80.网格布局中的动画.md。原作者：xugaoyi。许可证：MIT。
CSS给table的tbody添加滚动条
1234567891011table tbody { height: 200px; overflow-y: auto; display: block;}table thead,tbody tr { display: table; width: 100%;} 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/02.页面/20.CSS/70.CSS给table的tbody添加滚动条.md。原作者：xugaoyi。许可证：MIT。
CSS教程和技巧收藏
Flex 布局教程：语法篇http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html CSS Grid 网格布局教程http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 只要一行代码，实现五种 CSS 经典布局http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html 空间居中布局 不管容器的大小，项目总是占据中心点 并列式布局 多个项目并列，如果宽度不够，放不下的项目就自动折行 两栏式布局 一个边栏，一个主栏。边栏始终存在，主栏根据设备宽度，变宽或者变窄 三明治布局 页面在垂直方向上，分成三部分：页眉、内容区、页脚。 圣杯布局 最常用的布局，所以被比喻为圣杯。它将页面分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/02.页...
如何根据系统主题自动响应CSS深色模式
如何根据系统主题自动响应CSS深色模式 很多人喜欢选择APP或网站中的深色模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何在网站中实现一个自动的CSS深色模式，根据访客的系统主题来自动响应。 CSS 深色模式 (Dark Mode)在:root根元素中定义变量来设置主题的颜色。我建议你也这样做，因为这样会使这个过程容易得多。我定义的变量如下: 12345:root { --bg: #fff; --textColor: #004050; --borderColor: rgba(0,0,0,.15);} :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html>元素，除了优先级更高之外，与 html 选择器相同。 如果希望在样式表中使用这些变量，可以这样做 123body { color: var(--bg);} 这样，如果你想改变你的主题颜色，所需要做的就是修改你定义的变量，所有使用这个变量的样式都会被更新。 现在我们需要...
从box-sizing属性入手，了解盒子模型
从box-sizing属性入手，了解盒子模型背景先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即占窗口宽度的100%，但边框border和内边距padding是用像素来表示的，此时就会造成一个问题是div总宽度超过窗口宽度。为了避免这种问题，可以使用属性box-sizing:border-box来把 标准盒模型 变成 代替(IE)盒模型 ，从而使div的总宽度依然是100% 什么是CSS 盒模型?页面布局中，一个元素的外边距（margin）、 边框（border）、内边距（padding）、内容（content）组成一个盒模型。盒模型可分为标准盒模型 和 代替（IE）盒模型。 标准盒模型在标准模型中，如果你给盒设置 width 和 height，实际设置的是内容区域( content box)的宽高。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 示例： 1234567.box { width: 100px; height: 50px; margin: 10px; padding: 2...
文字在一行或多行时超出显示省略号
文字在一行或多行时超出显示省略号一行超出显示省略123overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 123456789101112131415```html<html> <div class="box-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div></html><style> .box-42b6{ border: 1px solid #999; width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }</style> 12345678910## 两行（多行）超出显示省略号```cssoverf...
「布局技巧」图片未加载前自动撑开元素高度
「布局技巧」图片未加载前自动撑开元素高度在移动端开发中，有一些元素是根据图片高度来自动撑开的 ，高度不能写死（如轮播图的外层元素）。在网络较慢的情况下，图片加载需要一些时间，此时该元素的高度没有被撑开，在网页布局上会有一些不想看到的效果。 这种情况我们可以设置如下样式来设置该元素的高度： 123456.wrapper overflow hidden width 100% height 0 padding-bottom 26.66% // 这个数值是图片的高宽比，即 高/宽 background #eee 上面代码中，padding-bottom 的取值是图片的高宽比（即，高/宽），它会根据 width值的26.66%计算，最终元素的高度会和图片加载完成后的高度一致。 也可以使用vw的方法，但在一些浏览器可能有兼容性问题： 1234.wrapper width 100% height 26.66vw background #eee vw，viewpoint width，视窗宽度，1vw=视窗宽度的1% vh，viewpoint heigh...
常用meta整理
常用meta整理<meta> 元素概要meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 必要属性 属性 值 描述 content some text 定义与http-equiv或name属性相关的元信息 可选属性 属性 值 描述 http-equiv content-type / expire / refresh / set-cookie 把content属性关联到HTTP头部。 name author / description / keywords / generator / revised / others 把 content 属性关联到一个name。 content some text 定义用于翻译 content 属性值的格式。 网页相关 申明编码 1<meta charset='utf-8&...
flex布局案例-输入框布局
flex布局案例-输入框布局 可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263```html<html> <div class="InputAddOn"> <span class="InputAddOn-item">icon</span> <input class="InputAddOn-field" placeholder="input宽度自适应"> <button class="InputAddOn-item">提交</button> </div> <br/> <div class=&...
flex布局语法
flex布局语法一、flex 布局是什么？Flex是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器 都可以指定为 Flex 布局。 123.box{ display: flex;} 行内元素 也可以使用 Flex 布局。 123.box{ display: inline-flex;} Webkit 内核的浏览器，必须加上-webkit前缀。 1234.box{ display: -webkit-flex; /* Safari */ display: flex;} 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（或x轴）（main axis）和垂直的交叉轴（或y...
