zoukankan      html  css  js  c++  java
  • CSS基础5-定位和元素转化

    模块回顾

    1.position定位

    2.元素转化

    一、定位

    css中用postion定位一般有4中,

    1)固定定位(fixed)

    2)相对定位(relative)

    3)绝对定位(absolute)

    4)静态定位(static)

    1.fixed:固定元素框不随页面的滚动而滚动,固定在一个地方不会变动。例如:

     1 <div id="dog1">
     2     <div id="dog2"><a href="#"><img src="360-dog.png" alt="" id="l1"></a></div>
     3     <div id="dog3">
     4     <div ><img src="360-star.png" alt="" class="l2"></div>
     5     <div id="dog5"><a href="#" class="o1">娱乐</a></div>
     6     </div>
     7     <div id="dog6">
     8     <div ><img src="360-play.png" alt="" class="l2"></div>
     9     <div id="dog8"><a href="#" class="o1">看片</a></div>
    10     </div>
    11     <div id="dog9">
    12     <div ><img src="360-shopping.png" alt="" class="l2"></div>
    13     <div id="dog11"><a href="#" class="o1">购物</a></div>
    14     </div>
    15     <div id="dog12">
    16     <div ><img src="360-game.png" alt="" class="l2"></div>
    17     <div id="dog14"><a href="#" class="o1">游戏</a></div>
    18     </div>
    19     <div id="dog15">
    20     <div id="dog16"><img src="360-coffee.png" alt="" class="l2"></div>
    21     <div id="dog17"><a href="#" class="o1">生活</a></div>
    22     </div>
    23     <div id="dog18">
    24     <div id="dog19"><img src="360-money.png" alt="" class="l2"></div>
    25     <div id="dog20"><a href="#" class="o1">借钱</a></div>
    26     </div>
    27     <div id="dog21">
    28     <a href="#" id="dog22">星座运势</a>
    29     </div>
    HTML-fixed
    #dog1{
        border: 0px black solid;
        height: 350px;
        width: 75px;
        position: absolute;
        right: 30px;
        top: 57px;
        position: fixed;
    }
    #dog2{
        border: 0px black solid;
    }
    #l1{
        width: 74px;
        height: 80px
    }
    #dog3{
        border: 0px black solid;
        height: 30px;
        width: 70px;
        position: absolute;
        top: 85px;
        left: 2px;
        background-color: #f7f7f7;
    }
    .l2{
        height: 30px;
        width: 30px;
    }
    .o1{
        text-decoration: none;
        color: gray;
        font-size: 14px;
    }
    #dog4{
        border: 0px black solid;
        position: absolute;
        left: 2px;
        bottom: 0px;
    }
    #dog5{
        border: 0px black solid;
        height: 30px;
        position: absolute;
        left: 30px;
        top: 4px;
    }
    #dog6{
        border: 0px black solid;
        height: 30px;
        width: 70px;
        position: absolute;
        top: 120px;
        left: 2px;
        background-color: #f7f7f7;
    }
    #dog9{
        border: 0px black solid;
        height: 30px;
        width: 70px;
        position: absolute;
        top: 155px;
        left: 2px;
        background-color: #f7f7f7;
    }
    #dog12{
        border: 0px black solid;
        height: 30px;
        width: 70px;
        position: absolute;
        top: 190px;
        left: 2px;
        background-color: #f7f7f7;
    }
    #dog7{
        border: 0px black solid;
        position: absolute;
        left: 2px;
        bottom: 0px;
    }
    #dog10{
        border: 0px black solid;
        position: absolute;
        left: 2px;
        bottom: 0px;
    }
    #dog13{
        border: 0px black solid;
        position: absolute;
        left: 2px;
        bottom: 0px;
    }
    #dog8{
        border: 0px black solid;
        height: 30px;
        position: absolute;
        left: 30px;
        top: 3px;
    }
    #dog11{
        border: 0px black solid;
        height: 30px;
        position: absolute;
        left: 30px;
        top: 3px;
    }
    #dog14{
        border: 0px black solid;
        height: 30px;
        position: absolute;
        left: 30px;
        top: 3px;
    }
    #dog15{
        border: 0px black solid;
        height: 30px;
        width: 70px;
        position: absolute;
        top: 225px;
        left: 2px;
        background-color: #f7f7f7;
    }
    #dog18{
        border: 0px black solid;
        height: 30px;
        position: absolute;
        top: 260px;
        width: 70px;
        left: 2px;
        background-color: #f7f7f7;
    }
    #dog17{
        border: 0px black solid;
        height: 30px;
        position: absolute;
        left: 30px;
        top: 3px;
    }
    #dog20{
        border: 0px black solid;
        height: 30px;
        position: absolute;
        left: 30px;
        top: 3px;
    }
    #dog21{
        border: 0px black solid;
        height: 30px;
        position: absolute;
        top: 295px;
        width: 70px;
        left: 2px;
        background-color: #f7f7f7;
    }
    #dog22{
        color: orangered;
        font-size:14px ;
        text-decoration: none;
        position: absolute;
        margin: 6px
    }
    .o1:hover{
        color: yellowgreen;
    }
    .o1:visited{
        color: gray;
    }
    fixed

    2.相对定位:相对于自身未设置相对定位前的位置进行移动,引用chensiqi的一句话是“老家留坑,形影分离”,一般就是给绝对定位当参考,子承父。

    div1{
        width: 300px;
        height: 300px;
        background-color: red;
        position: relative;
    left:10px;
    bottom:5px;
    }
    relative

    3.绝对定位:

    绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的(默认是body);注意css描述的绝对定位概念,没有说明是离他最近的一个已相对定位的盒子进行定位的,所以离他最近的盒子的定位可以是相对定位(relative)和绝对定位(absolute)的,但是在开发中,一般是父盒子设置相对定位的,但是不代表只能是相对定位。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" href="D7CSSTest03.css">
    </head>
    
    <body>
    <div id="d1">
    </div>
    </body>
    </html>
    absolute
    #div1{
    position:absolute;
    left:30px;
    right:30px;
    top:50px;
    }
    absolute

    二、元素转化

    常用的块状元素有:<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<table>,<form>,<address>,<blockquote>

    常用的行内元素有:<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<img>,<input>,<q>,<var>,<cite>,<code>

    1.行内元素

    行内元素最常使用的就是span,其他的只在特定功能下使用,修饰字体<b>和<i>标签,还有<sub>和<sup>这两个标签可以直接做出平方的效果,而不需要类似移动属性的帮助,很实用。行内元素特征:(1)设置宽高无效(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间(3)不会自动进行换行。

    display:inline

    2.块状元素

      块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。块状元素特征:(1)能够识别宽高(2)margin和padding的上下左右均对其有效(3)可以自动换行(4)多个块状元素标签写在一起,默认排列方式为从上至下。

    display:block

    3.行内块状元素

      行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。

      行内块状元素特征:(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右。displa:inline-block

    4.转化

    块级元素默认display:block;行内非替换元素(a,span)默认为display:inline;;行内替换元素(input)默认为display:inline-block;

    display:none;不显示该元素,也不会保留该元素原先占有的文档流位置。

    display:block;转换为块级元素。

    display:inline;转换为行内元素。

    display:inline-block;转换为行内块级元素。
    通过display:block;与display:inline;可以很容易的实现两类元素变现形式之间的转换。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link rel="stylesheet" href="D7CSSTest04.css">
    </head>
    
    <body>
    <div id="d1">
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
    <div id="d4">原来你是我最想留住的幸运</div>
    <div id="d5">原来我们和爱情曾经靠的那么近</div>
    <p>我听见<span id="s1">远方</span>下课钟声响起</p>
    </body>
    </html>
    display
    /* CSS Document */
    #d1{
        width: 300px;
        height: 300px;
        background-color: red;
        position: relative;
    }
    #d2{
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
        right: 50px;
        top: 50px;
        z-index: 2;
    /*    绝对定位,根据上一级父元素谁有position属性,就根据谁定位,最大也就找到body,根据body定位*/
    }
    #d3{
        width: 50px;
        height: 50px;
        background-color: yellow;
        position: absolute;
        right: 40px;
        top: 40px;
        z-index: 3
    }
    #d4{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        border: 1px solid black;
        display:inline;
    /*    块状转内联元素*/
    }
    #d5{
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        border: 1px solid black;
    }
    #s1{
        color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: blue;
        display: block;
    /*    内联转块状元素*/
    }
    display-css
  • 相关阅读:
    Jmeter之http性能测试实战 非GUI模式压测 NON-GUI模式 结果解析TPS——干货(十一)
    UI Recorder 自动化测试 回归原理(九)
    UI Recorder 自动化测试 录制原理(八)
    UI Recorder 自动化测试 整体架构(七)
    UI Recorder 自动化测试 配置项(六)
    UI Recorder 自动化测试 工具栏使用(五)
    UI Recorder 自动化测试 回归测试(四)
    UI Recorder 自动化测试 录制(三)
    UI Recorder 自动化测试工具安装问题疑难杂症解决(二)
    UI Recorder 自动化测试安装教程(一)
  • 原文地址:https://www.cnblogs.com/LuckyGJX/p/8466903.html
Copyright © 2011-2022 走看看