Web前端开发学习笔记06--CSS

1、浮动

1.1 网页布局的方式

（1）标准流

标准流：标签按照规定好的默认方式排列

①块级元素独占一行，从上向下顺序排列

②行内元素按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

（2）浮动

（3）定位

为了约束浮动元素的位置，网页布局采取的策略：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则

1.2 浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

语法：

选择器 { float: 属性值;}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

注意点：

• 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
• 一个元素浮动了，理论上其余的兄弟元素也要浮动
• 浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流

1.3 浮动的特性

浮动元素的重点特性：

1. 浮动元素会脱离标准流（脱标）
2. 浮动的元素会一行内显示并且元素顶部对齐排列（元素中间无缝隙）
3. 浮动的元素会具有行内块元素的特性

脱标

1. 脱离标准普通流的控制（浮）移动到指定位置
2. 浮动的盒子不再保留原先的位置

2、清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动的本质：

• 清除浮动元素造成的影响
• 如果父元素本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度

语法：

选择器 {clear: 属性值}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右侧浮动的影响

清除浮动的方法：

方式	优点	缺点
额外标签法	通俗易懂	结构差
父级加overflow 属性	书写简单	溢出隐藏
父级加after伪元素	结构语义化正确	兼容性问题
父级添加双伪元素	结构语义化正确	兼容性问题

（1）额外标签法

在浮动元素末尾添加一个空标签，如<div style="clear:both"></div>

空标签必须为块级元素

（2）父级加overflow 属性

overflow: hidden | auto | scroll;

（3）父级加after伪元素

.clearfix: after {
   content: "";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
.clearfix {
          *zoom: 1;    /*IE6、7 专有*/
}

（4）父级添加双伪元素

.clearfix: before, .clearfix: after {
   content: "";
   display: table;
}
.clearfix: after {
      clear: both;
}
.clearfix {
      *zoom: 1;    /*IE6、7 专有*/
}

3、CSS书写顺序

1. 布局定位属性，display、position、float、clear、visibility、overflow
2. 自身属性，width、height、margin、padding、border、background
3. 文本属性，color、font、text-decoration、text-align、vertical-align、white-space、break-word
4. 其他属性(CSS3)，content、cursor、border-radius、box-shadow、text-shadow、background：

4、定位

为什么需要定位：

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用横向排列盒子
2. 定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

定位组成：

定位含义： 将盒子定在某各位置，所以定位是在摆放盒子，按照固定的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式： 用于指定一个元素在文档中的定位方式，用CSS的position 属性设置

position的值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移： 决定了该元素的最终位置，有四个属性

边偏移属性	实例	描述
top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom：80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left：80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right：80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式：

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否	相对于自身位置移动	常用
absolute 绝对定位	是	带有定位的父级	常用
fixed 固定定位	是	浏览器可视区	常用
sticky 粘性定位	否	浏览器可视区	很少

4.1 静态定位

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 { position: static;}

注意：

1. 静态定位按照标准流特性摆放位置，它没有边偏移
2. 在布局时很少用到

4.2 相对定位

相对定位： 元素在移动位置的时候，是相对于它原来的位置来说的

语法：

选择器 { position: relative;}

特点：

1. 移动位置时参照点是自己原来的位置
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标）

4.3 绝对定位

绝对定位： 元素在移动位置时是相对于它祖先元素的

语法：

选择器 { position: absolute;}

特点：

1. 如果没有祖先元素或者组下元素没有定位时，则以浏览器为准定位
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原先的位置（脱标）
4. 子绝父相：子级是绝对定位的话，父级需要用相对定位

4.4 固定定位

固定定位： 元素固定于浏览器可视窗口的位置（浏览器页面滚动时元素的位置不发生变化）

语法：

选择器 {position: fixed;}

特点：

1. 以浏览器的可视窗口为参照点移动元素
2. 跟父元素没有任何关系
3. 不随滚动条滚动
4. 固定位置不占有原先的位置（脱标）

4.5 粘性定位

粘性定位： 可以认为是固定定位和相对定位的混合

语法：

选择器 {position: sticky; top: 20px;}

特点：

1. 以浏览器的可视窗口为参照点移动元素
2. 粘性定位占有原先位置
3. 必须添加top、left、right、bottom 其中一个元素才有效

4.6 定位的叠放顺序

在使用定位布局时，可能会出现盒子重叠的情况。此时可以使用 z-index 来控制盒子的前后次序

语法：

选择器 { z-index: 1;}

• 数值可以是正负整数或0，默认值是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有 z-index 属性

5、定位的拓展

5.1 绝对定位的盒子居中算法

添加了绝对定位的盒子不能通过 margin: 0 auto 水平居中

绝对定位盒子水平居中算法：

1. left：50%；让盒子的左侧移动到父级元素的水平中心位置
2. margin-left：-50px；让盒子向左移动自身宽度的一半

5.2 定位的特殊特性

有如下特殊特性：

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对定位或者固定定位，如果不给宽度或高度，默认大小是内容的大小
3. 脱标的盒子不会触发外边塌陷（浮动元素、绝对（固定）定位的元素都不会发生外边距合并问题）
4. 绝对（固定）定位会完全压住盒子。（浮动元素不同，只会压住下面标准流盒子，但是不会压住盒子里面的文字或图片）

5.3 元素显示与隐藏

1、display 属性用于设置一个元素的应如何显示

• display: none; 隐藏对象
• display: block; 显示元素
• display 隐藏元素后，不再占有原来的位置

2、visibility 属性用于制定一个元素应可见还是隐藏

• visibility: visible; 元素可见
• visibility: hidden; 元素隐藏
• visibility 隐藏元素后，继续占有原来的位置

3、overflow 属性用于指定如果内容溢出一个元素的框时的情况

• overflow：visible；不剪切内容也不要添加滚动条
• overflow：hidden；不显示超过对象尺寸的内容，超出部分隐藏
• overflow：scroll；不管是否超出内容，都显示滚动条
• overflow：auto；超出自动显示滚动条，不超出不显示
• 有定位的慎用overflow：hidden