锐客网

  1. 首页 > it技术 > >

盒模型

1. 宽 width 高 height

width:100px; height:100px;

2. 内边距 padding
  1. 分别赋值
padding-top:20px; /*上内边距*/ padding-right:30px; /*右内边距*/ padding-bottom:40px; /*下内边距*/ padding-left:50px; /*左内边距*/

  1. 上右下左, 顺时针
padding:20px 30px 40px 50px; /*上右下左, 顺时针*/

  1. 上与下 左与右
padding:40px 50px; /*上与下 左与右*/

  1. 上 左右 下
padding:40px 20px 50px; /*上 左右 下*/

  1. 四个值相等
padding:20px; /*四个值相等*/

3. 外边距 margin
  1. 分别赋值
margin-top:20px; /*上外边距*/ margin-right:30px; /*右外边距*/ margin-bottom:40px; /*下外边距*/ margin-left:50px; /*左外边距*/

  1. 上右下左, 顺时针
margin:20px 30px 40px 50px; /*上右下左, 顺时针*/

  1. 上与下 左与右
margin:40px 50px; /*上与下 左与右*/

  1. 上 左右 下
margin:40px 20px 50px; /*上 左右 下*/

  1. 四个值相等
margin:20px; /*四个值相等*/

4. 边框 border
  1. 四边框属性相同, 分别赋值
border-width:20px; border-color:deeppink; border-style:solid;

  1. 复合赋值
border-width:10px 20px 30px 40px; border-color:deeppink darkred blueviolet #8b2782; border-style:solid double;

  1. 四边框属性不同
border-top:10px solid yellow; border-right:15px double red; border-bottom:20px dashed red; border-left:26px solid blue;

  1. 四边框属性相同, 统一赋值
border:26px blue double;

  1. 单条边框赋值
border-left:25px solid red;

5. 边距的合并
  1. 上下外边距合并
    • 当有一个盒子下外边距和另一个盒子上外边距相遇的时候，就会发生外边距合并，这个时候，边距取两者中的最大值
    .box1{ background: purple; margin-bottom: 20px; } .box2{ background: green; margin-top: 30px; }

    结果是30px, 解决方法
    /*方法1 */ .box1{ background: purple; margin-bottom: 50px; } /*方法2 */ .box2{ background: green; margin-top: 50px; }

  2. 内外边距合并
    • 内部嵌套的盒子相对父级有上外边距，父级盒子和子级盒子会同时向下移动
    • 当父级盒子和子级盒子都有上外边距的时候，这个时候父级盒子和子级盒子会同时向下移动，值取两者中的最大值
      解决方法:
      1. 给父级盒子 overflow: hidden;
      2. 给父级盒子 border: 1px solid blue;
      3. 给父级盒子 padding-top: 1px;
    【盒模型】实质：就是要把父级盒子和子级盒子隔开
    overflow: hidden超出隐藏

    推荐阅读


    上一篇：困

    下一篇：星期六的一天