抽空复习整理 4、Box模型及CSS布局

HTML元素分类

HTML标签：HTML标签指使用尖括号括起来的关键字,比如< div>和< /div>即是两个标签，其中不以斜杠（/）开头的标签称为开始标签，以斜杠（/）开头的标签称为结束标签，有些标签本身既是开始标签也是结束标签，比如< br/>标签；

HTML元素：HTML元素指从开始标签（start tag）到结束标签（end tag）的所有代码；开始标签与结束标签之间的内容称为HTML元素内容；如果构成HTML元素的标签自身既是开始标签也是结束标签，则这样的HTML元素又称为空元素，比如
元素，否则称为非空元素；

按照是否自动换行分为块级元素与行内元素：
• 块级元素（block element）
– table、p、ol、ul、li、form、div、hr、hn(h1、h2、h3、h4、h5、h6)等元素称为块级元素，其特点为：块级元素自动换行且宽度默认情况下占满整个父元素
• 行内元素（inline element）
– i、b、del、a、img、span, input、select、textarea、label 等元素称为行内元素，又称为内联元素、内嵌元素、直进式元素，其特点为：行内元素不会自动换行，相邻行内元素可以排在同一行。

常用CSS样式属性

• display样式属性
– 设置元素生成的框的类型，该属性有多个值：
值 描述

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素——此元素可以使用块级元素才能使用的样式属性，但是此元素前后没有换行符。（CSS2.1 新增的值）
• position样式属性
– 文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。
– 用于定义建立元素布局所用的定位类型，该属性有多个值：
值 描述
static 默认值。没有定位，元素出现在正常流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 生成相对定位的标签，相对于标签原来位置进行定位。因此，“left:20” 会向标签的left位置添加 20 像素。
absolute 生成绝对定位的标签，相对于标签本身第一个position为非 static父元素进行定位。标签的位置通过 “left”, “top”, “right” 以及 “bottom” 样式属性进行规定。如果该标签所在的父标签均没有设置position为非 static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动调的滑动而滑动。
fixed 生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动调的滑动而滑动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
注意：任何元素都可以定位，但absolute或fixed元素会生成一个块级框，不论该元素本身是不是块级框。relative元素会相对于它在正常流中的默认位置偏移。
• width和height属性
– 分别用于设置元素内容区的宽度和高度， 该属性有多个值：
值 描述
auto 默认值。浏览器可计算出实际的宽度或高度。
length 使用 px、cm 等单位定义宽度或高度。
• margin-top属性
– 设置元素的上外边距，该属性有多个值：
值 描述
auto 浏览器设置的上外边距。
length 定义固定的上外边距。默认值是 0。
• margin-right属性
– 设置元素的右外边距， 该属性有多个值：
值 描述
auto 浏览器设置的右外边距。
length 定义固定的右外边距。默认值是 0。
• margin-bottom属性
– 设置元素的下外边距，该属性有多个值：
值 描述
auto 浏览器计算下外边距。
length 规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。
• margin-left属性
– 设置元素的左外边距， 该属性有多个值：
值 描述
auto 浏览器设置的左外边距。
length 定义固定的左外边距。默认值是0。
• margin属性
– 用于在一个声明中设置所有外边距的宽度，或者设置各边上外边距的宽度。该属性有多个值：
值 描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
– 注意：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距；行内元素的的左右外边距不会合并；浮动元素的外边距也不会合并；允许使用负值，不过要谨慎使用
– margin属性可以有 1 到 4 个值：




– margin:0 auto;——居中显示
– *{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置
– 外边距合并：外边距合并指的是，当两个垂直（非水平）外边距相遇时，合并后的外边距高度等于两个外边距高度中的较大者，左右是加法。

• padding-top属性
– 设置元素上内边距的宽度，该属性有多个值:
• padding-right属性
– 设置元素右内边距的宽度， 该属性有多个值：
• padding-bottom属性
– 设置元素下内边距的宽度， 该属性有多个值：
• padding-left属性
– 设置元素左内边距的宽度， 该属性有多个值：
• padding属性
– 在一个声明中设置元素所有内边距的宽度，或者设置各边上内边距的宽度， 该属性有多个值：
值 描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
– 注意：行内非替换元素上设置的内边距不会影响行高计算，因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠；元素的背景会延伸穿过内边距；不允许使用负值
– padding属性可以有 1 到 4 个值：




– *{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值，方便后面设置：示例
• left和right样式属性
– left 属性规定元素的左边缘，该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移； right 属性规定元素的右边缘，该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。无论left属性还是right属性都有多个值：
• float样式属性
– 设置元素浮动方向， 该属性有多个值：
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
• clear样式属性
– 用于设置元素的哪个边上不允许出现浮动元素，该属性有多个值：
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。

Box模型

为了方便HTML元素布局，每个HTML元素都包含在一个盒子里，这些矩形的盒子嵌套或者并列在一起形成了页面。
一个盒子模型从内到外分内容区（content）或元素（element）、内边距(padding)、边框(border)和外边距(margin)4部分，如下图：