随笔分类 -  CSS

CSS position
摘要：1. position property static relative fixed absolute sticky 2. static static 是 position 属性的默认值。如果省略 position，默认就是 static。 static 的元素处于网页正常流里面正常的位置。 这个时 阅读全文
posted @ 2020-07-07 15:49 jaiodfjiaodf 阅读(189) 评论(0) 推荐(0)
CSS property
摘要：// 获取 body 的所有 style属性 getComputedStyle(document.body) CSS 动效 动画 animation animationDelay animationDirection animationDuration animationFillMode anima 阅读全文
posted @ 2020-07-07 10:15 jaiodfjiaodf 阅读(524) 评论(0) 推荐(0)
CSS animation
摘要：Animation @keyframes 定义 关键帧 @keyframes mykf { 0% {top: 0; transition: top ease} 50% {top: 30px; transition: top ease-in} 75% {top: 10px; transition: t 阅读全文
posted @ 2020-07-06 20:33 jaiodfjiaodf 阅读(172) 评论(0) 推荐(0)
flex 属性
摘要：遍历了一下 flex 的各个属性,还没完全记住啊，省得下次用的时候这里查那里查了。 flex 的实现也在前面的 toy-browser 里面了。 flex-direction: row | row-reverse | column | column-reverse flex-wrap: nowrap 阅读全文
posted @ 2020-07-06 13:01 jaiodfjiaodf 阅读(143) 评论(0) 推荐(0)
margin 折叠
摘要：只会发生在 bfc 里，不会发生在 ifc里。 这就意味着，边距折叠只会发生在竖直方向（不严谨，但是可以这么理解）。 我们来观察这段代码： <body style="background-color: lightgreen;"> <div style="width:100px;height:100p 阅读全文
posted @ 2020-07-03 16:19 jaiodfjiaodf 阅读(177) 评论(0) 推荐(0)
CSS经典布局——双飞翼布局
摘要：当然，圣杯在正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线变窄，「圣杯」将会「破碎」掉。如图，当 main 部分的宽小于 left 部分时就会发生布局混乱。我们一般都给个 container 的min-width，然后还有一点就是圣杯要清除浮动。 好的，我们来看看双飞翼 阅读全文
posted @ 2020-07-03 09:28 jaiodfjiaodf 阅读(601) 评论(0) 推荐(0)
CSS经典布局——圣杯布局
摘要：花了点力气，找到了圣杯布局的来源： https://alistapart.com/article/holygrail/ 1.代码 废话不多说，先上全部的代码 <div id="header"></div> <div id="container"> <div id="center" class="co 阅读全文
posted @ 2020-07-02 16:26 jaiodfjiaodf 阅读(300) 评论(0) 推荐(0)
CSS 正常流
摘要：正常流正常在哪里？ 很多人会问。 我觉得感性的理解是很正常的。。。只不过如果我们从严苛的 CSS 标准角度去理解正常流，规定排版的算法，就需要引入那些复杂的概念，就变得常人难以理解不正常了。 我们可以用一句话来描述正常流的排版行为，那就是：依次排列，排不下了换行。 float 就不说了，前面有文章写 阅读全文
posted @ 2020-07-02 14:42 jaiodfjiaodf 阅读(331) 评论(0) 推荐(0)
CSS selectors 选择器
摘要：CSS selectors 选择器 选择器的基本意义是：根据一些特征，选中元素树上的一批元素。 总览分类 简单选择器：针对某一特征判断是否选中元素。 复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。 复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择 阅读全文
posted @ 2020-07-02 10:47 jaiodfjiaodf 阅读(936) 评论(0) 推荐(0)
CSS function
摘要：按照 winter 老师「知识完备性」的思路，尝试整理了一下 CSS 函数。 Common CSS Functions url() attr() calc() lang() :not() CSS Custom Properties var() Color Functions rgb() and rg 阅读全文
posted @ 2020-07-02 09:55 jaiodfjiaodf 阅读(441) 评论(0) 推荐(0)
浏览器重绘与重排的区别？
摘要：今天接触到的新的名词 重绘 重排 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素。 重绘：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变。 单单改变元素的外观，肯定 阅读全文
posted @ 2020-07-01 17:22 jaiodfjiaodf 阅读(855) 评论(0) 推荐(0)
浮动 清除浮动 float clear
摘要：float clear 我们先来看看传说中的 float 1. 正常版本 首先是下面这段代码 <div> float: <div style="width: 200px;height:200px;background-color: aqua;"></div> 文本文本文本文本文本文本文本文本文本文本 阅读全文
posted @ 2020-07-01 16:56 jaiodfjiaodf 阅读(187) 评论(0) 推荐(0)
inline-block
摘要：inline-block 必须要配合 vertical-align属性来用，不然就会出现莫名其妙的问题。 就是这个行模型啊，它的基线是根据最高的那个 inline-box 来确定的。 winter 老师建议，inline 的盒子的 vertical-align 只用 top || bottom || 阅读全文
posted @ 2020-06-30 12:32 jaiodfjiaodf 阅读(281) 评论(0) 推荐(0)
标准盒模型-怪异盒模型
摘要：以前我一直以为 border-box 包含了 margin... 阅读全文
posted @ 2020-06-30 09:59 jaiodfjiaodf 阅读(146) 评论(0) 推荐(0)
获取所有的 CSS 标准
摘要：首先我们打开 w3c 官网，有关 CSS标准的标准和草稿都在这里：https://www.w3.org/TR/?tag=css， 然后我们直接使用 JS 从浏览器里面获取 var lis = document.getElementById("container").children; var res 阅读全文
posted @ 2020-06-29 21:04 jaiodfjiaodf 阅读(210) 评论(0) 推荐(0)