一、样式属性:
1、大小:width 宽度
height 高度
2、背景:background-color : 背景色
background-image:url(路径) 背景图片
background-repeat : 背景图的平铺方式 /*no-repeat不平铺 ,repeat 平铺 ,repeat-x 横向平铺, repeat-y 纵向平铺*/
background-position 背景图片位置/* center 居中,right top 右上角,left 100px top 100px 离左边100像素,离上边100像素(可以设置负值)*/
background-attachment 设置背景图片是否滚动/* fixed 背景是固定的,不随字体滚动,scroll 背景随字体滚动。*/
background-size 背景图的大小 200px 200px
3、字体:font-family 字体样式
font-size 字体大小 12px 14px
font-style italic倾斜
font-weight bold加粗
text-decoration underline下划线,overline上划线,line-through删除线,none没有,用来去掉超链接的下划线
color 字体颜色
4、对齐方式:text-align 水平对齐方式
vertical-align 垂直对齐方式,配合display:table-cell;
line-height 行高
text-indent 缩进 单位像素
display 显示 /*none 不显示,inline-block 显示为块,不自动换行,宽度可设,block 显示为块,自动换行, inline 效果同span标签,不自动换行, 宽高不可设*/
visibility 可视性 /*hidden 隐藏但是占用空间,visible 显示*/
二、边界边框:
margin 外边距 上右下左
padding 内边距 上右下左
border 如果加了内边距,该元素会相应的变大
1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色
三、列表方块:
width、height、(top、bottom、left、right)只有在绝对坐标的情况下才有用。
list-style none将列表前面的序号去掉,circle 序号变为圆圈
list-style-image 可以将前面的序号变为图片
list-style-position:outside 序号在内容外
list-style-position:inside 序号跟内容在一起
四、格式与布局:
(1)位置:position fixed固定 相对于浏览器边框位置固定
absolute绝对位置 相对于父级元素(浏览器,绝对定位的上级)
relative相对位置 相对于自身应该出现的位置
top 距离上边的距离
right 距离右边的距离
bottom 距离下边的距离
left 距离左边的距离
(2)流:float left 向左流
right 向右流
clear both 清掉流
z-index分层 值越大越靠上
五、其他:
display 显示block和隐藏none,不占位置
visibility 显示visible和隐藏hidden,占位置
overflow 超出范围 hidden隐藏
透明 opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
圆角 border-radius:5px;
阴影 box-shadow:0 0 5px white;