• 技术文章 >web前端 >html教程

    CSS+DIV第二天_html/css_WEB-ITnose

    2016-06-24 12:33:39原创611

    第二天开始. 昨天学习了css的基本用法.包括css的引用和一些常用css属性。掌握了css的基本用法,只是完成了css+div排版的第一步。说到排版,最重要的莫过于定位。我们用table来排版的时候是直接在网页上画出一个个格子,把内容填充到相应的格子里去。用css也是这个原理,不过css不能直接划格子,它有它自己的一套定位方法。今天的目标就是掌握css的定位。


    首先,介绍两个定义:相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。下面是定位需要用到的几个属性:



    因为定位不是一般的重要,所以这里详细介绍一下各个参数的作用:


    position: static | absolute |relative
    static :  无特殊定位,对象遵循HTML定位规则
    absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
    //我们用绝对定位的时候一般都用这个属性。
    relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置


    left: auto|lenth
    auto :  无特殊定位,根据HTML定位规则载文档流中分配
    length :  由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效。
    例:div { position: absolute; left: 1in; }
    top和left的用法是一样的,也要注意的是必须定义position属性值为absolute或者relative此取值方可生效。


    width:auto|lenth
    auto :  无特殊定位,根据HTML定位规则载文档流中分配
    length :  由浮点数字和单位标识符组成的长度值 | 百分数。
    height与width语法完全相同。而它不需要定义position必须为absolute


    clip : auto | rect ( number number number number )
    auto :  对象无剪切
    rect ( number number number number ) :  依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切


    overflow : visible | auto | hidden | scroll
    visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
    //这个属性的结果就像当与没有div,内容有多少就显示多少。
    auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
    hidden :  不显示超过对象尺寸的内容
    scroll :  总是显示滚动条


    z-index: auto | number
    auto :  遵从其父对象的定位
    number :  无单位的整数值。可为负数
    //应该是用来产生一些立体效果滴


    visibility: inherit | visible | collapse | hidden
    inherit :  继承上一个父对象的可见性
    visible :  对象可视 hidden :  对象隐藏
    collapse :  主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。IE5.5尚不支持此属性。


    以上属性中的position,width,height,left,top,z-index是用来给div定位的,其中的clip,overflow,visibility则是用来控制对内容的显示的,这些属性可以看作一个层的基本属性。掌握了层的基本属性,我们就可以来看一个用层来定位并控制显示的例子:



       
       dingwei css
       
       


       
       


        请选择一幅图片:

    //*设置字体大小、名称、颜色*//
       

       

       //*导入一张图片,标识符为container1*//
       


         名称:大漠

    //*设置字体名称、颜色、大小*//
       

       

       

       

       //*导入另一种图片,标识符为container2*//
       


         名称: 大海


       

       

       
    //*定义两个按钮*//
       

        onclick=“container1.style.visibility=‘visible’;
        container2.style.visibility=‘hidden’”>
        //*定义鼠标点击事件图片1为可见,图片2为不可见*//
            container1.style.visibility=‘hidden’;
        onclick=“container2.style.visibility=‘visible’;
        container1.style.visibility=‘hidden’”>


        //*定义鼠标点击事件图片1为不可见,图片2为可见*//
        

        
      
    button上用了一点js的技巧来控制css中的visibility值.

    上面这个例子讲的只是平面布局,驼驼以前的css知识也就到此为止,然而上面有个z-index的参数,是用来立体定位的,所以,div也可以是立体的,下面就来一个简单的立体例子:

       
        zindex
       
        


        
             style=“z-index:1”>
         //*导入一张图片,使它为pile类,z-index属性定义为1,位置处于最下方
          *//
        
        style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。
        
    //*定义一段文字的颜色和z-index属性为2,处于中间位置*//
            style=“z-index:3”>
         //*导入第二张图片,使它为“pile1”类,z-index属性为3,位置处于最上
          方*//
        
      


    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS+DIV第二天
    上一篇:jQuery实现放大镜效果_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 为什么是这样的?_html/css_WEB-ITnose• CSS 高级技巧汇总_html/css_WEB-ITnose• 开始的续写_html/css_WEB-ITnose• css的学习_html/css_WEB-ITnose• 浏览器得到地址栏的相关信息_html/css_WEB-ITnose
    1/1

    PHP中文网