div第二课 margin外边框px大小 border边框的设置

最新推荐文章于 2022-04-13 08:44:53 发布

weixin_34400525

最新推荐文章于 2022-04-13 08:44:53 发布

阅读量357

点赞数

文章标签： xhtml python

原文链接：https://my.oschina.net/u/2532163/blog/635330

版权

2019独角兽企业重金招聘Python工程师标准>>>

内容(content)、内边距(padding)、边框(border)和外边距(margin)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>盒模型</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
   #container{
       width: 1002px;
       height: 800px;
       background: blue;
   }
   #header{
       height: 100px;
       background: green;
   }
   #main{
       height: 500px;
       background: purple;
   }
   #lside{
       width: 700px;
       background: pink;
   }

   .four{
       width: 300px;
       height: 200px;
       background: black;
       float: left;

//margin设置外边框大小

        margin: 10px;
   }

   #rside{
       width: 302px;
       background: red;
   }
   #footer{
       height: 200px;
   }
</style>
</head>
    <body>
       <div id="container">
       <div id="header"></div>
       <div id="main">
       <div id="lside">
           <div></div>
           <div></div>
           <div></div>
           <div></div>
       </div>
       <div id="rside"></div>
       </div>
       <div id="footer"></div>

       </div>
    </body>
</html>

border边框设置：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
   #container{
       width: 800px;
       background: black;
   }
   #header{
       width: 300px;
       height: 300px;
       background: blue;
       border: 20px rdige green;
       /*border 边框 solid 实线背景绿色*/
   }
</style>
</head>
    <body>
       <div id="container">
           border三要素宽，形状，颜色，画一个三角形
           <div id="header"></div>
           <div id="main"></div>
           <div id="footer"></div>
       </div>
    </body>
</html>