常用CSS样式及属性代码

大家好，欢迎来到IT知识分享网。

前言

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

1.常用css样式

1.1. 背景属性：background

1.2. 字体属性：font

1.3. 边框属性：Border

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

1.6. 定位属性：Position

1.7. 区块属性：Block

2.常用css属性代码

2.1. 文字属性设置

color : #; /文字颜色/
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种状态

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

3.2. flex弹性布局

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

3.3. justify-content

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

justify-content: flex-start; 

justify-content: flex-end; 

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

3.4. initial

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