web 盒子模型

盒子模型

• 一个盒子分为四个部分

• 内容区
• 内边距
• 边框

• 外边框

  
  
  image.png

内容区

• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。
  -通过width和height两个属性可以设置内容区的大小，width和height属性只适用于块元素。

内边距

• 内边距指的就是元素内容区与边框以内的空间。默认情况下width和height不包含padding的大小。
• 使用padding属性来设置元素的内边距。
• padding:10px 20px 30px 40px; 指定内边距大小上→右→下→左的顺序
• padding:10px 20px 30px; 指定内边距大小上→左右→下的顺序
• padding:10px 20px; 指定内边距大小上下→左右的顺序
• padding:10px; 同时指定内边距大小的四个方向

边框

• border:1px red solid; 指定了宽，颜色和样式

边框的样式

• none(没有边框)
• dotted(点线)
• dashed(虚线)
• solid(实线)
• double(双线)
• groove(槽线)
• ridge(脊线)
• inset(凹边)
• outset(凸边)

外边距

• 外边距是元素边框与周围元素相距的空间

• 使用margin属性可以设置外边距

• display

• 我们不能为行内元素设置width、height、margin-top和margin-bottom。我们可以通过修改display来修改元素的性质。

• 可选值：

• block：设置元素为块元素

• inline：设置元素为行内元素

• inline-block：设置元素为行内块元素

• none：隐藏元素(元素将在页面中完全消失)

• visibility

• visibility属性主要用于元素是否可见。和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。

• 可选值：

• visible：可见的

• hidden：隐藏的

• overflow

• 当相关标签里面的内容超出了样式的宽度和高度时，就会发生一些奇怪的事情，浏览器会让内容溢出盒子，这时候就可以通过overflow来控制内容溢出的情况。

• 可选值：

• visible：默认值

• scroll：添加滚动条

• auto：根据需要添加滚动条

• hidden：隐藏超出盒子的内容