zoukankan      html  css  js  c++  java
  • css 浮动问题 display显示 和 光标设置cursor

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>浮动 和 显示方式</title>
    <style>
    h1{
    text-align: center;
    }
    p{
    background: pink;
    }
    .a{
    border: 1px solid red;
    height: 230px;
    }
    .a>img{
    height: 200px;
    200px;
    }
    span{
    position: relative;
    top: 20px;
    left: -100px;
    /*cursor: pointer;/*小手显示*/
    cursor: wait;
    }
    </style>
    </head>
    <body>


    <h1>一.普通流定位</h1>
    <p>1.普通流,就是文档流</p>
    <p>2.块级元素 独占一行 可设置高宽</p>
    <p>3.行内元素</p>


    <h1>二.浮动定位概念</h1>
    <p> 1.脱离文档流 ,在普通流之外<br>
    2.不会占据页面空间<br>
    3.浮动元素放置在包含框的左边 或者右边<br>
    4.浮动元素依旧在包含框之内<br>
    5.可以左右移动,不会上下浮动,直到碰见包含框的边缘 或者另一个已经浮动的元素框为止。
    </p>


    <h1>三.浮动定位 特点</h1>
    <p>
    1.浮动元素不会超过其父元素的边缘<br />
    2.不会重叠<br />
    3.只能左右浮动,不能上下动。<br />
    4.非块级元素移动,可以设置高宽 。利用这个可以让1.块级元素在同一行内显示2.修改行内元素高宽。
    </p>


    <h1>四:浮动属性</h1>
    <p>
    1.float:none left right 属性和取值 浮动的使用。<br />
    2.clean:left right both 属性和取值 清除浮动带来的影响。
    </p>
    <p>
    子级元素浮动,给父层元素带来的影响<br />
    1.元素内所有子级都浮动 ,该元素高度为0.<br />
    解决方案<br />
    1.设置父级元素高度<br />
    2.设置父元素的 overflow:hidden;<br />
    3.在父级元素中,增加一个空元素,添加clear:both
    </p>


    <h1>五.显示方式 display</h1>
    <p>1.属性和取值 display:none<br />
    2.none生成元素没有框,不占据页面空间.隐藏。<br />
    3.block 变成块级元素显示<br />
    4.inline 变成行内元素显示<br />
    5.inline-block : 行内块,所有元素在一行显示,可设置高宽.
    </p>


    <p>
    2.适用场合<br />
    1.控制元素的现实和隐藏<br />
    2.将行内元素变成块级元素 或者行内块。修改行内元素的高宽。
    </p>


    <h1>六.光标设置 属性 cursor 取值default pointer crosshair text wait</h1>
    <p>
    1.cursor:pointer:小手 <br />
    2.cursor:crossshair + 符号<br />
    3.cursor:text I 符号<br />
    4.cursor:wait 等待 沙漏符号
    </p>


    <div class="a">
    <img src="../img/rose.jpg" />
    <span>1</span>
    <img src="../img/rose.jpg" />
    <span>1</span>
    <img src="../img/rose.jpg" />
    <span>1</span>
    </div>
    </body>
    </html>

  • 相关阅读:
    BZOJ_3171_[Tjoi2013]循环格_最小费用最大流
    BZOJ_1150_[CTSC2007]数据备份Backup_堆+贪心
    BZOJ_1576_[Usaco2009 Jan]安全路经Travel&&BZOJ_3694_最短路_树链剖分+线段树
    BZOJ_4802_欧拉函数_MR+pollard rho+欧拉函数
    BZOJ_3667_Rabin-Miller算法_Mille_Rabin+Pollard rho
    BZOJ_1584_[Usaco2009 Mar]Cleaning Up 打扫卫生_DP
    BZOJ_1229_[USACO2008 Nov]toy 玩具_三分+贪心
    BZOJ_2160_拉拉队排练_manacher
    [转载]Linux软件包及dpkgapt等方法
    服务器基础认知杂谈及一小点运维相关
  • 原文地址:https://www.cnblogs.com/ZXF6/p/10421136.html
Copyright © 2011-2022 走看看