码迷,mamicode.com
首页 > Web开发 > 详细

CSS div和css布局

时间:2018-11-21 17:47:57      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:条件判断   大小   notepad   web   转换   col   text   大于   外边距   

一.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 条件 版本]> 那么显示 <![endif]-->

    不等于

      [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>

 

CSS div和css布局

标签:条件判断   大小   notepad   web   转换   col   text   大于   外边距   

原文地址:https://www.cnblogs.com/chy-op/p/9995852.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!