• div,css常用技术


    1,<div></div>一张图作为背景的用法:

    必须指定width,height,background属性

    .smallCircle{ margin-top: 25px;  margin-left: 40%; 10px;height: 10px; background:url(../images/smallCirlce.png) no-repeat;}

    2,div 让这个DIV居中布局。

    .fdiv{margin: 0 auto; 998px;height: 462px;}

    3,用position: relative 准确定位

    .navbg{height: 100px; position: relative; top: -12px;background: url(../images/nav_02.png) no-repeat center top;}

    .huodong5 .h_title{color: #02b5ba;font-size: 30px; font-weight:bold;position: relative;left: 141px;top:40px;}
    .huodong5 .h_content{ 494px;height: 196px;position: relative;left:341px;top: 100px; line-height:2.5; font-size:12px; letter-spacing: 2px;}
    .huodong5 .h_content .leizhu1{font-size: 14px; color: #02b5ba; font-weight:bold;}

    这里不推荐用relative,如果实在要用,则父元素相对定位,子 元素用position:absoulte;relative会使元素的宽高不变,

    用padding-top取代top,padding-left取代left即可

    position:absoulte默认找上层第一个position是absoulte或者relative没找到则相对于body绝对定位

    4,父元素相对定位,子元素绝对定位,可以使子元素相对于父元素定位,right是相对于父元素的。

    .container
    {
    	position:relative;
    	500px;
    	height: 20px;
    	background-color: antiquewhite;
    	left: 50px;
    }
    .right
    {
    	position:absolute;
    	right:0px;
    	300px;
    	background-color:#b0e0e6;
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    	<div class="right">
    	<p><b>注释:</b>当使用 position 属性进行对齐时,请始终包含 !DOCTYPE 声明!如果省略,则会在 IE 浏览器中产生奇怪的结果。</p>
    	</div>
    </div>
    

    5,inline和block和inline-block

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>极限X播报</title>
    <style>
        span{width:500px; height:50px; background-color: aqua; display: inline-block;}
        .a1{display: block;}
    </style>
    </head>
    <body>
        <span>我是内敛元素1</span><span>..我是内敛元素2</span><a class="a1" href="#">我是超链接</a></sp><div>我是block元素</div>
    </body>
    </html>

    inline元素设置width,height不管用,block元素设置width,height管用,如果不设置则为浏览器最高宽,高为内容高

    把inline元素设置为inline-block后设置宽和高才管用。

    inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

    block 此元素将显示为块级元素,此元素前后会带有换行符。 

  • 相关阅读:
    创建一个简单的vue.js项目
    安装VM
    安装postgreSQL
    读取pgsql扫描失败
    adb install 安装apk时报错Failure [INSTALL_FAILED_TEST_ONLY]解决方法
    「工具分享」Checker Script for Linux
    「V 曲闲谈」《万物与我同归于寂》——终与始
    Note / Solution Set 「Binomial Sum」两道例题
    Solution Set 「NOIP Simu.」20221014
    Solution Set 「NOIP Simu.」20221024
  • 原文地址:https://www.cnblogs.com/as3lib/p/4511673.html
Copyright © 2020-2023  润新知