04day盒子模型 2018-07-09

内容区指的是盒子中放置内容元素的区域， 也就是元素中的文本内容，子元素都是存在于内容区中的。

通过width和height两个属性可以设置内容区的大小。

这两个属性只适应于块元素。

内边距

默认情况下width和height不包含padding的大小。

使用padding属性来设置元素的内边距

例如：padding：10px 20px 30px 40px这样会设置元素的上右下左四个方向的内边距 按这个顺序

外边距

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

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

用法和padding类似，同样也提供了四个方向的margin -top / rirght / bottom / left

当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行大妈margin：0 auto可以使元素居中

display我们不能为行内元素设置width，height，margin-top和margin-bottom。

我们可以通过修改display来修改元素的性质

可选值有

-block：设置元素为块元素

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

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

-none：隐藏元素（元素在页面中完全消失）

visibility

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

-visible：可见的

-hidden：隐藏的

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

可以通过overflow来控制溢出情况可选值

-visble：默认值

scroll：添加滚动条

-auto:根据需要添加滚动条

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

浮动

所谓浮动指的是使元素脱原本的文本流，在父元素中浮动起来  浮动使用float属性

-none：不浮动

-left：向左浮动

-right：向右浮动