码迷,mamicode.com
首页 > Web开发 > 详细

css盒子模型

时间:2016-09-06 12:12:15      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

/*蓝色-外边距margin */ margin-left: 100px; margin-right: 100px; margin-top: 80px;margin-bottom: 80px;
/*红色-边框border */     border: solid 50px red;
/*黄色-内边距padding */padding-top:70px ; padding-bottom: 70px;padding-left: 100px; padding-right: 100px;
/*莹绿色-内容content */
技术分享

 

技术分享
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
body{
      text-align: center;
}
            #box{
                  padding-top:70px ;
                  padding-bottom: 70px;
                  padding-left: 100px;
                  padding-right: 100px;
                  border: solid 50px red;/*红色-边框border */
                  background: yellow;/*黄色-内边距padding */
                  color: black;
                  margin-left: 100px;
                  margin-right: 100px;
                  margin-top: 80px;
                  margin-bottom: 80px;
            }
            #box_margin{
                  background: blue;/*蓝色-外边距margin */
                  border: solid 1px red;
            }
            p{
                  background: palegreen;/*莹绿色-内容content */
            }
            </style>
      </head>
      <body>
            <div id="box_margin">
                  <div id="box">
            <p>内容content</p>
            </div>
            </div>
 
      </body>
</html>

 

css盒子模型

标签:

原文地址:http://www.cnblogs.com/yatao/p/5844882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!