瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过CSS3的多列（Multi-column）属性，可以简单的实现类似效果。具体步骤：1.设置外部容器多列列数（column-count）和列间距（column-gap）2.设置内容条目的break-inside属性为avoid，使条目总体不被打断。 div class="container" //最外层容器
div class="item" //条目
div class="item__content" //条目内容
img src=''
/div
/div
counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上，它的值包括两部分：第一部分为计数器的名字；第二部分为计数器的起始值（默认为0），counter-reset还可以同时声明多个计数器比如：counter-reset: count 0 /*标识计数器count从1开始*/
counter-reset: count2 2 /*标识计数器count2 从3开始*/
counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器，count1，count2，count3*/
counter-increment 表明计数器
div高度是根据里面内容自适应撑开的，如果没有内容高度则为0；但div里面有内容高度仍是0，多半是因为元素浮动引起，div里面的元素浮动到其它地方，div里实际上没有内容，因而为0；用如下为例： div
a img /a
/div
显示图片后，div高度可能为0，此时可以通过如下3种方式解决掉高度为0：1. 使用overflow属性：为div增加样式：style="overflow:visible"
这样即可撑满div，overflow可以取值：auto 出现滚动条；hidden:超过范围的隐藏（文字会显示不全）2. 增加div清除浮动：在被包含的元素下面，此例中为
view class="item"
view class="skeleton-image animated-background" /view
view class="skeleton-right"
view class="title animated-background" /view
view class="description animated-background" /view
/view
/view
.item{
width: 700rpx;
height: 100rpx;
margin: 10rpx auto;
di
在使用 flex 布局时，设置 justify-content: space-between，如果一行有三个 div，那最后一行如果不满三个元素，就会出现下面的情况，如何使最后一个 div 向左对齐呢。有两种方法：方法一：这种方法的缺点是，最后一个 div 左外边距是0。div:after {
content: "";
flex: auto;
}
方法二：创建几个空的 div，貌似这种方法最合适了 div
div class="item" /div
div class="item" /div
div class="item" /div
div cl
代码示例：html{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:url("data:image/svg+xml;utf8, svg xmlns=\'http://www.w3.org/2000/svg\' filter id=\'grayscale\' feColorMatrix t
将一个div的宽度和高度设置为0，然后设置边框样式.triangle{
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}
将一个div的border都设置成50px粗，并且不同颜色，结果如下图所示：把边框宽度设置成50px，计算机处理时，在边框交接处，一边占用一半的面积。将左右下边框设置成transparent，就可
物理像素： 顾名思义，就是设备屏幕上的实际像素。也就是说这个手机被出厂造出来的时候，这个屏幕上有多少个像素点，他的物理像素就是多少； 设备独立像素： 也叫做逻辑像素(对于前端来说，和我们的css像素是一样的)，这个不同的设备是不一样的。在viewport为ideal-viewport模式时， 如iphone6此时的viewport为375px，代表着我们在css中写375px就可以达到全屏的效果；在移动端中会使用rem方案，来做不同设备间的适配:(function () {
function changeRootFont() {
var designWidth = 750, rem2p
css :not()排除函数css:not()函数用来排除选择，not(x),其中的x为css选择器，但是x不能是not选择器，也就是说:not()排除选择器不能嵌套使用。css:not()排除选择器使用.sibcont{
background:#f1f1f1;
border:1px solid #bababa;
margin:20px;
padding:20px;
}
.sibcont ul{
margin:0;
padding:0;
list-style:none;
}
.sibcont ul li{
color:#C91010;
Scss 和 Sass 的区别scss 是 sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号。比如：/*** sass 代码 ***/
.main
width:100px;
.top
width:100px
/*** scss 代码 ***/
.main{
width:100px;
.top{
width:100px;
}
}
编码规则SASS首先会检查代码文件的Unicode BOM（byte order mark），然后是@ch
div id="loading"
style="width: 100%; height: 100%; position: fixed; background-color: rgb(255, 255, 255); z-index: 807; top: 0px; opacity: 0.9; display: block;"
div id="contain"
div class="wrap" id="wrap1"
div class="part" id="part1" /div
/div
.navbar{
margin-bottom: 0px;
background-color: #fff;
border-right: 0px;
border-left:0px;
border-radius: 0px;
}
.navbar-brand { padding:10px 15px; }
.navbar-brand img{ height: 30px; }
@media (min-width: 768px) {
.navbar-wrapper {margin-top: 20px;}
.navba
.page-header {
color: #fff;
text-align: center;
background-color: #5FC3E4;
background-image: linear-gradient(120deg, #E55D87, #5FC3E4);
}
CSS linear-gradient() 函数
gradient 美[ˈɡreɪdiənt] n. (尤指公路或铁路的) 坡度，斜率，倾斜度; (温度、压力等的) 变化率，梯度变化曲线;
style
#grad1 {
height
CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。
Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，
CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
实现方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图：
但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号，如下。
实现方法：
display: -webkit-box;
-webkit
那么CSS中的1px是什么？浏览器是怎么渲染它的？网页在一个叫viewport的东西里渲染，可以理解为画布，画布被分成 N x M 个小方格，1个CSS像素，就是其中的一个小方格。一，viewport又是什么？网页在viewport上渲染，可以想像在PS上画东西时，上面也有个画布，这个画布分割了 N x M 个方格，N是它的宽度，M是它的高度。宽高都可以任意设置，所以说viewport是虚拟的。假设设置宽度是400，那么浏览器显示区域的横向将被分为400份，CSS的1px占的宽度就是显示区域的 1/400。viewport值不一样时，对页面元素宽度的影响，比如一个头像宽度是50px。 当vie
在一个网页中，如果有一个弹出的层是可以上下滚动的。 但是弹出层滚动到底部时，底层也会跟着滚动。
这其实是手机浏览器一个非常“顽固”的也似乎难以解决默认事件。
我之前也遇到过，最初也是各种阻止默认事件啊，PC有用，但是移动端一点用也没有。
后来是加了
html,body{ height:100%, overflow:hidden }
但是这样做会导致内容返回顶部。
后来研究了下天猫，他们也没有很好的解决，有的地方底部仍然可以滑动。
研究过苏宁易购，他们做的比较有意思，先记录下当前的位置，虽然底部内容也是可以滑动的，当弹出层关闭后，再返回那个位置。当然他们的
GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显，但你马上就能体会到 SVG 图标的优点。Octicon 上的对比切换到 SVG 以后，图标会作为图片渲染而非文字，这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的 SVG 版本。为何使用 SVG？图标字体渲染问题图标字体从来只是一种 hack。我们之前使用一个自定义字体，并将图标作为 Unicode 符号。这样图标字体就可以通过打包后的 CSS 来引入。只要简单地在任意元素上添加一个 class，图标就
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：