CSS学习之盒模型 - CSS: The Missing Manual

• 当两个同级块元素的margin相接的时候会重合，使用值更大的那个margin。最好尽量避免这一情况。

• 子元素的margin和父元素的margin如果直接相接的话也会重合，叫collapsing margins，为避免这一情况，可以为父元素设置border或者padding，插在两个margin中间。

  • 以上情况不会出现在横向的margin上，也不会出现在floating的元素，也不会出现在position为absolute和relative的元素上。

• padding必须为正，但可以将margin设置为负值，来缩减元素间的距离（例如缩减text的行高造成的间距），或者模拟负padding的效果（例如设置子元素的负margin可以是子元素跑到父元素border的外面）

• Display Settings

  • bolck-level tags 块级元素： create a break before and after it
  • inline tages 行内元素：不会换行
  • 相同之处：font,color, background,可以加border
  • 不同之处：对行内元素横向margin和padding有效，纵向无效（纵向padding会扩大border但不会挤开周围元素而是覆盖他们）
  • display: inline; //使块级元素作为行内元素
  • display: block; //使行内元素作为块级元素
  • display: inline-block; //既不换行又保留margin和padding的效果
  • display: none; //不显示

• height和width属性，使用em单位时，是以该元素的text size为基准，使用percentage时，是以父元素的height或width为基准的。

• 如果固定了某块元素的长宽，而里面的内容不能完全被容纳，那么快元素的大小不会变，但是里面的内容会在默认情况下溢出。可以对块元素设置overflow属性来对溢出内容进行隐藏或其它操作。
  visible//默认
scroll//滚动条
auto//只有在必须时才出现滚动条
hidden//隐藏

• box-sizing: content-box/ padding-box/ border-box; //用来更改浏览器计算元素width和height的方式，默认为content-box

• 通过max-width, max-height, min-width, min-height来设置最大长宽和最小长宽。

• 正常情况下浏览器会将元素从上至下排布，而是用float属性会使元素位于父级元素的左边或右边，而其它的元素来包围它。

  • 对inline元素设置float会使它表现为块级元素，不会出现垂直方向margin和padding无效的情况。
  • 元素的backgrounds和borders不会对floated的元素做出和content一样的反应去包围floated的元素，而是直接按照原本的位置所以会位于它们的底层。（A web browser wraps the text around the float, but not the border or background.）使用如下方法可以使背景和边框在遇到floated的元素的时候终止：
    
    1. 在有背景和边框的元素上加上属性overflow: hidden; 可以使它们遇到浮动元素的时候不再显示边框和背景
    2. 在浮动元素上加上borderline，覆盖掉在下层其它元素的边框和背景。
  • 如果有多个浮动元素，那么它们会按顺序一个挨着一个。
  • clear属性，告诉元素不要包围在浮动元素周围，而是直接到浮动元素下面。clear: left/ right/ both/ none;