CSS元素和布局基本概念

CSS元素和布局

一、元素

• 替换和非替换元素

  • 替换元素

    指用来替换元素内容的部分并非由文档内容直接表示。元素的内容一般由元素的属性来替换。常见例子：img、input标签。

  • 非替换元素

    大多数HTML、XHTML元素都是非替换元素，其内容由浏览器在元素本身生成的框中显示。

    常见例子：span、h、p标签

• 元素显示角色

  • 块级元素

    生成一个元素框，会填充父元素的内容去，在元素框之前之后生成了分隔符。

    常见例子：p、div标签

  • 行内元素

    在文本行内生成元素框，不会打断文本。

    常见例子：a、input、span

    注：display属性可以改变元素默认的显示角色类型。

二、盒子模型

• 基本框

  ​ 每个CSS元素生成一个或多个矩形框，称为元素框。元素框由content、padding、border、margin三部分组成。即内容、内边距、边框、外边距。

• 包含块

  ​ 包含块就是一个元素的“布局上下文”通常由最近的块级祖先框、表单元格、行内块祖先框的内容边界构成。

三、布局

• 浮动

  • 属性float

    float

    值：left | right | none |inherit

    应用于：所有元素

    继承性：无

  • 浮动元素

    1）将元素浮动时，会以某种方式将浮动元素从文档正常流中删除。浮动元素会导致其他内容环绕该元素。

    2）浮动一个非替换元素时，必须为该元素声明一个width,柔则元素的宽度将趋于0。

  • 浮动详解

    1）浮动元素的包含块是其最近的块级祖先元素。

    2）浮动元素会生成一个块级框（表现跟div元素一样）

    3）浮动元素会延伸，从而包含其所有后代浮动元素。（用过将父元素置为浮动元素，可以把浮动元素包含在其父元素内）

    浮动元素的规则：

    1）浮动元素左（右）外边界不能超出包含块左（右）内边界。

    2）浮动元素彼此不能"覆盖"或“重叠”。

• 清除浮动

  • 属性clear

    clear

    值：left | right |both |none |inherit

    应用于：块级元素上

  • 清除浮动元素

    有时候不希望内容流过浮动元素，确保元素的左边或者右边不会出现浮动元素。避免发生覆盖现象。

• 定位

  • position

    值： static | relative | absolute | fixed |inherit

    初始值：static

    应用于：所有元素

  • 包含块

    1. 根元素包含块为浏览器建立，根元素一般为html元素

    2. 非根元素的position为ralative或static,包含块由最近的块级框、表单元格、行内块祖先框内容边界构成。

    3. 非根元素的position为absolute,包含块设置为最近的position不是static的祖先元素。

       祖先为块级元素，则设置为该元素内边距边界。

       祖先为行内元素，则设置为该元素的内容边界。

       无祖先，则设置为初始包含块（根元素）。

  • 偏移属性

    top、right、bottom、left

    值： length | percentage | auto

    初始值： auto

    应用于：定位元素（absolute、fixed、relative)

    注：偏移属性会隐含的确定元素的高度和宽度，即浏览器会自动计算绝对浮动元素的宽度和高度。

  • 静态定位static

    ​ 元素正常生成，块级元素生成一个矩形框，作为文档流一部分，行内元素则创建一个或多个行框，置于父元素中。

  • 绝对定位absolute

    ​ 从文档流中删除，然后相对于其包含块定位，边界由偏移属性确定。定位元素不会流入其他元素内容，但可能覆盖其他元素。同时还会为后代元素建立一个包含块。

  • 固定定位fixed

    ​ 与绝对定位类似，只不过固定元素的包含块是视窗。固定定位时，元素会完全从文档流中去除。

  • 相对定位relative

    ​ 元素框偏移某个位置，元素任保持未定位前形状，它原本所占空间依然保留。所以相对定位元素可以覆盖其他内容。