常用CSS样式及属性代码

常用CSS样式及属性代码

前言
1.常用css样式
    1.1. 背景属性：background
    1.2. 字体属性：font
    1.3. 边框属性：Border
    1.4. 盒子属性：Box
    1.5. 列表属性：List-style
    1.6. 定位属性：Position
    1.7. 区块属性：Block
2.常用css属性代码
    2.1. 文字属性设置
    2.2. 边框空白设置
    2.3. 背景样式设置
    2.4. 指定背景位置
    2.5. 符号属性设置
    2.6. 链接属性设置
    2.7. 边框线属性设置
    2.8. 其他边框线属性设置
    2.9. 边界样式设置
3.其他
    3.1. button按钮样式的4种状态
    3.2. flex弹性布局
    3.3. justify-content
    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 的灵活元素，那么它不会影响并且有任何影响不会有任何可用空间。
句法：

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

1
2

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

justify-content: flex-start;

1

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

justify-content: flex-end;

1

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

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