HTML 盒子

盒子模型

• CSS 在处理网页的时候会认为每个元素都是一个盒子，一个盒子分为以下几个部分：
  1、内容区：content
  2、内边距：padding
  3、边框 ：border
  4、外边距：margin

图片1.png

内容区

内容区指的是盒子中放置内容的区域，也就是元素的文本内容，子元素也是存在于内容区的， 可以通过width和height两个属性设置内容区的大小
但是，width和height属性只适用于块元素

p{
    width:100px;
    height:100px;
}

内边距

内边距指的是元素内容区与边框以内的空间 默认情况下width和height不包含padding的大小。可以使用padding属性来设置元素的内边距
例1：
padding：10px，5px，5px，10px（设置元素的上右下左的内边距）
例2：
padding:10px,10px,10px
(设置上，左右，下的内边距)
例3：
padding：10px，10px
(设置上下，左右的内边距)
例4：
padding：10px
（设置上下左右的内边距）
另外在CSS中还提供了padding-top、padding-right、padding-left、padding-bottom分别制定四个方向的内边距

p{
   padding:10px,10px,10px,10px
}

边框

可以在元素周围创建边框，边框是元素可见框的最外部 可以同border属性来设置盒子的边框

• 边框和内边距一样，默认width和height不包括边框的宽度 ,也能使用border-top/left/right/bottom来指定边框

设置边框的宽度、颜色、样式

p{
    border:1px red solid
}

• 边框的样式
  没有 none； 点线 dotted； 虚线 dashed； 实线 solid ；双线 double； 脊线 ridge；凹线 inset； 凸线 outset

外边距

外边距是元素边框与周围元素相距的空间 使用margin属性设置外边距

• 用法与内边距，边框类似，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以margin：0 ，auto可以是元素居中

display

• 不能为行内元素设置width、height、margin-top和margin-bottom。因为他们只适用于块元素，这时我们可以通过修改display来修改元素的性质。

可选值：
block 设置元素为块元素
inline 设置元素为行内元素
inline-block 设置元素为行内块元素
none （隐藏元素元素将在页面内完全消失）

visibility

主要适用于元素是否可见

• 和display的区别：使用display设置为none时 ，元素彻底消失，使用visibility隐藏元素，隐藏后的元素在文档中所占的位置依然存在，不会被其他元素覆盖

可选值
visible 可见的
hidden 隐藏的

overflow

当相关标签里面的内容超出了样式的宽度和高度时，浏览器会让内容溢出盒子，

• 可以通过oxerflow来控制内容溢出的情况

可选值：
visible 默认值
scroll 添加滚动条
auto 据需要添加滚动条（比scroll更智能，能够自行判断）
hidden 隐藏超出盒子的内容