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>

查看全文

相关阅读:
django-3-模板变量,过滤器,静态文件的引用
 django-2-路由配置及渲染方式
 用pycharm运行django项目
 django-1-框架介绍
 django-6-数据库配置及模型创建，激活(django模型系统1)
用Sklearn实现聚类算法并用散点图展现效果
 方差、标准差、协方差、协方差相关系数
 ARIMa--时间序列模型
 人工智能--第二天--KNN算法实现
 人工智能--第二天--KNN算法

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