zoukankan      html  css  js  c++  java
  • css定位

    方法一:最外层加上<div class="a" style=overflow:hidden;/* 同级元素有浮动,父级元素清除浮动*/
    方法二:在最后面加<div class="b" style="clean:both">
    方法三:在css中写样式
    .clear::after{
    content:' ';
    display:block;
    clear:both;
    }里层有浮动外层就要清除浮动

    img元素里加上浮动,就会与文字占一行


    .aa{
    display: block;/* 块级元素显示div */
    display: inline;/* 内联元素显示,可以改成行内元素,行内元素是无法显示宽和高的 */
    display: inline-block;/* 行内块元素,可以在一行内写,也可以设置宽和高*/
    display: flex;/* 弹性盒子,当元素的宽度超过预定的宽度时自动改成合适的宽度 ,平均分配*/
    display: none;/* 元素隐藏 */
    }

    {内容不跟随滚动天动而动

    position:fixed;

    top:0;

    left:0;

    }

    css写出的下拉列表(定位)

    position:static(默认,没有定位);fixed(绝对定位,相对浏览器)

    relative(相对定位,相对正常位置,在原先在的位置上);absolute(绝对定位,相对不是static的父级元素定位,只要写absolute就在他的父级上加上relative)

    fixed和absolute是不占据空间的,fixed不设置top,是相对于原来位置显示

    top:  left:  right:  bottom:

    有定位的时候才能用,position的fixed,absolute,relative三个值可以用//

    悬浮可以用来写导航条的下拉列表

    <ul>
    <li class="pr">技术文章
    <div class="down1">
    <ul>
    <li>头条</li>
    <li>新闻</li>
    </ul>
    </div>
    </li>
    </ul>

    .down1{
    position: absolute;
    border: rgb(34,246,19) 1px solid;
    background-color: #00FFFF;
    top: 40px;
    display: none;//隐藏

    }
    .pr{
    position: relative;
    height: 40px;
    line-height: 40px;

    }
    .pr:hover .down1{
    display: block;/* 鼠标移入pr时会显示down1菜单 */
    }

  • 相关阅读:
    程序输出小学四则运算表达式,支持真分数四则运算
    自我介绍
    一维数组求最大子数组的和(首位相邻32位)
    一维数组子数组求最大和
    第三周进度条
    第三周总结PSP日志文件
    四则运算<3>单元测试
    四则运算<3>
    30道四则运算<2>单元测试
    构建之法阅读笔记02
  • 原文地址:https://www.cnblogs.com/111wdh/p/12726529.html
Copyright © 2011-2022 走看看