《精通CSS》读书笔记——CH2.1 框模型概述

学习CSS最好的方式之一是直接开始使用它。

 

框模型概述

 

页面上的每个元素被看做一个矩形框，这个框由元素的内容、填充、边框和空白边组成。如果在元素上添加背景，那么背景会应用于由内容和填充组成的区域。因此，常常使用填充在内容周围创建一个隔离带，使内容不会与背景混在一起。添加边框会在填充的区域外边加一条线，比如实线、虚线、点线。在边框外面的是透明的空白边，一般使用它控制元素之间的间隔。

 

可以使用通用选择器去掉所有元素的间距和填充，覆盖浏览器样式。

*{
margin:0;
padding:0;
}

 

在CSS中，width和height值的是内容区域的宽度和高度。添加填充、边框和空白边会增加元素框的总尺寸。

填充、边框和空白边可以用于一个元素的所有边或者单独的边。

空白边还可以是负值，并且在多种技术中都要使用负值的空白边。

 

 

行内框

行内框在一行中水平布置。可以使用水平填充、边框和空白边调整它们的水平间距。但是，垂直填充、边框和空白边不影响行内框的高度。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。但是，设置行高可以增加这个框的高度。

 

 

框可以按照(X)HTML元素的嵌套方式包含其他框。大多数框由显式定义的元素形成。但是，在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在将一些文本添加到一个块级元素（比如div）的开头时。即使没有把这些文本定义为段落，它也会被当作段落对待：

    <div>
    some text
    <p>some more text</p>
    </div>

    在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。