day05

回顾

• 什么是盒子模型

• 元素(盒子) 实际大小(内容、边框、内边距)

• 块状元素 内联元素

• display 属性： none / inline / block / inine-block

• 标准文档流

• 盒子和盒子位置 margin塌陷

• 相关属性 display / overflow:auto/hidden/scroll overflow-x overflow-y margin visibility:visible/hidden

 

1 浮动 CSS float

1.1 浮动

• 元素可以设置向左 或者 向右浮动 （不会跳出父元素的宽）

• 元素浮动后，会脱离文档流。 （对后面的元素产生影响）

• 元素一旦浮动，会转换为块状元素 块状元素可以设置宽高等属性

• 浮动的元素并不独占一行(仍然是块状元素) 因为脱离标准文档流

• 浮动的元素，宽度默认会是auto，被内容撑开 尽可能的窄

• 多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行

 

1.2 浮动的影响

• 对后面元素影响。 后面元素会整体向前

• 对父元素有影响 （父元素的高不能被撑开）

 

1.3 消除浮动影响

• 消除元素对后面元素的影响， 在后面的元素设置 clear:both/left/right

• 消除子元素浮动对父元素的影响 。 给元素浮动 或者 设置 overflow

 

 

3 定位布局 CSS position

3.1 相对定位

• 通过 position:relative 设置元素为相对定位元素

• 元素设置为相对定位之后，不会脱离文档流，不影响其他元素

• 可以通过 left、top、right、bottom给相对定位的元素设置位置

• 定位元素： 根据 原先默认的位置 去定位

   

3.2 绝对定位

• 通过position:absolute来设置绝对定位

• 元素绝对定位后，脱离文档流，影响后面的元素。 宽度默认会被内容撑开

• 可以通过 left、top、right、bottom给绝对定位的元素设置位置

• 定位规则： 根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素。 祖先元素什么定位都可以

 

3.3 固定定位

 

定义使用的CSS属性

position:  
left
top
right
bottom
z-index