zoukankan html css js c++ java

css盒模型

盒子

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css盒子</title>
    <style type="text/css">
        #box1{
        width:200px;
        height:200px;
        border:10px solid #FFFF33;
        background:#00AA88;
        padding-top:10px;
        padding-right:20px;
        padding-bttom:30px;
        padding-left:40px;
        }
        
</style>
  </head>
  <body>
    <div id="box1">我是一个盒子</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css盒子</title>
    <style type="text/css">
        #box1{
        width:200px;
        height:200px;
        border:10px solid #FFFF33;
        background:#00AA88;
       /* padding-top:10px;
        padding-right:20px;
        padding-bttom:30px;
        padding-left:40px;*/
        padding:10px;/*上下左右内边距都是10px*/
        padding:10px 20px;/*上下边距10，左右边距20*/
        padding:10px,20px,30px,40px;/*上右下左内边距*/    
        }   
</style>
  </head>
  <body>
    <div id="box1">我是一个盒子</div>
  </body>
</html>

外边距设置方法：
margin:

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css盒子</title>
    <style type="text/css">
        #box1{
        width:200px;
        height:200px;
        border:10px solid #FFFF33;
        background:#00AA88;
       /* padding-top:10px;
        padding-right:20px;
        padding-bttom:30px;
        padding-left:40px;*/
                padding:10px;/*上下左右内边距都是10px*/
                padding:10px 20px;/*上下边距10，左右边距20*/
                padding:10px,20px,30px,40px;/*上右下左内边距*/   
        }   
                body{
                border:1px solid #99FF33;
                margin:0px;
                padding:0px;}
                p{
                background:#FFC8B4;
                margin:0px;}
</style>
  </head>
  <body>
    <div id="box1">
    我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子我是一个盒子</div>
    <p>我是一个段落</p>
  </body>
</html>

查看全文

相关阅读:
电商数据分析模型
 电商系统中的商品模型的分析与设计
 java枚举使用详解
 运用四色建模法进行领域分析
 UML,Powerdesigner 使用方法
 powerdsigner Association Multiplicity
UML的类图、时序图表示方法以及惯例
 面向对象分析与设计—四色原型模式（彩色建模、领域无关模型）（概念版）
知识读书笔记
 知识型读书笔记

原文地址：https://www.cnblogs.com/Yimi/p/5868375.html