孙肖宁

盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边...
扫描右侧二维码阅读全文
15
2018/02

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

边框(border)

属性(值)

  • border-top-style边框样式;solid 实线;dotted 点线; dashed 虚线。
  • border-top-color 边框颜色。
  • border-top-width 边框粗细。

注意:边框属性的连写的特点:没有顺序要求,线型为必写项。

  • border-collapse:collapse 边框合并 。<label for="one">账号:<input type="text" id="one"></label>
  • border-top|right|bottom|left 上右下左边框。
  • a标签的部分尽量用margin。

内边距

属性(值)

  • padding-top|right|bottom|left 上右下左内边距。
  • padding连写案例。

    • padding: 20px; 上右下左内边距都是20px。
    • padding: 20px 30px; 上下20px 左右30px。
    • padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40。
    • padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px。

注意:

  • padding没有负值。
  • 内边距影响盒子的宽度。
  • 边框影响盒子的宽度。
  • 盒子的宽度=定义的宽度+边框宽度+左右内边距。
  • 继承的盒子一般不会被撑大:包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。
  • 盒子的撑开与撑破,有高度会被撑破,没有高度会被撑开。

外边距

属性(值)

  • margin-top|right|bottom|left 上右下左外边距。
  • margin连写案例。

    • margin: 20px; 上右下左内边距都是20px。
    • margin: 20px 30px; 上下20px 左右30px。
    • margin: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40。
    • margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px。

**注意:

  • 垂直方向外边距合并**

两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。

  • 嵌套的盒子外边距塌陷

解决方法: 1 给父盒子设置边框,2 给父盒子overflow:hidden; (推荐使用)。

注意:

  • 行内元素可以定义左右的内外边距,上下会被忽略掉,并且行内块可以定义内外边距。
  • 行内块可以定义内外边距。
  • 浏览器默认文字大小16px。

盒子稳定性

  • 只给宽高的盒子(宽/高度剩余法)最稳定。
  • 给padding的盒子其次。
  • 给margin的盒子一般。

盒子的隐藏问题

  • overflow:hidden;隐藏盒子超出的部分。
  • display: none;隐藏盒子,而且不占位置。(用的最多)
  • visibility: hidden; 隐藏盒子,而且占位置。
  • opacity: 0;隐藏盒子,而且占位置。

-position/top/left/...-999px 隐藏盒子,而且占位置。

  • margin也可以隐藏盒子。
Last modification:March 1st, 2018 at 03:07 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment