实用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 round

3. 文字

• font-face属性：定义自己的字体
• 对长的不可分割的文字进行分行

word-wrap：break-word;

• 文字阴影

text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

4. 圆角：border-radius

5.盒阴影

box-shadow: 10px 10px 5px #888888

6.媒体查询 ：当浏览器的尺寸变化时会采用不同的属性。

@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。