zoukankan      html  css  js  c++  java
  • 0313-浮动、兼容问题、盒子模型、定位

    问题:

    1.定位可以设置右下实现效果(margin和padding不可以)

    2.拼错了class!下午又拼错了div!找错误还找了很长时间,不应该!

    3.设置一个浮动div中的两个上下相邻的div时,给下div设置了padding-top,导致上div在位置上被覆盖,hover没有效果。给下div加position:relative;top:xx;实现(也可上下加position后通过z-iindex实现)。为什么会被覆盖?

    4.兼容问题:将一个空的子div设置背景图片时只能设置具体宽高才能显示??但是效果也没问题??

    5.设置一个大div中三个子div的浮动,三个子div平分宽度,再加边框后会错位,可留出边框的宽度或者设置box-sizing:border-box解决。

    内容:

      overflow:hidden  //隐藏超出的内容

      display:block(块)  inline(行内) inline-block(行内块)  //根据情况对元素进行转换

      cursor:pointer  //变小手(a自动变)

      z-index:x  //分层,x越大越在上层。需要设置position才能生效。

    浮动:float

      要浮动的标签用div包起来,给div设宽高,可以不用clear:both;

    兼容:

      将最外层的标签设具体宽高,里面用百分比。

    盒子模型:

      从内到外:内容、内边距、边框、外边距。

      box-sizing:border-box  //指定宽高,自适应边框、内边距、内容。可直接*{box-sizing:border-box};

    定位:position

      fixed:绝对定位  //相对窗口定位:拖动滚动条时位置不变,不占位

      absolute:绝对定位  //相对于最近的有position属性(一般是relative)的父标签定位,没有的话就是body。不占位

      relative:相对定位  //相对于自己原来的位置,有自身位置,用来微调。占位

      代码示例:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>定位练习</title>
    <style>
        /*外层大的div*/
        #a,#z{
            width: 600px;
            height: 200px;
            border: 1px solid red;
            margin-bottom: 10px;
            position: relative;
        }
        /*给小div设置宽高*/
        #b,#c,#x,#y{
            width:100px;
            height: 40px;
            border: 1px solid red;
        }
        /*根据a设置b的位置*/
        #b{
            position:absolute;
            top: 158px;
            left: 498px;
        }
        /*根据a设置c的位置*/
        #c{
            position:absolute;
            top: 300px;
            left: 400px;
            background: #D7696B;
            z-index: 3;/*对与x位置重复的c设置层级,在上面显示*/
        }
        /*根据z设置x的位置*/
        #x{
            position:absolute;
            top: 70px;
            left: 350px;
            background: #F3994B;
            z-index: 1;    /*对与c位置重复的x设置层级,在下面显示*/
        }
        /*根据z设置y的位置*/
        #y{
            position:absolute;
            top: 158px;
            left: 650px;
        }
    </style>
    </head>
    
    <body>
        <div id="a">a
            <div id="b">b</div>
            <div id="c">c</div>
        </div>
        <div id="z">z
            <div id="x">x</div>
            <div id="y">y</div>
        </div>
    </body>
    </html>
    position练习

     

  • 相关阅读:
    夺命雷公狗---node.js---2node.js中的npm的常用命令
    nginx安装目录
    linux下安装nginx
    mui实现推送功能
    SpringBoot WebSocket实现
    发送短信验证码
    Vue在HTML页面中的脚手架
    SpringBoot邮件发送功能
    毕业设计功能
    毕业设计数据库
  • 原文地址:https://www.cnblogs.com/flypea93/p/8562953.html
Copyright © 2011-2022 走看看