css常见样式

1.width: 宽度
2.height: 高度
3.border： 边框
border-width: 边框的宽度
border-style: 边框的线性
solid 实线
dashed 虚线
dotted 点画线
border-color: 边框的颜色
border-top: 上边框
border-bottom: 下边框
border-left: 左边框
border-right: 右边框
border-radius: 圆角（radius--半径）
transparent 透明
border-left：transparent; 左边框透明的
border的缩写：
border:边框的宽度 边框的线性 边框的颜色;
4.定位：
position:absolute； 绝对位置----------------------------
top:xxpx；
right:xxpx；
bottom:xxpx；
left:xxpx；
*会脱离文档流 会影响下面的标签
*相当于浮动的特性 行变块
*根据body定位
position:relative； 相对定位----------------------------
top:xxpx；
right:xxpx；
bottom:xxpx；
left:xxpx；
*本身的位置还在站位
*不会是浮动特性 行不变块
*根据本身原有位置定位
position:fixed; 固定定位----------------------------
绝对居中： position:absolute;
top:50%
left:50%
magin-top:-X （x为块高度的一半）
magin-left:-X （x为块宽度的一半）
5.背景：
background： 背景
background-color： 背景颜色
background-image: 背景图
background-repeat: 背景图平铺
-----no-repeat 不平铺
-----repeat-x x轴平铺
-----repeat-y y轴平铺
background-position: 背景图定位
x y;
Background-attachment: fixed； 背景图滚动
复合写法：
background: color image position repeat;
6.背景图透明：
opacity:xx; 透明程度
xx为0-1之间
filter:alpha(opacity=xx)兼容IE6
xx为0-100之间
7.浮动：
float: 浮动
left 左浮动
right 右浮动
清除浮动:
1-overflow:hidden; （溢出隐藏）清除浮动
2-.clearfix:after{ display:block; clear:both; content:"";}
.clearfix{ zoom:1;} 防止IE BUG
3-给想要浮动的同级加个块标签 然后给这个块标签加个clear：both
特性：
1.是一个有方向的；
2.变成了块；
3.并到了一排；
4.顶对齐；
5.宽度不够会掉下来；
6.脱离了文档流；
加上浮动的元素只会对下面的元素有影响
加浮动必须：
只要有一个标签加上了浮动，同级的标签都要加浮
加浮动就必须请浮动（只能写在父级）
尽量要设置宽度，不给宽度会是内容的宽度；
8.字体：
color: (文本颜色)
font-size （文字大小）
font-weight:bold (文字加粗)
normal---不加粗
font-style:italic （文字倾斜）
normal---不倾斜
font-family: (字体)
中文、英文、unicode
简写：
font:[style] [weight] size/line-height family
9.省略：
width:xxx px;
white-space:nowrap; （文字不换行）
overflow:hidden; （溢出隐藏）
text-overflow:ellipsis; （省略号）缺一不可，而且要设置宽
10.文本：
text-align: center; 文本水平居中
right 文本水平向右
line-height: 文本的垂直居中（文字纵向居中）行高
写高度
text-indent:em （文本缩进）
11.划线：
text-decoration:none; （取消下划线）
underline （下划线）
overline （上划线）
line-through（中划线）
12.转化：
display:none 隐藏元素
display:block 转换成块
display:inline 转换成行000000000000000000000000
display:inline-block 转换成行内块(底对齐)
13.内外边距：
padding (内边距)
:边框到内容的距离
margin （外边距）
一个盒子到另一个盒子的距离
14.关于padding:
padding: 5px; 上 下 左 右
padding:100px 50px 上 下 左 右
padding:20px 60px 100px; 上 左 右 下
padding:20px 60px 80px 120px; 上 右 下 左
padding-top:50px; 每一个方向，只给一个单独的值
padding-left:50px;
padding-right:50px;
padding-bottom:50px;
*** 给了padding就要用宽高来减去这个padding 的距离
如果没有设置宽高就不需要减掉；
*** 行标签只可以给左右的padding
15.关于margin：
margin:5px; 上 下 左 右
margin:100px 50px 上 下 左 右
margin:20px 60px 100px; 上 左 右 下
margin:20px 60px 80px 120px; 上 右 下 左
margin负值：
left or right 不能设置宽
top or bottom 不能设置高
*** 行标签只可以给左右的margin
margin的BUG:
***拖拽父级（塌陷）
解决的办法如下所述：
overflow:hidden;
border:1px solid #000;
padding-top:50px;(推荐)
***margin合并
解决的办法如下所述：
给单一方向加上你想要的距离（取最大值)