CSS 样式

大小

宽度 width

高度 height

例如：.div{100px;

height:100px;}

背景

背景色 bakcground-color:

颜色可以用英文例如red 也可以用#查找例如：#f00 其实也是红色或者用三色 rgb（255，255,255）

背景图片 background-image:url(图片路径)

背景图的平铺方式 background-repeat

例如： background-repeat：no-repeat 意思是是否重复背景图：不平铺就是单张图

背景图的位置 background-position：top /center/ bottom 这里说的是垂直顶部居中底部

例如居中：background-position:center 是定在div 有宽高的上下中间

背景图大小 background-size

例如：bakckground-size:100px 100px; 图片宽高 100px

背景图 background-attachment

例如：background-attachment:fixed; 把图片锁住

字体

字体样式 font-family

例如：font-family:微软雅黑;

字体大小 font-size

例如：font-size:12px;

字体倾斜度 font-style

例如：font-style:intalic; 倾斜

字体划线 text-decoration:underline ;下划线

text-decoration:overline; 上划线

text-decoration:line-through;删除线

text-decoration:none; 没有，一般是用来去掉连接的下划线的

字体颜色 color

color：red；字体颜色是红色

对齐方式

水平对齐：text-align

例如：text-align:center; 水平居中

垂直对齐：vertical-align 一般配合着display:table-cell

例如：vertical-align:center; display:table-cell;

行高 line-height div一般垂直对齐不好用时就用行高针对这个div左上边的点

例如：有一个div高度是300px 那么加一个div 高度是30px 居中是 line-height：50%；margin-top：-30px；

有一个div高度是50px 文字垂直居中是height:50px;

文字缩进 text-indent

例如：一段文字第一行空出2个字那么用缩进

text-indent:30px;

边界边框

视图

外边距 maigin 就是边框线距离外边的距离 margin：上右下左顺时针算

例如：margin-top：20px；或者 margin：20px 0 0 0 ；

边框线 boder 边框线粗细大小

border：1px solid black；意思是 1px粗细实线边框线颜色是黑色

box-sizing:border-box; div1套div2 意思把里面的div2超出外面的div1的div2边框线缩进div1里面正好一样大小

内边距 padding 内容距离边框的距离如果加了内边距，边框大小有时候会响应撑大了

例如：padding：10px；

列表方块列表也可以相当于一个div方块可以插入样式

list-style：none; 就是把前面的列表的序号或者点去掉

list-style-image：url（小图标路径）

其他

display：none；隐藏不占位置

block 显示

例如：隐藏

显示

visibility hidden 隐藏占用位置

visible 显示

隐藏：

大家看出来区别了么

超出部分 overflow :hidden; 超出部分隐藏

ovetflow:scroll; 超出部分用滚动条看

透明

opacity:0.5; -----对应的是高级浏览器透明度

-moz-opacity:0.5; -------对应的是火狐浏览器

filter:alpha(opacity=50) -----对应的是IE浏览器

最好是一块用

弧度就是把div的四边角有修成弧度的

border-radius: px

阴影

box-shadow: 0 px 0 px 30px black

从左到右为正数上到下为正数阴影范围阴影颜色

格式布局

流 float 浮动起来，当外面的宽度（浏览器的边框的宽度能动）不够时会自动挤到下一行

例如：<div style="100px;height:100px;background-color:red;float:left;"></div>

清流 clear：both；

例如：

会把黑色的盖住，因为前两个div是浮动起来的可以认为飘起来的

要是把第个div 在第二行显示的话那么就要清流

位置

position:fixed; 位置固定相对于浏览器边框位置固定，不会随着滚动条滚动而变动位置

position：absolute; 浮动起来的，相对于父级的position而改动位置如果没有父级位置会往上找父级位置一直到整个找到body

position：relative；和没有position一样，一般是给div定义父级用的

有了position 加位置就好办了 top left bottom right

例如： position：absolute；

top：10px；

层

z-index：数字（没有px）没有z-index的时候，一般默认数字是0 针对上面position 用的

谁的数字大就就在上面