zoukankan      html  css  js  c++  java
  • 10.css学习-盒子模型

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">

    /*
    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。


    盒子模型主要是用于操作内边距(padding)与外边距(margin)

    */
    div{
    border-style:solid;
    100px;
    height:100px;
    /* 内边距 */
    padding-left:10px;
    padding-top:20px;
    }

    .one{
    margin-bottom:30px;
    }


    .two{
    margin-left:700px;
    }

    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>
    <div class="one">
    这个是一个div
    </div>

    <div class="two">
    这个是二个div
    </div>
    </body>
    </html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    /*
    css的定位:

    相对定位: 相对定位是相对于元素原本的位置进行移动的。

    使用方式: position:relative;


    绝对定位: 绝对定位是相对于整个页面而言。
    position:absolute;
    top:200px;
    left:380px;

    固定定位:
    position:fixed; /* 固定定位: 固定定位是相对于整个浏览器而已的。
    top:380px;
    left:1000px;


    */
    div{
    border-style:solid;
    100px;
    height:100px;
    }

    .one{
    background-color:#F00;
    }

    .two{
    background-color:#0F0;
    position:relative; /* 相对定位,对于当前位置 */
    top:10px;
    left:10px;

    }

    .three{
    background-color:#00F;
    }


    #ad{
    400px;
    height:200px;
    border-style:solid;
    font-size:24px;
    color:#F00;
    position:absolute; /* 绝对定位,相对于一个页面 的左上角而言的。 */
    top:200px;
    left:380px;
    }

    #ad2{
    position:fixed; /* 固定定位: 固定定位是相对于整个浏览器而已的。 */
    top:380px;
    left:1000px;
    }


    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body>

    <div class="one"> one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div id="ad">
    <marquee scrollamount="30">广告</marquee>
    </div>
    目前正在学习css定位.... 目前正在学习css定位.... 
    <div id="ad2">
    <img src="../2.png"/>
    </div>

    </body>
    </html>

  • 相关阅读:
    微信小程序路由跳转方式
    事务的隔离级别 乐观锁和悲观锁 f查询 q查询
    手机短信验证
    用git来操作项目
    git使用
    redis数据库 Python使用redis
    DRF框架:接口 ,restfui接口规范,基于restful规范的原生Django接口,Postman接口工具
    vue初识
    Win10玩游戏时听歌音量忽大忽小
    ASP.NET Core 2.0 WebApi全局配置及日志
  • 原文地址:https://www.cnblogs.com/transcendent/p/4951131.html
Copyright © 2011-2022 走看看