css权值问题

继承是没有权值的,比通配符的的权值0还要低。 选择器是不分上下级的。只管优先级。 第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为0100。 第三等:代表类,伪类和属性选择器,如.content,权值为0010。 第四等:代表类型选 ... »

前端高频面试题 CSS篇

通过从网上看到的面经,总结的一些高频的前端CSS面试题,有很多不会,于是找资料,并通过代码实现,自己提供了一些参考答案。 目录 1.怎样会产生浮动? 2.如何清除浮动? 3.盒子模型,以及IE和其他浏览器的却别? 4.CSS3新特性有哪些? 5.em 和 rem 的区别? 6.重排和重绘? 7.行元 ... »

BFC、IFC、GFC、FFC

FC FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。 BFC BFC(Block Formatting Contexts)直译为"块级格式化上下文 ... »

前端树形UI的生成

对数据tree遍历主要有两种方式 1.1 第一种是广度遍历 广度遍历可以利用队列完成 1.2 第二种是深度遍历 深度遍历可以利用函数递归来完成 下面的实例就是利用函数递归来完成对数据的遍历,然后生成对应的UI,主要要注意tree的ui插入节点的判断,所以给数据加上到对父节点的索引。 先看效果图 HT ... »

vue2.0 如何自定义组件(vue组件的封装)

一、前言 之前的博客聊过 vue2.0和react的技术选型;聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。 vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出。像 Mint-UI 等说实话很不错了,但是坑也是不少,而且很多功能也是仅凭这些实现不了 ... »

从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一、CSS初始 ... »

前端学习笔记之CSS知识汇总

CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。 CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CS ... »

vue2.0 axios封装、vuex介绍

一、前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助。这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋。如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, 不过我还是建议看文档比较好。os: Vue文档是非常详细的 二、准备 做vue单页应用都需要会什么? ... »

记一次产品需求:图片等比缩放和CSS自适应布局16:9

前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板;然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片。我当时想着,抛开技术实现层面,图片展示也理应是这样的,更加友好。当时我就说应该没啥大问题,于是就有了下文(PS:萌新还没技术积累, ... »

CSS实现核辐射警告标志

今天做了下360的前端星计划测试题,碰到一个有趣的css题,实现如下图效果,记得上次也是在360面试的时候碰到一个有趣的css实现宝马logo,不得不说360的面试题还是很有创意的。 我一直努力想用一个div实现这个效果,但是想了很久,也没找到一个较好的解决方法,暂且先用笨办法实现了,主要运用了CS ... »

Bootstrap 小结

Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1.基础样式 2.常用组件 3.JS插件 常见问题: 1.Bootstrap 的优缺点 优点:CSS 代 ... »

手机端实现fullPage——全屏滚动效果

封装了一个小插件模拟fullPage的全屏滚动效果,比较简单。 特点: 1. 纯js实现,小巧轻便。 2. 兼容性好。苹果、安卓都没问题,暂时没遇到问题机型。 缺点: 1. 仅封装了基础功能,HTML、css么有去封装。个人觉得不封装更方便大家使用。 接下来看看效果图: 相比效果大家都看到了,接下来 ... »

优雅地实现CSS Animation delay心得

话不多说直接开讲: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个延迟时间 = A元素动画的加载时间) 即:animation : bmove .7s .7s 1;  ... »

css3D的魅力

前言: 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下。 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-origin,transform, perspective。 demo1 高度可变的立方体,先来看看最终效 ... »

用CSS画小猪佩奇,你就是下一个社会人!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好一阵了,其实一开始我是不屑的。纵观小朋友的历届动画,无论喜洋洋、熊出没还是小兔兵兵、小熊维尼,火过一 ... »

CSS position(定位)属性

关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。 然后来看看什么是文档流(normal flow),下面是 www.w3.org 的描述: Normal flo ... »

css绝对底部的实现方法

当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到 而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位 实现方式参照WiseWrong,多谢原创无私分享,这里我直接用原创的图文,自己手打一遍,以便增加印象。 一、传统实现方式第一种 css ... »

CSS(选择器)

CSS(选择器) 作用:用于匹配 HTML 元素 选择器分类: 1.元素选择器 a{} 2.伪元素选择器 ::before{} (真实存在的元素) 3.类选择器 .link{} 4.属性选择器[type=radio]{} 5.伪类选择器 :hover (一种状态,不是真实存在的) 6.ID选择器 # ... »