1,大小
宽度: "100px/50%"
高度: height:"100px" 实现高度100% position:fixed; 配合使用
2,背景 【写在<head></head>之间 , <style type="text/css"> body{ }</style>里面】
背景色: background-color:red/#颜色代码;
背景图片: background-image:url(图片路径) ;
背景图的平铺方式: background-repeat:选择属性;
背景图片位置: background-position:(top/bottom/left/right);
设置背景图片是否滚动: background-attachment:(选择属性);
3,文字
字体样式: font-family:宋体;
字体大小: font-size:4px; (一般在12px -14px之间)
倾斜: font-style:italic;
加粗: font-weight :bold;
划线: text-decoration:underline(下划线)/overline(上划线)/line-through(删除线)/none(没有,用来去掉超链接的下划线);
字体颜色: color:red/#颜色代码;
4,对齐
水平对齐: text-align:对齐属性;
垂直对齐: display:table-cell;加上vertical-align:对齐属性; (两个必须一起才能实现对齐)
行高: line-height:10px; (在只有一行文字,行高等于所在元素高度时,实现垂直居中)
文字缩进 : text-indent:5px; (对象为文本文字,为正值时对第一行操作相当于空格,空出单位像素。为负值时,向左隐藏单位距离的文本文字)
5,边距,边线
内边距: padding-(top/bottom/left/right):10px; (增加内边距,会相应的使所在元素的位置扩大)
外边距: margin-(top/bottom/left/right):10px; (是两个元素之间出现间距,不改变元素大小)
边线粗细,线型,颜色: border:1px solid(实线) red/#元素代码;
6, 对有序列表/无序列表的处理
去掉内容前的序号/圆点 : list-style:none;
将前面的序号/圆点变为图片 list-style-image:url(图片路径);
7,流式布局(流式布局实际上已经浮动,处于平面的上层)
左侧流式布局: float:left;
右侧流式布局: float:right;
清除流式布局: <div ></div> (clear:both;是清除流布局,一般创建一个没有长宽高的层标签来清除流式布局)
8,分层
z-index分层: z-index:5555; (数值越大的,就是能看到的)
9,display
隐藏(用户看不到,不占位置): diaplay:none;
显示(用户能看到): display:block;
div宽度等于文字宽度: display:inline-block;
10,visibility
隐藏:(用户看不到内容,但能看到位置): visibility:hidden;
显示: visibility:visible;
11,超出范围内容(出现滚动条)
横向,纵向滚动条都显示:overflow:hidden;/overflow:auto;
只显示纵向滚动条:overflow-y:scroll;
只显示横向滚动条:overflow-x:scroll;
12,透明度
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50) 【数值越小,透明度越大】
13,圆角(将div棱角变成圆角)
border-radius:5px;
14,阴影
box-shadow:0 0 5px white; 【第一个0光线方向正值从左侧来负值从右侧来,第二个0光线方向正值从上侧来负值从下面来,第三个5是虚化程度】
15,定位(写入position后可以用top/bottom/left/right来改变位置)
相对定位(占位置):position:relative;使元素作为常规元素出现,并且使position:absolute;在其中定位。用top/bottom/left/right来改变位置时,占据其他元素位置。
绝对定位(不占位置):position:absolute;单独使用后浮动,top/bottom/left/right来改变位置时,不占据其他元素位置。
固定在浏览器某个位置:position:fixed;