小程序开发CSS基础知识点

选择器

ID，标签(使用html元素名称)，类选择，组合选择(逗号隔开,h1,h2,h3{})，后代选择器(使用空格)，伪类选择(:checked,visited,hover,:after)

元素的框结构

rect.png

在css中使用，padding,border,margin来控制元素。需要注意空白边叠加的问题

  .ac {border: 1px solid #ccc;background-color: #555;height: 100px;width: 100px;
    margin: 10px;
  }
  .bc {
    border: 1px solid #ddd;background-color: #eee;width: 100px;height: 100px;
    margin: 10px;
  }

image.png

元素定位

position属性的值，static：默认值，relative：同static，区别在于可以是用top,right,bottom,left属性；absolute：绝对定位，以上层元素中非static的元素为基准进行定位，否则以浏览器窗口为基准，fixed：以浏览器窗口为基准定位，不建议使用。
float：元素进行左右浮动。

圆角,阴影

border-raduis属性来设置；box-shadow: 10px 10px 5px #ccc，设置阴影

背景

值	描述	CSS版本
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1

CSS开发脚本

通过更方便的脚本开发，生成最终的css文件

• less，小程序开发框架wepy默认使用，http://www.bootcss.com/p/lesscss/
• sass，vue框架使用的sass，https://www.sass.hk/

CSS框架

• bootstrap:使用非常广泛的css框架，由twitter开发并开源，有必要掌握这个css框架。小程序开发
• weui: 微信官方提供的CSS库
• minui: 不错的控件库，写好css样式，可以直接在小程序中使用其中的控件