第二讲 盒模型
第二讲 盒模型
一、元素分类：块状元素（ block ）和内联元素
（ inline ）
块状元素的默认 display 属性为 block, 内联元素
默认 display 属性为 inline 。块状元素默认是
占据一行的位置，下一个元素将被迫挤到下一
行显示。内联元素则不是这样，内联元素会使
得下一个元素自动贴到自己的有边显示 。
1 、内联元素有 ： a, abbr, acronym, b, bdo, big,
br, button, cite, code, dfn, em, i, img, input,
kbd, label, map, object, q, samp, script, selec
t, small, span, strike, strong, sub, sup, textar
ea, tt, var ,basefont, font, s, u
2 、块状元素有 ： address, blockquote, div, dl,
fieldset, form, h1-h6, hr, noframes, noscript,
ol, p, pre, table, ul center, dir, isindex, menu
常用内联： a img span
常用块状元素： div ul ol dl p h1-h6 fields
et
注意：
1 ）内联元素不能设置高度和宽度。
2 ）内联和块状元素可以互相转化。
内联转化为块状： display:block 或 float:le
ft/right
块状转化为内联： display:inline;
盒模型
每个 html 元素都可以看作一个装有东西的盒子，盒
子里面的内容到盒子的边框之间的距离是填充
（ padding ）。盒子本身有边框（ border ），而
盒子边框外和其他盒子之间，是边界（ margin ） .
填充、边框、边界都分为“上右下左”四个方向。
注意： CSS 内定义的宽度 (width) 和高度 (height),
指的是填充以内的内容范围（即内容高度宽度）。
因此一个元素实际宽度 = 左边界 + 左边框 + 左填
充 + 内容宽度 + 右填充 + 右边框 + 右边界
