zoukankan      html  css  js  c++  java
  • Some css position box description

    1. padding:

    What would happen if you used either ems or percentages for the padding values?
    The two units have slightly different effects: the em unit scales the padding according
    to the size of the font of the content, while the percentage unit scales
    the padding (and margin) according to the width or height of the block that contains the element.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Box Model Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body
            {
                background-color: #808080;
                color: black;
            }
            h1, h4
            {
                background-color: #c0c0c0;
                color: black;
                padding: 10%;
            }
            
            .main-div 
            {
                 600px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="main-div">
        
        <h1>
            MMMMMM</h1>
        <h4>
            MMMMMM</h4>
        </div>
    </body>
    </html>
    

    the above html fragment shows H1 and H4 has 10% padding, their parent container DIV's width is 600px so their padding will be 60px.

    If change the H1 H4 css style to  use em like

    h1, h4
            {
                background-color: #c0c0c0;
                color: black;
                padding: 1em;
            }
    

    then in IE browse the H1 padding will be 32px and h4 padding will be 16px.

    2. absolute

    The absolute position will calc by it's parent:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Box Model Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            .big
            {
                font-family: Helvetica, Arial, sans-serif;
                font-size: 2em;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div style="position: absolute; left: 125px; top: 75px;" class="big">
            This is the first line of text being positioned.
            <div style="position: absolute; left: 25px; top: 30px;" class="big">
                This is a second line.
            </div>
        </div>
    </body>
    </html>
    

      

    3. relative

    Relative positioning is always based on the positioned element’s original position on the page.

    In other words, the positioning context of an element that uses relative positioning is provided by its default position.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Box Model Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            .big
            {
                font-family: Helvetica, Arial, sans-serif;
                font-size: large;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div style="position: absolute; left: 125px; top: 75px;" class="big">
            This is the first line of text being positioned.
            <div style="position: absolute; left: 25px; top: 30px;">
                This is <span style="position: relative; left: 10px; top: 30px;">an example of</span>
                a second line.
            </div>
        </div>
    </body>
    </html>
    

      

  • 相关阅读:
    Qomolangma实现篇(二):命名空间和别名子系统的实现
    关于Borland's IDE:发生了就发生了吧!
    Qomolangma实现篇(六):Qomo的OOP框架的实现技术
    Qomolangma实现篇(八):Qomo中的AOP框架
    经典的《JavaScript 权威指南》中的“对象”不经典
    Qomo OpenProject beta1 发布!
    弹出当前索引号案例
    tab栏切换效果案例
    [USACO18DEC]Sort It Out P
    [ABC163F]path pass i
  • 原文地址:https://www.cnblogs.com/dragonstreak_1/p/2603014.html
Copyright © 2011-2022 走看看