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