CSS div和css布局

一.div和span

　　DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式

　　DIV和span的区别在于，span是内联元素，div是块级元素。div占用整行，span只会占用内容大小的部分。div可以改变size，span不可以改变size

二.盒模型

　　margin　　盒子外边距，增加的话，内盒大小不会变

　　padding　　盒子内边距，增加的话，border向外扩大，内盒大小本身不会变

　　border　　盒子边框宽度

　　width　　盒子宽度

　　height　　盒子高度

三.布局相关的属性

　　1.position定位方式

　　　　relative　　正常定位

　　　　absolute　　根据父元素进行定位

　　　　fixed　　根据浏览器窗口进行定位

　　　　static　　没有定位

　　　　inherit　　继承

　　2.定位

　　　　left，right，top，bottom离页面顶点的距离

　　3.覆盖顺序优先级

　　　　z-index　　其值是从0，1，2... 数值越大，优先级越高，那么显示就在最上面

　　4.display显示属性

　　　　display:none　　层不显示

　　　　display:block　　块状显示，在元素后面换行，显示下一个块元素。将内联转换成块状

　　　　display:inline　　内联显示，多个块可以显示在一行内。将块状转换成内联

　　5.float浮动属性

　　　　left　　左浮动

　　　　right　　右浮动

　　6.clear清除浮动

　　　　clear:both

　　7.overflow溢出处理

　　　　hidden　　隐藏超出层大小的内容

　　　　scroll　　无论内容是否超出层大小都添加滚动条

　　　　auto　　超出时自动添加滚动条

四.兼容问题及高效

　　1.兼容性测试工具

　　　　IE Tester

　　　　Multibrowser

　　2.常用浏览器

　　　　Google chrome

　　　　Firefox

　　　　opera

　　3.高效的开发工具

　　　　轻量级

　　　　　　notepad++

　　　　　　sublime text

　　　　　　记事本

　　　　重量级

　　　　　　webstorm

　　　　　　Dreamweaver

　　4.网页设计工具

　　　　fireworks

　　　　photoshop

　　5.判断IE的方法

　　　　条件判断格式

　　　　不等于

　　　　　　[if !IE 8]　　除了IE8都可以显示

　　　　小于

　　　　　　[if lt IE 5.5]　　如果IE浏览器版本小于5.5的显示

　　　　大于

　　　　　　[if gt IE 5]　　如果IE浏览器版本大于5的显示

　　　　小于或者等于

　　　　　　[if lte IE 6]　　如果IE浏览器版本小于等于6的显示

　　　　大于或者等于

　　　　　　[if gte IE 6]　　如果IE浏览器版本大于等于6的显示

　　　　小于和大于之间

　　　　　　[if (gt IE 5)&(lt IE 7)]

　　　　或

　　　　　　[if (IE 6)|(IE 7)]

　　　　仅

<!--[if IE 8]>

<!doctype html>

<html>

    <head>

        <title>Div+Css布局(div+span以及盒模型)</title>

        <meta charset="utf-8">

        <style type="text/css">

            body{

                margin:0px;

                padding:0px;

            }

        /*

            div{

                background-color:green;

                color:#fff;

            }

            span{

                background-color:green;

                color:#fff;

            }

            div{

                width:500px;

                height:500px;

                padding:0px;

                margin:0px;

                border:solid 10px;

            }*/

            .div{

                width:600px;

                height:600px;

                margin:0 auto;

                background-color:green;

            }

            .diva{

            float:left;

            width:240px;

            height:240px;

            background-color:red;

            }

            .divb{

            float:left;

            width:240px;

            height:240px;

            background-color:yellow;

            }

            .div div{

                margin:10px;

                padding:10px;

                border:solid 10px;

            }

        </style>

    </head>

    <body>

        <!--div>麦子学院DIV</div>

        <div>麦子学院DIV</div>

        <span>麦子学院SPAN</span>

        <span>麦子学院SPAN</span-->

        <div class="div">

            <div class="diva"></div>

            <div class="divb"></div>

        </div>

    </body>

</html>

<!doctype html>

<html>

    <head>

        <title>Div+Css布局(布局相关的属性)</title>

        <meta charset="utf-8">

        <style type="text/css">

            body{

            padding:0;

            margin:0;

            }

            /*

            .div{

                width:300px;

                height:300px;

                background-color:green;

                position:relative;

                left:10px;

                top:10px;

                z-index:0;

            }

            span{

                position:absolute;

                background-color:#ff6600;

                color:#fff;

                top:-10px;

                right:0;

            }

            .fixed{

                position:fixed;

                background-color:#ff6600;

                color:#fff;

                top:100px;

                z-index:1;

            }

            */

            div{

            background:green;

            display:inline;

            width:200px;

            }

            span{

            background-color:red;

            display:block;

            width:200px;

            }

        </style>

    </head>

    <body>

        <!--div class="fixed">

            <p>联系电话：1111111</p>

            <p>联系QQ：782590844</p>

            <p>联系地址：四川省成都市</p>

        </div>

        <div class="div">

            <span>浏览次数：222</span>

        </div>

        </div-->

        <div>麦子学院</div>

        <div>麦子学院</div>

        <div>麦子学院</div>

        <span>麦子学院</span>

        <span>麦子学院</span>

        <span>麦子学院</span>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

    </body>

</html>

<!doctype html>

<html>

    <head>

        <title>Div+Css布局(浮动以及溢出处理)</title>

        <meta charset="utf-8">

        <style type="text/css">

            body{

            padding:0;

            margin:0;

            }

            .div{

                width:960px;

                height:600px;

                margin:0 auto;

                background-color:#f1f1f1;

            }

            .left{

            float:left;

            width:260px;

            height:460px;

            background:#ccc;

            }

            .right{

                float:right;

                width:690px;

                height:460px;

                background:#ddd;

            }

            .clear{

                clear:both;

            }

            .bottom{

            margin-top:10px;

            height:200px;

            width:960px;

            background:red;

            }

            .jianjie{

                width:260px;

                height:120px;

                background:red;

                overflow:auto;

            }

        </style>

    </head>

    <body>

        <div class="div">

            <div class="left">

                <div class="jianjie">

                    麦子学院麦子学院麦子学院麦子学院<br />

                    麦子学院麦子学院麦子学院麦子学院<br />

                    麦子学院麦子学院麦子学院<br />

                    麦子学院麦子学院麦子学院麦子学院<br />

                    麦子学院麦子学院麦子学院麦子学院<br />

                    麦子学院麦子学院麦子学院<br />

                    麦子学院麦子学院麦子学院<br />

                    麦子学院麦子学院麦子学院<br />

                </div>

            </div>

            <div class="right"></div>

            <div class="clear"></div>

            <div class="bottom"></div>

        </div>

    </body>

</html>