实用CSS
感兴趣的内容：1. 视差滚动
jQuery Parallax Scrolling Website(视差滚动网站制作)： 中文实例---jQuery视差滚动示例 ;
2. 阴影
以 box-shadow: 1px 2px 3px 4px #333; 为例，4 个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。
单向阴影： 如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。
3. css 底部波浪线效果：
实现:
.bgStyle { position: relative; } .bgStyle::before { content: ''; position: absolute; bottom: -0.125em; width: 100%; height: 0.25em; background: linear-gradient(to top left, transparent, transparent 45%, red, transparent 55%, transparent 100%), linear-gradient(to top right, transparent, transparent 45%, red, transparent 55%, transparent 100%); background-size: 0.5em 0.5em; background-repeat: repeat-x; }
4.小程序中flex布局不换行
.scrollBox {margin: 0 60rpx;width: 630rpx;display: flex;white-space: nowrap;}/* 子元素还需要设置display:inline-block;*/
一些概念性的知识
1. CSS3 的新特性
1. 图片：
[*]背景渐变
{background-image:linear-gradient(left, red 100px, yellow 200px);}
[*]边框图片
border-image: url(border.png) 30 30 round3. 文字
[*]
[*]
[*]font-face属性：定义自己的字体
[*]对长的不可分割的文字进行分行
[*]
word-wrap：break-word;
[*]文字阴影
text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）4. 圆角：border-radius
5.盒阴影
box-shadow: 10px 10px 5px #8888886.媒体查询 ：当浏览器的尺寸变化时会采用不同的属性。
@media screen and (max-width: 300px) { body { background-color:lightblue; }}
7. BFC （块级格式化上下文：block formatting context）
[*]
[*]
[*]内部的盒子会在垂直方向，一个个的放置；
[*]属于同一个BFC的 两个相邻Box的 上下margin会发生重叠
[*]计算BFC的高度时，浮动元素也参与计算
[*]
8. 清除浮动
[*]
[*]
[*]父级div定义height
[*]最后一个浮动元素后加空div标签 并添加样式clear:both。
[*]包含浮动元素的父标签添加样式overflow为hidden或auto。
[*]父级div定义zoom
[*]
9. 按百分比设定竖向距离的属性
例如 padding-top , padding-bottom , margin-top , margin-bottom 等，依据是父容器的宽度，而不是高度。
10. ::before 和 :after中双冒号和单冒号有什么区别
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
3. 图片下方出现3px
原因：主要是因为图片的垂直对齐方式vertical-align引发的，默认值是baseline，默认为此值时图片下方就会多出3px。
解决方案：
1、将图片的垂直对齐方式vertical-align的值设置为bottom
2、将图片display设置为block，并且指定width和height。
https://blog.51cto.com/u_13878755/4721057
页:
[1]