盒子模型
-
一个盒子分为四个部分
- 内容区
- 内边距
- 边框
-
外边框
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：隐藏超出盒子的内容
