H5学习笔记（七）盒子模型

盒子

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

盒子模型包括几个部分：
– 内容区(content)
– 内边距(padding)
– 边框(border)
– 外边距(margin)

内容区

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

内边距

顾名思义，内边距指的就是元素内容区与边框以内的空间。默认情况下width和height不包含padding的大小。使用padding属性来设置元素的内边距。

例如：
– padding:10px 20px 30px 40px
– 这样会设置元素的上、右、下、左四个方向的内边距。
- padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距
- padding:10px 20px;
– 分别指定上下、左右四个方向的内边距 • padding:10px;

同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

边框

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

– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。和padding一样，默认width和height并包括边框的宽度。边框的样式

• 边框可以设置多种样式：
– none（没有边框）
– dotted（点线）
– dashed（虚线）
– solid（实线）
– double（双线）
– groove（槽线）
– ridge（脊线）
– inset（凹边）
– outset（凸边）

外边距

外边距是元素边框与周围元素相距的空间。使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的
margin-top/right/bottom/left。

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

 

display

将一个内联元素变成块元素，通过display样式可以修改元素的类型可选值：

inline：可以将一个元素作为内联元素显示
block: 可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素
        - 可以使一个元素既有行内元素的特点又有块元素的特点既可以设置宽高，又不会独占一行
none: 不显示元素，并且元素不会在页面中继续占有位置

visibility

可以用来设置元素的隐藏和显示的状态- 可选值：

– visible：可见的
– hidden：隐藏的

使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持 

overflow

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容：可选值：

- visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
- hidden, 溢出的内容，会被修剪，不会显示
- scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
- 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
- auto，会根据需求自动添加滚动条，需要水平就添加水平 需要垂直就添加垂直都不需要就都不加