抽空复习整理 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 默认值。没有定位