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
应用于:所有元素
-
包含块
-
根元素包含块为浏览器建立,根元素一般为html元素
-
非根元素的position为ralative或static,包含块由最近的块级框、表单元格、行内块祖先框内容边界构成。
-
非根元素的position为absolute,包含块设置为最近的position不是static的祖先元素。
祖先为块级元素,则设置为该元素内边距边界。
祖先为行内元素,则设置为该元素的内容边界。
无祖先,则设置为初始包含块(根元素)。
-
-
偏移属性
top、right、bottom、left
值: length | percentage | auto
初始值: auto
应用于:定位元素(absolute、fixed、relative)
注:偏移属性会隐含的确定元素的高度和宽度,即浏览器会自动计算绝对浮动元素的宽度和高度。
-
静态定位static
元素正常生成,块级元素生成一个矩形框,作为文档流一部分,行内元素则创建一个或多个行框,置于父元素中。
-
绝对定位absolute
从文档流中删除,然后相对于其包含块定位,边界由偏移属性确定。定位元素不会流入其他元素内容,但可能覆盖其他元素。同时还会为后代元素建立一个包含块。
-
固定定位fixed
与绝对定位类似,只不过固定元素的包含块是视窗。固定定位时,元素会完全从文档流中去除。
-
相对定位relative
元素框偏移某个位置,元素任保持未定位前形状,它原本所占空间依然保留。所以相对定位元素可以覆盖其他内容。
-