zoukankan      html  css  js  c++  java
  • 盒子模型

    盒子模型具有border、margin、padding以及填充的内容的属性,设置这些属性的宽高和粗细和一个标签本身的宽高是没有关系的,即当一个div的高度是200px宽度是200px,设置border的width为5px,这个div的border以内的区域的宽高保持不变,设置一个div的margin和padding那么这个div的border以内的区域会变大。

    border:

    border-style:边框的样式

    border-color:边框的颜色

    border-width:边框的粗细

    margin外边距:margin-top margin-right margin-left margin-bottom;当margin设为负数时,会使被设为负数的块向相反的方向移动,甚至覆盖在另外的块上。当块之间是父子关系时,通过设置子块的margin参数为负数,可以将子块从父块中“分离”出来。

    padding内边距:padding-top padding-right padding-left padding-bottom

    html源码:

    <div id="d1">
    <div id="d2">border:border-style:边框的样式
    </div>
    </div>

    css:

    * {
    margin:0px;
    padding:0px;
    }
    #d1 {
    200px;
    height:200px;
    background-color:#aaa3a3;
    }
    #d2 {
    100px;
    height:100px;
    background-color:#6885f7;
    }

    给d1设置border、margin和padding后

    #d1 {
    200px;
    height:200px;
    background-color:#aaa3a3;
    margin-top:10px;
    margin-left:10px;
    border-style:solid;
    border-color:#ff0000;
    border-5px;
    padding-top:20px;
    padding-left:20px;
    }

    盒子的浮动使用:

    float:left|right|none

    清除浮动:

    clear:both|left|right

    盒子的定位:

    相对定位和绝对定位以及使用fixed进行定位。

    position:absolute|relative|fixed。

  • 相关阅读:
    今日SGU 5.2
    奇异值分解(SVD)小结
    计蒜客16495 Truefriend(fwt)
    计蒜客16492 building(二分线段树/分块)
    hihocoder 1323 回文字符串(字符串+dp)
    hihocoder 1320 压缩字符串(字符串+dp)
    hdu6121 build a tree(树)
    hdu6103 Kirinriki(trick+字符串)
    hdu6097 Mindis(几何)
    hdu 6057 Kanade's convolution(子集卷积)
  • 原文地址:https://www.cnblogs.com/you-are-the-one/p/4854790.html
Copyright © 2011-2022 走看看