WEB-DAY5学习笔记

盒模型概述

  CSS中每个样式是一个盒子。主要有block和Inline两种盒子。
  block盒子的主要性质：1. 此框将会换行。 2. 默认情况下会占满父元素的宽度。3. margin和border会使得其他元素被推开。
  inline盒子的主要心制：1. 不会换行。2. 垂直方向上的padding、margin、border不会使得其他inline盒子远离，但是水平方向上的会。3. width和height是无效的。
  下面是盒模型的示意图：

  我们设置的width和height实际设置的是content，整个盒子的总宽度和总高度还得加上水平或垂直方向上的padding、border和margin宽度。其中margin一圈是不可见的，它用来推开其他的盒子。边框border可见，可以选择颜色和样式等等。padding是背景，默认情况下是透明的。他们都可以四个方向独立定制宽度。其中margin的宽度可以是负数。
  还有一种inline-block样式的盒子，它的周边设置也会推开其他元素，width和height跟block一样可控，但它不会另起一行，适合在内容中使用。
  我们可以设置flaot属性使得元素停靠在我们想要的地方，还可以在不想要浮动的地方清除浮动效果。文章分栏是一种典型应用。