盒子模型（重）

盒模型-盒子模型-框模型（box model）

必须知道元素的形状和大小

css将所有的元素设置为一个矩形的盒子

对页面的布局就等于将盒子拜访到不同的位置

 

每一个盒子都有几个部分组成：

1.内容区（content）

2.边框（border）

3.内边距（padding）

4.外边距（margin）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .box1{
         /*内容区：元素的所有的子元素和都在内容区中排列，
         width:设置内容区大小
         height:设置内容区的高度
         */
         width: 200px;
         height: 200px;
         background-color: lawngreen;
/*边框：边框属于合资边框，边框了里面属于盒子内部，出了边框都是盒子的外部
边框的宽度：border-width;
边框的颜色：border-color;
样式：border-style ; 
!边框的大小会影响盒子的大小!
*/

border-width: 100px;
border-color: blue;
border-style: solid;
     }
    </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

 

posted @ 2021-02-14 20:34  俗气小博  阅读(39)  评论(0)    收藏  举报