盒子模型

盒子边框(border)

border : border-width || border-style || border-color
属性 作用
border-width 定义边框粗细,单位是px
border-style 边框的样式
border-color 边框颜色

边框写法总结

上边框 下边框 左边框 右边框
border-top-style:样式; border-bottom-style:样式; border-left-style:样式; border-right-style:样式;
border-top-width:宽度; border- bottom-width:宽度; border-left-width:宽度; border-right-width:宽度;
border-top-color:颜色; border- bottom-color:颜色; border-left-color:颜色; border-right-color:颜色;
border-top:宽度 样式 颜色; border-bottom:宽度 样式 颜色; border-left:宽度 样式 颜色; border-right:宽度 样式 颜色;
  • 边框合并
border-collapse:collapse;

内边距(padding)

  • padding属性用于设置内边距。 是指 边框与内容之间的距离。
属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
  • 盒子会变大

简写

值的个数 表达意思
1个值 padding:上下左右内边距;
2个值 padding: 上下内边距 左右内边距 ;
3个值 padding:上内边距 左右内边距 下内边距;
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ;

内盒尺寸计算(元素实际大小)

  • 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
  • Element Width = content width + padding + border
  • Element Height = content height + padding + border

内边距产生的问题

  • 会撑大原来的盒子
    • 通过给设置了宽高的盒子,减去相应的内边距的值,维持盒子原有的大小
  • 如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。

外边距(margin)

  • margin属性用于设置外边距。 margin就是控制 盒子和盒子之间的距离
属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

margin值的简写 (复合写法)代表意思 跟 padding 完全相同。

块级盒子水平居中

  • 盒子必须指定了宽度(width)
  • 然后就给 左右的外边距都设置为auto
div {
          width:600px;
          height: 500px;
          background-color: skyblue;
          margin: 0 auto;
}

文字居中和盒子居中区别

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就可以了 上下margin都可以 */

插入图片和背景图片区别

  1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
  2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

清除元素的默认内外边距

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

外边距合并

  • 使用margin定义块元素的 垂直外边距 时,可能会出现外边距的合并。
  • 嵌套块元素垂直外边距的合并(塌陷)
    • 可以为父元素定义上边框。
    • 可以为父元素定义上内边距
    • 可以为父元素添加overflow:hidden。

子元素将父元素拉了下来

当为子元素指定margin-top时,父元素也被带下来了

解决这个问题的方式可以为父元素指定 overflow:auto

盒子模型布局稳定性

  • 使用优先级

    width > padding > margin

圆角边框(CSS3)

border-radius:length;

盒子阴影(CSS3)

box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;

results matching " "

No results matching " "

results matching " "

No results matching " "