css

实现三栏布局的五种方法
日志假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为 300 px,中间自适应. 中间自适应就是说中间的盒子可以随着浏览器窗口的大小或子元素的大小自动调整大小,中间盒子不能是定宽的,它的大小是由子元素 ...
循序渐进地聊一聊 box-shaow
日志影子在现实生活中可以是一个物体的副本,在 CSS 中也是这样的,相当于复制了那个元素(并不是真正的元素,对页面布局没有任何影响),可以从下面的代码中看出来. .container { width: 1 ...
1
ECharts的使用与总结
日志ECharts的使用与总结 一,介绍与需求 1.1,介绍  ECharts商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/ ...
1
面试官:说说你对css效率的理解
日志大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 大家的支持是我创作的动力. 选择器的优先级 众所周知,选择器是有权重 ...
CSS设置height为100%无效的情况
日志CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...
BFC块级格式上下文介绍
日志块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...
css3 HSLA 颜色制造半透明效果
日志简介 HSL色彩模式是工业界的一种颜色标准,是通过对色调(H).饱和度(S).亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色, ...
css reset 代码
日志直接抄 postcss-css-reset 代码吧. pc /* after */ html { font-family: sans-serif; -ms-text-size-adjust: 100% ...
CSS 文本截断方案
日志单行截断 .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 此方法兼容到ie6过.不过只能单行 ...
CSS BEM 命名方式
日志简介 简易 css 命名方式,减小命名冲突,使得 css 更有组织感和识别感.但如今写 react 项目大多可以忽略对 css 的命名约束了. 官网介绍:http://getbem.com/intro ...
盒模型里的滚动条算什么?
日志测试代码 <!DOCTYPE html> <html> <head> <title></title> <style type=&quo ...
CSS 权重图
日志关系图 图片出处我找不到了. 结论 权重从高到低排序 1. !important 2. style 3. #id 4. .class .child-class 5. .class1.class2 6. ...
纯 css column 布局实现瀑布流效果
日志原理 CSS property: columns.CSS属性 columns 用来设置元素的列宽和列数. 兼容性 chrome 50+ IE 10+ android browser 2.1+ with ...
实现一个交互式的图片对比控件
日志问题缘由       有时候,我们要实现展示两种图片的对比效果,通常是之前和之后的效果比较.在这种情况下,我们想到的可以是使两种图片并排放置,通过比较来观察区别,但是为了对比更加强烈,我们通常会使用的 ...
CSS技巧 (1) · 结构和布局
日志 前言 这一篇主要是总结关于结构和布局的一些技巧,不管什么,一个网页上来,最重要的是先确定他的结构和布局,实现基本的布局之后,我们再进行局部的优化和交互特效. 这一篇主要讲 关于 自适应内部元素 的内 ...
纯 CSS 实现幻灯片播放
日志介绍:   今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面.于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 : ...
CSS技巧 (2) · 多列等高布局
日志前言    最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要 ...
CSS技巧 (3)
日志关于CSS技巧的一些题目 题目列表 所有答案点击题目链接 1.下面这个左边竖条图形,只使用一个标签,可以有多少种实现方式: 2.类似下面这样的条纹边框,只使用一个标签,可以有多少种实现方式 -- 从条 ...
利用CSS制作图形效果
日志前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...
CSS技巧(1)· CSS渐变 linear-gradient
日志前言: 不论在网页设计中,还是传统的媒介中,各种尺寸,颜色,角度的图案在视觉中无处不在,要想在网页中实现复杂的图案,其过程往往不够理想,过去,我们可以创建一个单独的位图文件,然后每次需要做调整的时候, ...