【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素均可以当作是框组成的,框经过三种定位机制排列在一块儿就过程了咱们看到的页面.而框就是盒模型.

盒模型

 

 

1.页面上的每一个元素能够当作一个矩形框，每一个框由元素的内容，内边距，边框和外边距组成。

2.若是在元素上添加背景，则背景是边框, 内边距和内容组成的区域.

3.在css中width和height指的是内容区域的宽度和高度。增长内边距，边框和外边距不会影响内容区域的尺寸，但会增长元素框的总尺寸。即width=element

注意：ie的盒模型中，width指的是内容，内边距，和边框的宽度总和（没有外边距）。即：width=element+padding+border

 

外边距叠加：当两个或更多的垂直外边距相遇时，它们将造成一个新外边距。这个新外边距的高度等于两个发生叠加的外边距的高度中的较大者。

注意：只有普通文档流中的块框的垂直外边距才会发生外边距叠加。行内框，浮动框或绝对定位框之间的外边距不会叠加.

会有如下四种状况:

 

 

 

html中的元素分为块级元素和行内元素,对应的生成的框即为块框和行内框.

块框从上到下一个接着一个排列,块框之间的距离由垂直外边距决定.

行内框在一行中水平排列.

注意:可经过设置display属性改变框的类型.

 

css的三种定位机制

css由3中基本的定位机制:普通流,浮动和绝对定位.

若非经过css样式指定,全部的框都在普桶流中,普通流中的元素框位置由元素在html中的位置决定.

相对定位(视为普通流定位):由于是相对定位元素的位置是”相对于”元素在普通流中的初始位置而定,因此视为普通流定位的一种.相对定位的元素任占据原来的空间,而且能够覆盖其余框.

将属性position设置为relative.经过设置top和left使框相对于原来元素的起点移动

 

绝对定位:绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素肯定的.绝对定位的元素位置与文档流无关,所以不占据空间.

注意:

相对定位元素的位置是”相对于”元素在普通流中的初始位置而定.

绝对定位是”相对于”距离它最近的已定位祖先元素,如不存在,则相对于初始包含块.

注意:绝对定位由于与文档流无关,所以也会覆盖页面上的其余元素.p47

当绝对定位的元素由重合时刻经过z-index设置叠放次序.

将屏幕当作湖面,z-index设置的值越高,离湖面越近,则显示的优先级就越高.z-index值高的元素显示优先级高于z-index值低的元素.

固定定位:视为绝对定位的一种. 固定元素的包含块为浏览器窗口.

 

浮动:浮动会让元素脱离文档流.浮动框能够左右移动知道它的外边距碰到包含框或者另外一个浮动框的边缘.

若浮动的元素后面有一个文档流中的元素,那么浮动元素旁边的行框将被缩短.文档流中的元素会紧跟浮动框以后（例如文本围绕图像）.

解决方法:对行框应用clear属性,属性值为left,right,both,none.而在具体实现时,浏览器会在元素顶上添加足够的外边距,是元素的顶边缘垂直降低到浮动框下面.

与css定位有关的属性(第一个属性值为默认属性):

position	规定元素的定位类型	static, absolute, fixed, relative
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移	auto, 百分数, 数值
right	设置定位元素右外边距边界与其包含块右边界之间的偏移	auto, 百分数, 数值
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移	auto, 百分数, 数值
left	设置定位元素左外边距边界与其包含块左边界之间的偏移	auto, 百分数, 数值
float	规定框的浮动	none, left, right
clear	规定元素的哪一侧不容许其余浮动元素	none, left, right, both
display	规定元素应生成框的类型	inline, none, block, inline-block
clip	剪裁绝对定位元素	auto, 形状rect (top, right, bottom, left)
overflow	规定当内容溢出元素框时发生的事情	visible, hidden, scroll, auto
vertical-align	设置元素的垂直对齐方式	baseline, sub, super, top, bottom, 数值,百分数
visibility	规定元素是否可见	visible, hidden, collapse
Z-index	设置元素的堆叠顺序	auto, 数值
cursor	规定要显示的光标的类型	Auto, text, help,pointer, move