html - 盒子模型 - 个人文章

padding
padding: 10px; 表示上下左右的内边距都是10像素
padding: 0 10px; 表示左右的内边距为10像素
padding: 5px 6px 10px; 5 是上内边距像素 6 是左右内边距像素， 10 是下边距像素。
padding: 4px 5px 6px 10px; 4 是上边距 5右边距 6 是下边距，10 是左边距顺时针旋转但是内边距像素值不可以为负数，负数无效。

margin
margin:是外边距，是一个盒子与另外一个盒子的距离
margin:没有浮动的情况下上下叠加，取大值。有浮动的情况下，两个外边距相加

例如：

 第一个盒子的样式
    .div01 {
     width:300px;
     height:100px;
     background-color:gray;
     margin:20px;
   }

 第二个盒子的样式
   .div02 {
    width:300px;
    height:100px;
    background-color:red;
    margin:100px 0px 0px 20px;
  }

图片描述

如上图所示，理论上上面的margin 20px 和下面的margin 100 应该相加等于120，但是这里注意了，取100（较大的值）作为这2个盒子的距离。

 第一个盒子的样式
    .div01 {
     width:300px;
     height:100px;
     background-color:gray;
     margin:20px;
   }

 第二个盒子的样式
   .div02 {
    width:300px;
    height:100px;
    background-color:red;
    margin:100px 0px 0px 20px;
    float:left; -- 加入浮动
  }

图片描述

如果上图所示 div02加入的浮动 float:left; 外边距不是取大值，而是相加

思考如果margin为负数生效吗？
例如：

   .div01 {
     width:300px;
     height:100px;
     background-color:gray;
     padding:0px;
     margin-bottom:150px; -- 下边距为150px
   }

  .div02 {
    width:300px;
    height:100px;
    background-color:red;
    padding:0px;
    margin-top:-50px; -- 上边距为-50
  }

如图所示 margin为负数是生效的

如何在页面上嵌入图片
html

<link rel="stylesheet" href="css/demo.css" type="text/css" />
</head>
<body>
  <div class="wrap">
    <dl>
       <dt><img src="images/b01.jpg"/></dt>
       <dd>英国伦敦</dd>
    </dl>
     <dl>
       <dt><img src="images/b02.jpg"/></dt>
       <dd>印度海滨</dd>
    </dl>
     <dl>
       <dt><img src="images/b03.jpg"/></dt>
       <dd>世界名车</dd>
    </dl>
     <dl>
       <dt><img src="images/b04.jpg"/></dt>
       <dd>世界新款</dd>
    </dl>
  </div>
</body>

1，首先清除页面的内外间距

*{
    margin:0;
     padding:0;
 }

/*
  1,1000px 是你想设置盒子的宽度 
  2，高度不写是因为图片会撑起高度
  margin: 0 auto; 主要用于图片居中
  浮动元素的父级加上 overflow:hidden 是为了处理内容高度的问题
 */
.wrap{
    width:1000px;
    margin: 0 auto;
    overflow:hidden;
 }

 /* 
  1，通过ps绘图工具测量，图片的宽度为210px
  2，如果你想让内容浮动，就让装东西的容器浮动就可以了，浮动也是为了让内容横向向左排列
  
  其实图片实际的间距是40，但是靠边的那张图片只有20px，所以就
  外间距（左右外间距）20px
  */
 .wrap dl{
    width:210px;
    float:left;
    margin:0 20px;
    
 }

 /*
  用ps测量图片与问题之间的距离 
  */
 .wrap dt {
    margin-bottom:19px;
 }

 /*
   1，文字的行高是固定的，不管你是如何的放大字体，测量出来的
   都是一样的
   2，吸管吸取文字颜色的时候，一定要挑选文字颜色最深的那个
   3，文字类型的样式是可以继承的 
  */
.wrap dl dd {
    font-size:12px;
    line-height:22px;
    color:#525252;
 }

在浮动元素的父标签设置overflow:hidden; 就可以看到高度，虽然没有设置高度，如下图：

图片描述

页面嵌入图片和文字的整体效果图：

图片描述

盒子模型

吴凌云

引用和评论

Vue 生命周期

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具