CSS基础和布局复习

浏览数：35 / 时间：2015年06月09日

table布局	div布局优势
	浏览器支持完善
	表现和结构分离
	样式设计控制功能强大
	可以继承,层叠处理

Transitional // 松散过度型

Strict //严格型

Frameset //比较不常用的，使用框架使用这种模式

XHTML中的所有标签都是要闭合的比如 "<input/>"
但是在HTML中就不必这样


    	"<input>"即可

CSS中的数据单位:

px : 像素

em : 当前对象体内的字体尺寸（好像英文比较常用这个尺寸）

ex : 当前字符高度的相对尺寸 ( font-size:1.2ex,当前字符的1.2倍高)

pt : 点/镑point (font-size:9pt;)

pc : 派卡 pica

in : 英寸

pc : 派卡 pica

mm ：毫米

cm ：厘米

rgb ：（0，0，0）

rgba：（0，0，0，0.2）

rrggbb ：十六进制的颜色单位 #ffffff;

colorName ：字体颜色(color:blue)


样式分有三种 ：

行间样式
内部样式
外部样式

css布局和定位:

1:一列自适应: width:80%;

    <h5>一列固定居中: margin:0 auto;</h5>
    <h5>二列固定宽度:</h5>
    <div id="two-row" class="clearFix">
    	<style>
			.clearFix:after{
				content:"";
				display:block;
				visibility:visible;
				clear:both;
				height:0;
			}
        	#two-row {
				width:500px;
				background:#666
			}
        	#two-row .left{
				width:200px;
				background:#0C9;
				float:left;
			}
        	#two-row .right{
				width:300px;
				background:#069;
				float:left;
			}
        </style>
    	<div class="left">row1</div>
    	<div class="right">row2</div>
    </div>

2:两列宽度自适应：利用左右定位；中间居中

    <div id="two-auto" class="clearFix">
        <style>
            .clearFix:after{
                content:"";
                display:block;
                visibility:visible;
                clear:both;
                height:0;
            }
            #two-auto {
                background:#666
            }
            #two-auto .left{
                width:35%;
                background:#0C9;
                float:left;
            }
            #two-auto .right{
                width:30%;
                background:#069;
                float:left;
            }
        </style>
        <div class="left">auto-left</div>
        <div class="right">auto-right</div>
    </div>

    
3:两列右列宽度自适应


<div id="right-auto">
    <style>
           #right-auto{
        }
        #right-auto .left{
            width:100px;
            float:left;
            background:#ccc;
        }
        #right-auto .right{
            background:#f00;
            border:2px solid #000;
        }
    </style>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <h5>三列自适应</h5>
    <div id="three">
        <style>
        #three{
            position:relative;
        }
        #three .left{
            position:absolute;
            left:0;top:0;
            width:100px;
            height:300px;
            background:#C99;
        }
        #three .right{
            position:absolute;
            top:0;right:0;
            width:100px;
            height:300px;
            background:#C99;
        }
        #three .center{
            margin-left:100px;
            margin-right:100px;
            height:300px;
            background:#F03;
        }
        </style>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>

    <h5>三列自适应;利用左右浮动；中间居中</h5>
    <div id="three-1">
        <style>
        #three-1{
            position:relative;
        }
        #three-1 .left{
            float:left;
            width:100px;
            height:300px;
            background:#C99;
        }
        #three-1 .right{
            float:right;
            width:100px;
            height:300px;
            background:#C99;
        }
        #three-1 .center{
            margin-left:100px;
            margin-right:100px;
            height:300px;
            background:#F03;
        }
        </style>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>

高度自适应:

高度自适应这个必须设置 html,body{height:100%} 因为ff和ie中html，和body的高度是不同的，这么写是处理兼容问题; ff,chrome{html为当前视区大小,要把html100%的高度，body为内部内容高度，滚动出现在html中} ie{html为隐藏的好像；body为内部内容的高度，滚动是出现在body中的}