CSS笔记

浮动定位 (float)

如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征
1、浮动元素会被排除在文档流之外(脱离文档流),不占据页面空间，其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
3、浮动元素依然位于包含框之内
4、浮动定位解决的问题-让多个块级元素在一行内显示

浮动引发的特殊效果

1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示
2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下
3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大
    块级元素：允许修改尺寸
	行内元素：不允许修改尺寸
4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。

清除浮动影响

属性：clear

• 1、none默认值，不做任何清除操作
• 2、left 清除该元素左边(上边)的浮动元素所带来的影响
• 3、right清除该元素右边的浮动元素所带来的影响
• 4、both 清除该元素两边的浮动元素所带来的影响

浮动元素对父元素所带来的影响

由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高度将变成0

解决方案：

• 1、直接设置父元素高度 弊端：必须要知道父元素高度是多少
• 2、设置父元素也浮动 弊端：对后续元素会带来位置的影响
• 3、为父元素设置 overflow 属性 取值：hidden 或 auto 弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。
• 4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both

显示方式

每个元素都有自己的显示方式，显示方式决定了元素的显示特点
属性：display

• 1、none 不显示元素–隐藏 特点：脱离文档流–不占据页面空间
• 2、block 像块级元素一样显示元素 场合：将行内元素变为块级元素
• 3、inline 像行内元素一样显示元素 注意：不要块级元素(div/p…)改变成行内元素
• 4、inline-block 像行内块元素一样显示元素 行内块：多个元素会在一行内显示，但是允许修改尺寸 场合：将行内元素改变为行内块，以便修改尺寸

光标

属性：cursor

pointer	crosshair	text	wait	help
小手	+	I	等待	?

定位

relative相对定位

• 1、什么是相对定位
  元素会相对于它原来的位置偏移某个距离
  元素移动位置后，原来所占据的空间依然会保留
• 2、使用场合
  位置微调

absolute绝对定位

绝对定位的特征"

• 1、元素会脱离文档流

• 2、相对于 最近的 已定位的祖先元素 来实现位置的初始化

• 3、如果元素没有已定位祖先元素，那么它的位置就相对于最初的包含块(body,html)

• 4、 绝对定位的元素会变成块级

• 5、 绝对定位的元素可以使用 margin来改变位置，但是 margin:auto 会失效

堆叠顺序

默认堆叠效果

• 1、平级元素-后来者居上
• 2、子元素压在父元素之上-子压父
• 3、属性z-index取值：数值越大越靠上
• 4、取值可以为负取值为负时，当前元素会位于页面正常显示内容之下
• 5、z-index 是无法改变父子关系的堆叠顺序