盒子模型

BigTomato 发布于2019-08-29 13:53 / 3200人阅读

摘要：是外边距，是一个盒子与另外一个盒子的距离没有浮动的情况下上下叠加，取大值。有浮动的情况下，两个外边距相加例如第一个盒子的样式第二个盒子的样式如上图所示，理论上上面的和下面的应该相加等于，但是这里注意了，取较大的值作为这个盒子的距离。

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

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; 就可以看到高度，虽然没有设置高度，如下图：

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

GPU云服务器云服务器盒子模型比价盒子盒子比价电视盒子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112773.html

盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

xiangzhihong 2019-08-30 12:49 评论0 收藏0
盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

myshell 2019-08-01 15:05 评论0 收藏0
小白都能读懂的 Cell 模型：一个被施展了魔法的盒子

摘要：为了让大家更好的理解公链的模型，我们为大家带来两期小白都能读懂的模型文章。该篇是小白都能读懂的模型系列文章之一秘猿科技区块链小课堂第期只能存放数字的盒子我们先从区块链鼻祖说起。设计一条好的底层公链，必须从技术角度、经济角度、以及共识角度进行全方位的考量。我们花了 4 期（第 16/17/18/19 期）向大家解释了底层公链 CKB 技术实现中的关键点之一：Cell 模型。为了让大家更...

syoya 2019-06-27 19:20 评论0 收藏0
【前端】CSS盒子模型

摘要：盒子模型及更早的版本使用的是盒模型。盒子模型组成为。盒子模型盒子模型的盒子模型的意味着盒子的和的大小是上述属性相加的最大总和。标准盒子模型盒子模型的盒子模型的盒子模型大小计算就简单多，设置的和就是内容大小。盒子模型 IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。盒子模型组成为：margin、border、padding、...

Keagan 2019-08-30 15:55 评论0 收藏0
「前端早读君」css进阶之彻底理解视觉格式化模型

摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。今日励志不论你在什么时候开始，重要的是开始之后不要停止。前言对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...

Eidesen 2019-08-23 14:25 评论0 收藏0