项目符号样式--list-style-type对于一个无序列表可选值有none disc circle square
对于一个有序列表可选值有decimal decimal-leading-zero lower-alpha upper-alpha lower - roman upper-roman
项目图像---list-style-image----url();
标记定位---list-style-position--outside --inside--表示标记会在文本的外面还是里面
列表快捷方式list-style
空单元格的边框--empty-cells---show---hide--inherit--
单元格之间的间隙-- border-spacing--设置相邻的间隙
-border-collapse--collapse会使spacing/empty-cells失效会都挤在一起
光标样式:cursor--auto--crosshair-default-pointer-move-text-wait-help-url("cursor.gif");
元素定位:
普通流:position-static
相对定位:position-relative
绝对定位:position-absolute
固定定位:position-fixed
在实际定位中经常使用父元素相对定位 子元素绝对定位 简称父相子绝。
重叠元素-z-index--也称堆叠上下文 值高的显示在上面 通常在固定定位的时候使用
浮动元素:float -left-right
清除浮动:clear-left-right-both-none-
浮动元素的父级问题 ,解决办法是:
1、设置overflow:auto; width:100%
2、通过伪类:after{
content:.;
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
z-index:1;
利用浮动创建多列式布局
width--float--margin-
固定宽度布局:将宽度设置为一个固定的值。
流体布局:将宽度设置为一个百分比的值。
合理的布局:960像素12列网格
--940x1--460x2--300x3--220x4--140x5--间距都是20px--620-300--220-700--460-220-220--300-300-140-140--220-220-140-140-140-
@import url("xxx.css")可以导入多个样式 一个设置布局 一个设置字体大小颜色
<link href="">
关于图像的控制--设置宽高--设置浮动和外边距--设置display:block ;margin:0 auto ;居中;
背景图像:background-color background-image background-repeat background-attachment(将背景图片固定在页面的一个位置) background-position
简写background:#ffffff url('') no-repeat top right;
关于html5的布局
引入了语义化标签<header><footer><nav><article><aside><section><hgroup><figure><figcaption>
结构
<header>
<nav></nav>
</header>
<section>
<article>
<figure>
<img src=""/>
<figcaption></figcaption>
</figure>
<hgroup></hgroup>
</article>
</section>
<aside></aside>
<footer></footer>
让旧浏览器识别新元素
<!--[if it IE 9]>
<script src="http://html5shiv.googlecode.com.svn/trunk/html5.js"><script>
<![end]-->
这段代码在其他浏览器上是一句注释,小于IE9的浏览器可以识别它。