response.text不显示body内容_不知道margin怎么用？看这一篇就够！

点击蓝字

关注我们

定义与用法：

margin 属性可以用来设置元素的外边距。所谓的外边距就是围绕在元素边框的空白区域，设置外边距会在元素外创建额外的“空白”。同时，margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

margin标记可以带一个、二个、三个、四个参数，各有不同的含义。

• 如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px

• 如果规定两个值，比如 div {margin: 50px 10px} - 上下外边距是 50px，左右外边距是 10 px。

• 如果规定三个值，比如 div {margin: 50px 10px 20px}- 上外边距是 50 px，而左右外边距是 10 px，下外边距是 20 px。

• 如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左(顺时针)。  &nbsp&nbspmargin的基本的定义和用法就说到这里了，接下来我们一起来探讨一下margin为负值时的用法。  &nbsp&nbsp通常来说margin为正值时，我们很清楚其布局形式，即在border边界线处再往外扩展指定长短。可margin为负又表示什么呢，表示始于border边界线处并向内扩展指定长短。

应用：

• 水平垂直居中  如果要居中的元素的宽/高是不变的或者说是确定的，比如width/height=100px，那么设置absolute的top/left=50%，然后margin-left/margin-top=-50px即可。  　如果要居中的元素的宽/高是不确定的，这时margin负值就不能使用具体的px了，可以使用百分比。但由于margin的百分比都是相对于包含块的宽度，所以这里限制了只能设置宽高相同的居中元素。包含块的宽度如何获得呢？利用absolute的包裹性，在需要居中的元素外面套一个空的

  元素即可。 示例代码：

      .box{    position:relative;    width: 200px;    height: 200px;    background-color: lightgreen;    border: 2px solid black;}.out{    position: absolute;    left: 50%;    top: 50%;}    .in{    height: 100px;    width: 100px;    background-color: pink;    margin-left: -50%;    margin-top: -50%;} 

   

       

  测试内容

       

     

  效果：  

  

  • 三栏自适应布局  中间的主体使用双层标签，外层

    宽度100%显示，并且浮动，内层

    为真正的主体内容，含有左右210px的margin值。左栏和右栏都采用margin负值。左栏左浮动，margin-left为-100%，正好使左栏位于页面左侧。右栏左浮动，大小为其本身的宽度200px。示例代码：

     html,body{    height: 100%;}body{    margin: 0;}.main{    width: 100%;    height: 100%;    float: left;}.main .in{    margin: 0 210px;    background-color: pink;    height: 100%;}.right{    height: 100%;    width: 200px;    float: left;    background-color: blue;}.left{    height: 100%;    width: 200px;    float: left;    background-color: lightgreen;}.left{    margin-left: -100%;}.right{    margin-left: -200px;}

    效果：  

    

    WINTER

    

    扫码关注我们

    公众号｜哥伦布日记

    唔好错过喇，快啲关注呀！