zoukankan      html  css  js  c++  java
  • 一分钟让你明白CSS中的盒模型

               想必初学者对CSS盒模型总是很困惑吧。下面一分钟让你彻底明白盒模型:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     2 "http://www.w3.org/TR/html4/strict.dtd">
     3 
     4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     5     <head>
     6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     7         <title>3</title>
    10         <style type="text/css">
    11             .simple{
    12                 width: 500px;
    13                 margin: 20px auto;
    14                 border-style:solid;
    15                 border-color: #0073CC;
    16                 background-color: red;
    17             }
    18             .fancy{
    19                 width: 500px;
    20                 margin: 20px auto;
    21                 padding:50px;
    22                 border-width: 10px;
    23                 border-style:solid;
    24                 border-color: #0068C9;
    25                 background-color: #10B722;
    26             }
    27         </style>
    28     </head>
    29     <body>
    30         <div class="simple">
    31             我小一些
    32         </div>
    33         <div class="fancy">
    34             我大一些
    35         </div>
    36     </body>
    37 </html>

      下面我们来看显示效果:

    再看FireFox的盒模型:

    下面我们结合起来看:

    看完这几张图之后,想必已经明白了吧。width,heigh代表内容(content)的长度和高度,padding是content与border的的距离.background-color的作用范围是 content+padding

  • 相关阅读:
    VS2013 连接 MySQL
    2014年下半年的目标
    BI开发之——Mdx基础语法(2)(转至指尖流淌)
    BI开发之——Mdx基础语法(转至指尖流淌)
    数据仓库构建
    数据仓库的定义
    2014年计划:
    [转载]商业智能的三个层次
    BI入门基础知识-1
    ASP.NET MVC4 异常拦截
  • 原文地址:https://www.cnblogs.com/ArtsCrafts/p/box.html
Copyright © 2011-2022 走看看