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

     1 <!--
     2     盒子模型
     3         <div></div>    区分(块)
     4         div属于一个大盒子,可以将h1至h6,p这些标签包进去,不能相反去做。
     5         <div>
     6             <h2></h2>
     7             <ul><li></li></ul>
     8             <p></p>
     9             <dl></dl>
    10         </div>    
    11     边框属性:
    12         类型:border-style
    13            颜色:border-color
    14         粗细:border-width<br
    15     边框属性的简写:
    16         boreder边框
    17         border-top:顶部边框
    18         border-right:右边框
    19         border-bottom:底边框
    20         border-left:左边框
    21         border:1px solid #fc0;
    22     如果想让一个DIV(大盒子)在浏览器里水平居中显示,那么给这个DIV加margin:0 auto;
    23     div本身不带任何属性。
    24     当前div宽度是980px,边框是1px,那么这个div的总宽度是982
    25     如果我的div宽度就必须固定为980px,但是又加1px的边框,那么div宽度就应该写成978px
    26     
    27     大盒子总宽度=第一个盒子宽+间距(第一个到第二个之间的距离)+第二个盒子宽度+间距+第三个盒子宽度+左右的边框。
    28      大盒子总高度=第一个盒子高度+间距(第一个到第二个之间的距离)+第二个盒子高度+间距+第三个盒子高度+上下的边框
    29 -->
    30 
    31 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    32 <html xmlns="http://www.w3.org/1999/xhtml">
    33 <head>
    34 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    35 <title>盒子模型</title>
    36 <style type="text/css">
    37     div{width:300px;height:200px;border:1px solid #A5CDEE;text-align:center;line-height:200px;margin:0 auto;}
    38     .two{border:1px solid red;}
    39 </style>
    40 </head>
    41 
    42 <body>
    43     <div class="one">我是一个盒子,我是大banner</div>
    44     <p>我是一个段落</p>
    45     <div class="two">我是一个盒子,我是大banner</div>
    46 </body>
    47 </html>
  • 相关阅读:
    降低大气分
    99999
    88888
    77777
    HandlerThread实现原理
    Android 内存泄漏总结
    Handler实现机制,同步屏障,IdleHandler
    launcher 配置
    微信小程序 上传图片七牛
    微信小程序 跳转传参数 传对象
  • 原文地址:https://www.cnblogs.com/zhanghonggang/p/3252868.html
Copyright © 2011-2022 走看看