要实现如下功能 , 下图 粉色 部分是 整体 父容器 , 紫色元素 是 中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ;
固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置.
CSS嵌套可以节省输入时间，并使语法更易于阅读和维护。迄今为止，你必须像这样键入完整的选择器路径：
在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。
带!important 标记的样式属性优先级最高； 样式表的来源相同时： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，经过我看过的一些文章，加入自己的理解。我得出文档流的定义如下：
在JavaScript中需要通过document.querySelector(“#demo”)来获取dom节点，然后再获取这个节点的值。
这段时间做了一个项目优化，对于原有的内容进行了重新设计实现，其中一项就是对于label标签添加hover层进行解释说明，最常用的办法及时label的容器设置relative，然后hover层作为它的子元素设置absolute，然后在使用label的hover伪类来控制hover层的显示和隐藏，这其中一个要求及时hover层必定要求能够遮住页面中其他的元素，所以最常用的办法是设置它的背景颜色，然后让它的z-index处于合理的位置，一切都是这样设计的，但是最终的效果却出现了hover层设置bg为#fff的时候，hover层显示时还是会把底部内容给透出来，第一反应就是opacity设置为1，但是还是没有效果（因为背景为白色，所以有点坑）
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
以下列举的，都是 JS 前端开发中最为常见的问题。知悉这些问题，不懂编程也能冒充前端大牛了。
在Sass中，共有4种数字运算方式：加、减、乘、除。对于这4种运算方式，我们需要注意以下几点：
1. 说下行内元素和块级元素的区别？行内块元素的兼容性使用（IE8 以下） Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。 Q2)兼容性：display:inline-block;display:inline;zoom:1; 2.清除浮动有哪些方式？比较好的方式是哪一种？ 1）父级div定义height。 2）结尾处加空
z-index是一个用于控制文档中图层顺序的属性。具有较高z-index值的元素将会出现在具有较低值的元素之上。就像页面上的x轴和y轴决定一个元素在水平和垂直方向上的位置一样，z-index控制它们在z轴上相互层叠的方式。
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。
这里要定位百度首页下更多产品里面的糯米span，默认firepath的提取很复杂，可以通过name属性来辅助定位
注意：除非我们需要将元素 由其他定位模式 强制改回 标准流，否则一般情况下不用。
HTML 标签结构很简单 , 只是一个 section 标签 , 内部包裹着 6 个 div 标签子盒子 ;
原文链接：https://www.sitepoint.com/css-is-where-has-pseudo-class-selectors/[1]
q:请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255, 0, 0)”。
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ （1）有两种，IE 盒子模型、W3C 盒子模型； （2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)； （3）区别：IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些？哪些属性可以继承？ * 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h
第一章 一、内联块 display: inline-block; 1、特征： 1.1 块级元素在一行显示 （得到内联元素的属性） 1.2 内联元素支持宽高 （得到块的属性） 1.3 没有宽度的时候，内容撑开宽度 （得到内联元
<component> 是vue官方提供的标签，通过更改 is 指向的子组件名来动态切换组件。
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。
改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。
.class： .intro，选择class=‘intro’的所有元素
ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看。
应用场景，在当前组件中修改其他组件的样式，如果他们带有scoped 是无法修他们的样式，这里我们就需要使用vue 给我们提供的样式穿透了
组件封装对于学过React或者Vue框架的同学应该都不陌生，就我个人而言我之前的原生JS基础并不太是太好，一开始接触前端是因为参加学校的实验室做React Native项目，我是稍微了解一下原生JS之后就直接学React了，对于React组件的封装已经是比较熟悉了，而封装原生JS组件对我来说还是很新鲜的。上完这次课，自己跟着把代码敲了一遍真的是受益匪浅，让我对框架的理解又加深了一步，希望大家有时间的话都好好做一下这个轮播图组件，很棒。
position 定位属性，是CSS中非常重要的属性。除了文档流布局，就是定位布局了。本来我对这个问题没有放在心上，毕竟写了这么多年的css，对position的各类使用是烂熟于心的。但是今天突然发现，居然很多人都不清楚position参数。因此，特地写这篇博文，详细解读一下position 以及参数。
进入子元素也会触发mouseover()事件，那么如果#small的div没有嵌套在里面是否会触发呢？ 这样应该就不会。
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局.
对BFC规范(块级格式化上下文：block formatting context)的理解？
使用一个Vue实例作为中央事件总线。 Vue内部有一个事件机制，可以参考源码。 $on方法用来监听一个事件 $emit用来触发一个事件。
如果想在某一标签元素后面 ，添加一个新的元素，可以使用伪元素 ::before和::after
1、 什么是CSS预处理器 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。 2、lang 因此lang的属性可选：scss（sass）、less等等 即：<style lang="scss"> 3、scss和sass的区别 scss是sass的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点。 注明：使用这个lang的属性需要安装scss（sass） 4、scoped属性 scoped是指定样式的局部作用域。 在vue中：App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped，代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。
实现此例您可以学到： vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一、搭建vue开发环境 更换镜像到cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli cnpm install -g vue-cli 初始化vue项目 命令模式进入项目所在的目录，如d:\test\，输入vue init 项目名称即可。如果你想引入vue2.0框架
CSS (Cascading Style Sheets) 其实并不是编程语言，CSS可以直接运行在浏览器中，浏览器就是它们的运行环境，CSS 中文名为层叠样式表，也就是一些样式的配置。
display:none使用后，元素的宽度，高度都会丢失，视为不存在不加载；元素原来占据的空间位置不保留；产生回流和重绘；
在不断发展的 Web 开发世界中，掌握 CSS（层叠样式表）对于创建令人惊叹的响应式网站至关重要。虽然您可能熟悉 CSS 的基础知识，但仍有大量高级 CSS 选择器等待着提高您的编码技能并增强您的网页设计能力。在本博客中，我们将探讨每个 Web 开发人员都应该了解的七个高级 CSS 选择器。这些选择器将帮助您简化代码，提高可维护性，并使您的网站在视觉上更具吸引力。
本文将介绍一个不太实用的小技巧，使用 tabindex 配合 :focus-within 巧妙实现父选择器。
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。
---- 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子模型？ 每个HTML元素都是长方形盒子。 （1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。 （2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。 link和@import的区别？ （1）link属于XHTML标签，
刚刚学习完了CSS的文本属性,感觉还不是很难但是知识点还挺多的,偶尔会忘记一些...发现做笔记还是很有用的,我经常会翻自己写过的文章来看,感觉其实html不算太难,但是要记得东西真的好多好多啊...幸好我记了笔记.
取值：数字+px 百分比 （圆角半径）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
