标签:: Css

0

几种清除多余CSS的方法和基本原理

最近遇到一个坑,重构给了重构代码,但是没有分离好,导致我引入了很多无用的css。这些css又引入了很多无用的图片,使整个的非常重而且很无用。我需要想办法把整个无用css都去掉。下面是几种方法。 gulp-uncssgulp-uncss是一个gulp插件,和普通gulp插件没有区别。先引入gulp。然后利用uncss方法传入需要优化的css所在的页面。注意这里支持本地文件,正则匹配和url匹配。

0

BFC-Block Formatting Context

以前知道BFC,但是感觉理解的不是很清楚,今天查了些资料总结记录如下。 A Block Formatting Context is part of the visual CSS rendering of a web page in which block boxes are laid out. The positioning scheme to which it belongs is normal

0

总结圣杯布局和双飞翼布局

很久以前就知道这两个布局,但一直觉得这两个布局有点奇怪,可能是因为以前没有用过这种方法。但是因为兼容会很好,而且可以自适应中间区块,所以好像还是很多人用。今天动手写了demo,虽然比较容易就能做出来,但这里面的有些地方还是感觉怪怪的,最后有我的不明白的地方。下面是具体的两种写法以及区别。 圣杯布局圣杯布局是一种常用的网页布局,他可以由现有的技术来实现,现有的布局多多少少都有些缺点,所以找到一种最

0

Flex 布局语法及实例

Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。 Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。(这里我们称为Flex)。 Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器

0

css做三角形原理

以前知道css能做出各种方向的三角形,但其实一直都不知道中间的原理是什么。今天把它解决了。几个图就能解决清楚。 制作普通的正方形为了能够看清楚各个边的变化,我把各个边的颜色设置成了不同的颜色。每个边的表现都是梯形。如图一所示。设置盒子大小为100px,并且盒子边框为10px;1234567#first-box{ width:100px; height: 100px; border-wi

0

css中少见的visibility:collapse

visibility 属性设置元素是否应该是可见的,允许作者显示或隐藏一个元素。 与display属性类似但仍有很重要的区别。display:none;隐藏元素并且不占据原有的空间。visibility内容不可见,但元素原来的空间,位置,大小仍占据。 visibility所具有的值 visible:默认。元素是可见的。 hidden:元素是不可见的,但仍然影响布局占据空间。 collapse:对

0

css3渐变(Gradient)

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。 渐变分为:线性渐变(Linear Gradient)和径向渐变(Radial Gradient),

0

如何用CSS做漂亮的毛玻璃效果

前两天在网上看到有个用css做的毛玻璃效果,好喜欢,就仿着做了个demo。demo我放在了新浪云上:演示地址是不是很好看呢,我很喜欢。图是我在网上自己瞎找到,花瓣只是个动态图,所以才会动。 主要是给背景用filter:blur属性(要加上浏览器内核以兼容各种浏览器),背景虚化后,再对不用虚化的内容比如图片和文字,让他们定位到相应的位置。 12345<div class="container"

0

css做盒子的曲边阴影和翘边阴影

盒子的曲边阴影,翘边阴影的区别是:曲边阴影看起来盒子下边像是有个曲边。而翘边阴影是往两边翘。两者的本质就是累加,就是看着像是一个盒子的阴影,其实是多个盒子累加起来的阴影,只是其他的看不见,只有shadow。 这个是好久以前跟着慕课网的老师学的,正好现在整理下。下图是直接的感受,要仔细看才能看到不一样的地方,演示地址上面一个大图,下边是有阴影的,而且阴影并不是整个的一样,而是两边阴影稍微少点,约往里