随笔分类 -  CSS

《精通CSS 高级Web标准解决方案》
综合CSS3 transition、transform、animation写的一个动画导航
摘要：打算好好写博客开始，就想把博客给装修下，近几个月一直处在准备找工作疯狂学习前端的状态。感觉博客装修要等到工作稳定下来才有时间和经历去想想要搞成什么样的了。也看过一些博主的博客导航有这种样式的，趁着回顾CSS动画知识点，写了这个小例子。 挺综合的，用到了很多过渡、变换和动画。Git源码https:// 阅读全文
posted @ 2020-08-09 19:11 浮华而已- 阅读(165) 评论(0) 推荐(0)
CSS基础面试题查漏补缺
摘要：本文大部分问题来源：50道CSS基础面试题（附答案），外加一些面经。 我对问题进行了分类整理，并给了自己的回答。大部分知识点都有专题链接（来源于本博客相关文章），用于自己前端CSS部分的查漏补缺。虽作为一个面试资料，但感觉也能帮助前端新手梳理CSS的知识点。 开胃餐-两道常见考题 盒子模型 样式与选 阅读全文
posted @ 2020-07-10 14:12 浮华而已- 阅读(8681) 评论(0) 推荐(2)
（转自MDN）CSS基础一定要看的包含块（containing block）
摘要：之前在写《个人常用的水平居中方法》这篇文章的时候，百分比问题涉及到了包含块（containing block）这个概念。 今天刷面试题的时候，又看到了containing block这个词，之前计算百分比考虑了几种情况（如那些属性值根据哪个元素计算的），但不知道所谓的‘哪个元素’就是包含块。系统的看 阅读全文
posted @ 2020-07-09 12:53 浮华而已- 阅读(752) 评论(0) 推荐(0)
CSS（五）- 背景与边框 - 边框圆角与阴影基础用法
摘要：扩展阅读 本文仅仅做border的基础使用，想要深入了解的话可以戳以下几个链接，觉得作者写的很好。 CSS Backgrounds and Borders Module Level 3 CSS魔法堂：重拾Border之——解构Border CSS魔法堂：重拾Border之——不仅仅是圆角 CSS魔法 阅读全文
posted @ 2020-07-08 22:05 浮华而已- 阅读(1075) 评论(0) 推荐(0)
简单记记display中inline、block、inline-block以及常见行内/块内元素
摘要：display常用属性值 none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline：内联元素 inline-block：内联块级元素 block：块元素 flex：弹性盒 display:none与visibility:hidden的区别 浏 阅读全文
posted @ 2020-07-07 21:23 浮华而已- 阅读(604) 评论(1) 推荐(0)
可见格式化模型BFC与应用
摘要：什么是BFC BFC指的是块级格式化上下文，简单的来说，BFC就是创建一个div盒子或者给已存在的盒子激活BFC，盒子内部的元素布局不影响盒子外部的元素。也就是所谓的相互隔绝，互不影响。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内 阅读全文
posted @ 2020-05-26 17:25 浮华而已- 阅读(266) 评论(0) 推荐(0)
个人常用的水平垂直居中方法
摘要：2020年7月9号，更新。 包含块概念没理解透，删掉原来关于百分比值的总结，添加了相关链接。 （转自MDN）CSS基础一定要看的包含块（containing block） 2020年7月8号更新。 在整理CSS面试题的时候，回过头来看这篇觉得之前写的太乱了。做的更改如下： 去掉了一些平时用不上的方法 阅读全文
posted @ 2020-04-16 00:13 浮华而已- 阅读(723) 评论(2) 推荐(2)
CSS（六）- 内容布局 - Flexbox
摘要：Flexbox是CSS3提供的用于布局的一套新属性，是为了应对行内块、浮动和表格格式产生的问题而生的。其包含针对容器（弹性容器，flex container）和针对其直接子元素（弹性项，flex item）的两类属性。 Flexbox可以控制弹性项有：方向、主轴与辅轴上的对齐与分布、大小（基于内容及 阅读全文
posted @ 2020-04-15 18:01 浮华而已- 阅读(394) 评论(2) 推荐(0)
CSS（五）- 漂亮的盒子 - 为嵌入图片和元素添加样式
摘要：max size max width属性意味着图片会随着包含它的容器缩小而缩小，但在容器变大时，它不会大到超过自身的固有尺寸 注意：父元素不要设置高度 有时候某些设计者或内容管系统会在HTML源代码中给图片天机awidth和height属性，这里把width和height设置为auto,某种程度上可 阅读全文
posted @ 2020-03-06 21:13 浮华而已- 阅读(1385) 评论(0) 推荐(0)
CSS（五）- 漂亮的盒子 - 背景颜色透明度
摘要：rgba与opacity 在第一个例子中，我们只让背景颜色变得透明，而第二个例子用到opacity属性，让整个元素都变得透明，包含元素中含的内容。 使用opacity把一个元素设置为透明后，将无法再让其子元素变得不那么透明。 body{ background-color: rgba(254,219, 阅读全文
posted @ 2020-03-02 18:25 浮华而已- 阅读(10116) 评论(0) 推荐(1)
CSS（三） - 定位模型 - float的几要素
摘要：要点 1.浮动盒子会脱离文文档流，不会在占用空间。 2.非浮动元素几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响 3.非浮动元素中的文本内容会记住浮动元素的大小，并在排布时避开它,为其留出响应的空间 4.清除浮动本质：浏览器在非浮动元素的上方添加足够大的外边距，从而将元素的上边沿垂直向下移 阅读全文
posted @ 2020-03-01 23:15 浮华而已- 阅读(230) 评论(3) 推荐(0)
CSS（三） - 定位模型 - position定位详解（absolute、fixed、relative、static）
摘要：文章参考：郭佬的博客文章，原文点此 文档流布局的概念 将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均 阅读全文
posted @ 2020-03-01 20:34 浮华而已- 阅读(817) 评论(0) 推荐(0)
CSS（二）- 属性速览（含版本、继承性和简介）
摘要：##相关链接 CSS3速查表，这里面列出了所有新增的属性以及新增或者修改的属性值 css参考手册，很好地一个常用网站 CSS定位（不可继承） CSS布局（仅visibility可继承） CSS尺寸（不可继承） CSS外边距margin（不可继承） CSS内边距padding（不可继承） CSS边框（ 阅读全文
posted @ 2020-03-01 14:55 浮华而已- 阅读(298) 评论(0) 推荐(0)
CSS（二）- 选择器 - 伪元素和伪类（思维导图）
摘要：伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。 不能用伪元素插 阅读全文
posted @ 2019-07-17 20:21 浮华而已- 阅读(577) 评论(0) 推荐(2)
CSS（二）- 选择器 - 一定要搞懂的选择器优先级和权重问题
摘要：css的优先级之前一直没怎么注意没当回事，总以为对同一元素靠后的渲染会覆盖前面的渲染，要是覆盖不了那就来个!important嘛。直到我那在学前端基础的后端伙伴拿一个问题问住了我，我才意识到这是重点中的重点啊！啪啪啪打脸！ 优先级关系 先来看css为元素添加样式的几种规则（优先级a>b>c>d，!i 阅读全文
posted @ 2019-07-17 20:03 浮华而已- 阅读(781) 评论(0) 推荐(1)
CSS（一） - [转载]规范 CSS 的命名和书写
摘要：原文链接 "知乎 如何规范 CSS 的命名和书写？" 规范一览： + CSS书写顺序 + 不要随意使用Id + 使用CSS缩写属性 + 去掉小数点前的 0 + 16进制颜色代码缩写 + 简写命名 + 连字符CSS选择器命名规范 + 为选择器添加状态前缀 + 常用的CSS命名表 ⭐CSS书写顺序 1. 阅读全文
posted @ 2019-07-17 19:10 浮华而已- 阅读(264) 评论(0) 推荐(0)