盒模型

盒模型需要从两个方面来理解
1，理解单独一个盒子的内部结构（往往是padding）
2,  理解多个盒子之间的相互关系  (往往是margin )
每个元素都看成一个盒子，盒子模型是由，content（内容） + padding (内边距） +margin (外边距） + border（边框）
所有的元素都可视为一个盒子

 

content（内容）
内容，可以是文本或图片  ，
内容区是盒子模型必备的组成部分，其他三部分都是可选的
内容区，有三个属性：width  height   和 overflow .      width 和 height 是针对内容的 不包括padding部分

padding (内边距）又称"补白"
内容区 与 边框之间的距离，可看成是内容区的背景区域

margin (外边距）
两个盒子之间的距离，可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离

border（边框）

块元素可以设置 宽 高，行内元素不可以设置宽高，行内元素如需设置宽高 可以使用display属性 把行内元素 转换为块元素

 

padding  局部样式
padding-top :像素值
padding-right :像素值
padding-botton:像素值
padding-left :像素值

padding  简写  （有4种，常用的有三种）
padding :像素值；                                                 上下左右
padding :像素值1  像素值2；                                 上下  左右；
padding :像素值1  像素值2  像素值3  像素值4；   上   下   左    右          (顺时针)

<style>
    div{
      background-color: #FFDEAD;
      border: solid red 2px;
      margin:40px;
     display: inline-block; 
     /* 让文本在一个元素居中 可以使用padding来实现 */
     padding: 40px 80px;
    }

  </style>
 
  <div>一个网站</div>

 

 


margin   局部样式
margin-top :像素值
margin-right :像素值
margin-botton:像素值
margin-left :像素值

margin  简写  （有4种，常用的有三种）
margin :像素值；                                                 上下左右
margin:像素值1  像素值2；                                 上下  左右；
margin :像素值1  像素值2  像素值3  像素值4；   上   下   左    右          (顺时针)

当既有父元素，也有兄弟元素时，该元素会先看四个方向有没有兄弟元素存在，
如果该方向有兄弟元素 ，则这个方向的margin就是相对于兄弟元素而言的
如果该方向没有兄弟元素，则这个方向的margin就是相对于父元素而言


有兄弟

<style>
    #father{
      display: inline-block;
      border:solid red 2px;
    }

    #son{
      display: inline-block;
      padding: 20px;
      margin-top: 20px;
      margin-bottom: 60px;
      margin-right: 40px;
      margin-left: 80px;
    }

    .brother{
      height: 50px;
      background-color: blue;
    }
  </style>
 

  <div id="father">
    <div class="brother"></div>
    <div id="son">我的网站</div>
    <div class="brother"></div>
  </div>

 

 


只有父元素，无兄弟元素时

 <style>
    #father{
      display: inline-block;
      border:solid red 2px;
    }

    #son{
      display: inline-block;
      padding: 20px;
      margin-top: 20px;
      margin-bottom: 60px;
      margin-right: 40px;
      margin-left: 80px;
    }
  </style>

  <div id="father">
     <div id="son">我的网站</div>
  </div>

 

 



margin简写


 <style>
    div{
      background-color: #FFDEAD;
      border: solid red 2px;
      margin:40px 80px;
     display: inline-block; 

     padding:20px;
    }

  </style>
 
</head>
<body>
  <div>一个网站</div>

 

 


padding 和 margin 的区别是在于
padding体现的是元素的 "内部结构"
margin体现的是元素之间的相互关系


















posted @ 2021-01-06 18:52  沁莹  阅读(104)  评论(0)    收藏  举报