常用CSS样式及属性代码

前言
1.常用css样式
- [1.1. 背景属性：background](#1.1. 背景属性：background)
- [1.2. 字体属性：font](#1.2. 字体属性：font)
- [1.3. 边框属性：Border](#1.3. 边框属性：Border)
- [1.4. 盒子属性：Box](#1.4. 盒子属性：Box)
- [1.5. 列表属性：List-style](#1.5. 列表属性：List-style)
- [1.6. 定位属性：Position](#1.6. 定位属性：Position)
- [1.7. 区块属性：Block](#1.7. 区块属性：Block)
2.常用css属性代码
- [2.1. 文字属性设置](#2.1. 文字属性设置)
- [2.2. 边框空白设置](#2.2. 边框空白设置)
- [2.3. 背景样式设置](#2.3. 背景样式设置)
- [2.4. 指定背景位置](#2.4. 指定背景位置)
- [2.5. 符号属性设置](#2.5. 符号属性设置)
- [2.6. 链接属性设置](#2.6. 链接属性设置)
- [2.7. 边框线属性设置](#2.7. 边框线属性设置)
- [2.8. 其他边框线属性设置](#2.8. 其他边框线属性设置)
- [2.9. 边界样式设置](#2.9. 边界样式设置)
3.其他
- [3.1. button按钮样式的4种状态](#3.1. button按钮样式的4种状态)
- [3.2. flex弹性布局](#3.2. flex弹性布局)
- [3.3. justify-content](#3.3. justify-content)
- [3.4. initial](#3.4. initial)

前言

微信小程序的样式与css样式基本一致。
常用css样式：背景、字体、边框、盒子、列表、定位、区块
常用css属性：背景样式、文字属性、边界样式、边框空白、符号属性、连接属性、表单运用、框线一览表

1.常用css样式

1.1. 背景属性：background

色彩：{background-color: #FFFFFF;} 白色

图片：{background-image: url();}

重复：{background-repeat: no-repeat;}

滚动：{background-attachment: fixed;} (固定) scroll;(滚动)

位置：{background-position: left;} (水平) top(垂直);

简写方式：{background: #000 url(...) repeat fixed left top;} /阅读代码中常出现简写方式/

1.2. 字体属性：font

大小：{font-size: x-large;}(特大) xx-small;(极小)，单位：PX、PD

样式：{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高：{line-height: normal;}(正常) 单位：PX、PD、EM

粗细：{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体：{font-variant: small-caps;}(小型大写字母) normal;

大小写：{font-transform: capitalize;}(首字母大写) uppercase;lowercase;none;

修饰：{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体：{font-family: "Microsoft YaHei";}(微软雅黑), "MicrosoftJhengHei"(华文细黑)

1.3. 边框属性：Border

边框样式：{border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;}

边框宽度：{border-width: 1px;}

边框颜色：{border-color: #ccc;}

边框圆角：{border-radius: 10px;}(圆角半径)

简写方式：{border: width style color;}

1.4. 盒子属性：Box

box-sizing:border-box的作用：

想要清楚这个属性的作用，首先要理解盒子模型，盒子模型是指：外边距（margin）+ 边框（border）+ 内边距（padding）+ 内容（content），可以把每一个容器，比如div，都看作是一个盒子模型。

比如给一个DIV设置了宽高为500px，实际上只设置了content，之后我们又设置了边框和内边距（padding:10px;border:1px solid red;），那么最终这个元素的宽高就是544px（500px + 40px + 4px），就是说一个元素的实际宽高是由 border + padding + content 组成。

如果没有设置box-sizing:border-box属性，元素的宽高会加上border和padding，那么为了不超过给定的宽高，需要我们手动去计算减去相应的border和padding值，如果设置了box-sizing:border-box属性，盒子模型就会自动调整content的值，不需要手动调整。

1.5. 列表属性：List-style

类型：{list-style-type: disc;}(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗马数字) upper-roman;(大罗马数字) lower-alpha; upper-alpha;

位置：{list-style-position: outside;}(外) inside;

图像：{list-style-image: url(...);}

1.6. 定位属性：Position

position-relative; 相对定位

position-absolute; 绝对定位

position-static; 默认定位，使元素定位于常规流（自然流）中，且忽略任何top、bottom、left或right声明

visibility: hidden; 将元素隐藏，但在页面中该占的位置还是占着。

display: none; 将元素显示设为无，且在页面中不占任何的位置。

visibility: inherit; 继承上一个父对象的可见性。

visibility: visible; 对象可视

overflow属性规定当内容溢出时的处理方式：

overflow: visible; 不裁剪超出盒子的部份

overflow: hidden; 将超出盒子部份的内容隐藏

overflow: scroll; x轴和y轴都有滚动条

overflow-x: scroll; x轴强制出现滚动条

overflow-y: scroll; y轴强制出现滚动条

overflow: auto; 自动判断是否出现滚动条

overflow: inherit; 从父元素继承overflow的属性

clip裁剪绝对定位元素

clip 属性允许定义一个元素的可见尺寸，当一幅图像的尺寸大于包含此元素时，此图像就会被修剪并显示为这个元素定义的形状。

position: absolute;

clip: rect(0px,165px,200px,34px) (裁切)

clip:rect(0px,165px,200px,34px)中的0px,165px,200px,34px分别对应图片的上，右，下，左四个方位；clip:rect()需要配合position属性使用，才能对图像进行裁剪。

注意：

● 如果先有"overflow：visible"定义了元素，clip属性就不起作用。

● css中的clip:rect()只能在绝对定位的元素上使用，包括fixed属性的元素，因为fixed也算绝对定位

1.7. 区块属性：Block

对齐：{text-align: justify;}(两端对齐) left; right; center;

垂直对齐：{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

字间距：{letter-spacing: normal | length | inherit ;} normal: 相当于0，length: 数值可为负数

词间距：{word-spacing: normal | length | inherit ;}

缩进：{text-indent: 数值px;}

空格：{white-space: pre;}(保留) nowrap;(不换行)

显示：{display: block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记)

2.常用css属性代码

2.1. 文字属性设置

color : #999999; /文字颜色 /

font-family : 宋体,sans-serif; /文字字体 /

font-size : 9pt; /文字大小 /

font-style:itelic; /文字斜体 /

font-variant:small-caps; /小字体 /

letter-spacing : 1pt; /字间距离 /

line-height : 200%; /设置行高 /

font-weight:bold; /文字粗体 /

vertical-align:sub; /下标字 /

vertical-align:super; /上标字 /

text-decoration:line-through; /加删除线 /

text-decoration: overline; /加顶线 /

text-decoration:underline; /加下划线 /

text-decoration:none; /删除链接下划线 /

text-transform : capitalize; /首字大写 /

text-transform : uppercase; /英文大写 /

text-transform : lowercase; /英文小写 /

text-align:right; /文字右对齐 /

text-align:left; /文字左对齐 /

text-align:center; /文字居中对齐 /

text-align:justify; /文字分散对齐 /
vertical-align 属性

vertical-align:top; /垂直向上对齐 /

vertical-align:bottom; /垂直向下对齐 /

vertical-align:middle; /垂直居中对齐 /

vertical-align:text-top; /文字垂直向上对齐 /

vertical-align:text-bottom; /文字垂直向下对齐/

2.2. 边框空白设置

padding-top:10px; /上边框留空白 /

padding-left:10px; /左边框留空白 /

padding-bottom:10px; /下边框留空白 /

padding-right:10px; /右边框留空白/

2.3. 背景样式设置

background-color:#F5E2EC; /背景颜色 /

background:transparent; /透视背景 /

background-image : url(/image/bg.gif); /背景图片 /

background-attachment : fixed; /浮水印固定背景 /

background-repeat : no-repeat; /不重复排列 /

background-repeat : repeat; /重复排列-网页默认 /

background-repeat : repeat-x; /在x轴重复排列 /

background-repeat : repeat-y; /在y轴重复排列/

2.4. 指定背景位置

background-position : top; /向上对齐 /

background-position : left; /向左对齐 /

background-position : buttom; /向下对齐 /

background-position : right; /向右对齐 /

background-position : center; /居中对齐 /

background-position : 90% 90%; /背景图片x与y轴的位置/

2.5. 符号属性设置

list-style-type:none; /不编号 /

list-style-type:decimal; /阿拉伯数字 /

list-style-type:lower-alpha; /小写英文字母 /

list-style-type:upper-alpha; /大写英文字母 /

list-style-type:lower-roman; /小写罗马数字 /

list-style-type:upper-roman; /大写罗马数字 /

list-style-type:disc; /实心圆形符号 /

list-style-type:circle; /空心圆形符号 /

list-style-type:square; /实心方形符号 /

list-style-image:url(/dot.gif); /图片式符号 /

list-style-position: outside; /凸排 /

list-style-position:inside; /缩进/

2.6. 链接属性设置

a /所有超链接 /

a:link /超链接文字格式 /

a:visited /浏览过的链接文字格式 /

a:active /按下链接的格式 /

a:hover /鼠标转到链接/

2.7. 边框线属性设置

border-top-color : #369 /设置上框线top颜色 /

border-top-width :1px /设置上框线top宽度 /

border-top-style : solid/设置上框线top样式 /

可使用简写方式如下：

border-top : 1px solid #6699cc; /上框线 /

border-bottom : 1px solid #6699cc; /下框线 /

border-left : 1px solid #6699cc; /左框线 /

border-right : 1px solid #6699cc; /右框线/

2.8. 其他边框线属性设置

solid /实线框 /

dotted /虚线框 /

double /双线框 /

groove /立体内凸框 /

ridge /立体浮雕框 /

inset /凹框 /

outset /凸框/

2.9. 边界样式设置

margin-top:10px; /上边界 /

margin-right:10px; /右边界值 /

margin-bottom:10px; /下边界值 /

margin-left:10px; /左边界值/

3.其他

3.1. button按钮样式的4种状态

普通状态
hover 鼠标悬停状态
active 点击状态（按下弹起）
focus 取得焦点状态（按下不弹起）
.btn:focus{outline:0;}：可以去除按钮或a标签点击后的蓝色边框

3.2. flex弹性布局

display:flex 意思是弹性布局，是css中常用的一种布局手段，可以使元素具有弹性，让页面中的元素随着页面大小的改变而改变。
以下几个属性都是加在父元素身上：

flex-directory:row 布局排列方向
row: 默认值，按行排列，水平方向从左至右
row-reverse: 按行排列，水平方向从右至左
column: 按列排列，方向为垂直方向从上至下
column-reverse: 按列排列，方向为垂直方向从下至上
flex-wrap:nowrap 是否换行处理
nowrap: 默认值，不换行处理
wrap: 换行处理
wrap-reverse: 反向换行
flex-flow: flex-directory flex-wrap 复合写法，顺序一定不能乱
align-items: 每一行中子元素的上下对齐方式
center: 居中对齐

3.3. justify-content

justify-content属性用于描述弹性盒子容器的对齐方式。它包含沿着分布在浏览器中的 flex 容器的主轴的内容项之间和周围的空间。

注意：此属性不能用于沿垂直轴描述项目或容器。为了垂直对齐项目，我们可以使用align-items 属性

在应用了 lengths 和 auto margins 属性后，对齐是可能的，即，如果在Flexbox 布局中至少有一个具有flex-grow 属性而不是 0 的灵活元素，那么它不会影响并且有任何影响不会有任何可用空间。

句法：

c 复制代码

justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit;

属性值：

flex-start：它是用于从容器开始对齐弹性项目的默认值。

句法：

c 复制代码

justify-content: flex-start;

flex-end：用于对齐容器末端的弹性项目。

句法：

c 复制代码

justify-content: flex-end;

justify-content:space-between：指两端对齐，项目之间的间隔都相等

3.4. initial

initial 关键字用于设置CSS属性为它的默认值，可作用于任何CSS样式（IE不支持该关键字）