CSS浮动&定位&布局

浮动简介

浮动最早起设计出来是为了实现文字环绕图片或者文字环绕的效果,现在浮动是主流的页面布局方式之一

• float:浮动属性,值可以是left、right对应向左和向右浮动

元素浮动之后的特点

• 脱离文档流
• 不管浮动前是什么元素,浮动后，默认宽高都是被内容撑开,而且可以设置宽高
• 不会独占一行，可以与其他元素共用一行
• 不会margin合并，也不会margin塌陷,能够完美设置四个方向的padding和margin
• 不会像行内块一样被当做文本处理(没有行内块的空白问题)

浮动后的影响及解决方式

浮动影响

1. 对兄弟元素的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面，对前面兄弟无影响
2. 对父元素的影响:不能撑起父元素的高度,导致父元素高度塌陷,但父元素的宽度依然束缚浮动的元素

解决影响(清除浮动)

/* 清除左浮动影响*/
clear:left; 

/* 清除右浮动影响*/
clear:right; 

/* 清除左右浮动影响*/
clear:both; 

解决方案:

1. 给父元素指定高度

2. 给父元素也设置浮动，带来其他影响

3. 给父元素设置overflow:hidden

4. 在所有元素的嘴后面，添加一个块级元素,并给该块级元素设置clear:both

5. 给浮动元素的父元素，设置伪元素,通过伪元素清除浮动，原理与方案4相同，推荐使用

   .parent::after {
     content:"";
     display:block;
     clear:both;
   }
   

   布局中的一个原则:设置浮动的时候，兄弟元素要么全都浮动,要么全都不浮动

CSS相对定位

如何开启相对定位

• 给元素设置postion:relative设置相对定位
• 可以使用left、right、top、bottom四十属性调整位置
• 相对定位是相对自己原来的位置进行调整

相对定位的特点

1. 不会脱离文档流,元素位置的变化，只是视觉效果上的变化，不会对其他元素产生影响

2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的

   默认规则是定位的元素会盖在普通元素智商,如果是定位的两个元素，后IE的元素会盖在先写的元素上面

3. left和right不能一起设置,bottom和top不能一起设置

4. 相对定位的匀速，也可以继续浮动、设置margin调整位置，但是不推荐

5. 相对定位和绝对定位一般配合使用

CSS绝对定位

如何开启绝对定位

• 给元素设置postion:absolute;可以实现绝对定位
• 可以使用left、right、top、bottom四个属性调整位置

绝对定位的参考点

• 包含块

  1. 对于没有脱离文档流的元素:包含块就是父元素
  2. 对于脱离文档流的元素:包含块就是第一个拥有定位属性的祖先元素，如果所有祖先元素都没有定位，那么包含块就是整个页面

• 绝对定位是根据包含块来调整位置

绝对定位的特点

1. 脱离文档流,会对后面的兄弟元素、父元素有影响

2. left不能喝right一起设置，top和bottom不能一起设置

3. 绝对定位、浮动不能同时设置，如果同时设置则浮动失效以定位为主

4. 绝对定位的元素也能通过margin调整位置,不推荐

5. 无论是什么元素(行内、行内块、块),设置了绝对定位之后，都变成了定位元素

   定位元素:默认宽、高点都被内容所撑开，且能自由设置宽高

固定定位

如何设置固定定位

• 给元素设置postion:fixed;可以实现固定定位
• 可以使用left、right、top、bottom四个属性调整位置
• 固定定位的参考点是视口

固定定位元素的特点

1. 脱离文档流,会对后面的兄弟元素、父元素有影响
2. left不能和right一起设置，top和bottom不能一起设置
3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主
4. 固定定位的元素,也能通过margin调整位置，但是不推荐
5. 无论是什么元素(行内、行内块、块),设置了绝对定位之后，都变成了定位元素

粘性定位

如何设置粘性定位

• 给元素设置postion:sticky;可以实现粘性定位
• 可以使用left、right、top、bottom四个属性调整位置
• 粘性定位的参考点是离它最近的一个拥有滚动机制的祖先元素，即便这个祖先不是最近的真实的可滚动祖先

粘性定位的特点

1. 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式
2. 最常用的是top值
3. 粘性定位可以同时设置浮动、margin，但是不推荐
4. 粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定

定位的层级

1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
2. 如果发生重叠，默认的情况是:后面的元素会显示在前面元素智商
3. 可以通过css属性z-index调整元素的显示层级
4. z-index的属性值是数字，没有单位，值越大显示层级越高
5. 只有定位的元素设置z-index才有效
6. 如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，可以检查其包含块的层级大小

定位的特殊应用

1. 定位可以越过父元素的padding

2. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开,且依然可以设置管靠

3. 发生相对定位后，元素依然是之前的显示模式

4. 以下所说两种元素处理↓，只针对绝对定位和固定定位的元素，不包括相对定位的元素

让定位元素的宽高充满包含块

1. 块宽高想与包含块一只，ky给定位元素同时设置left和right为0
2. 高度想与包含块一只，top和bottom设置为0

让定位元素在包含块中居中

/* 方案一 */
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

/* 方案二  该定位元素必须设置宽高*/
left:50%;
top:50%;
margin-left:负的宽度的一半；
margin-top:负的高度的一半;

布局-版心

• 在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心
• 版心的宽度一般是960~1200像素之间
• 版心可以是一个，也可以是多个
• 版心的作用是为了适配不同分辨率的屏幕，使其内容在固定的一个区域,如果分辨率过小会出现滚动条，分辨率过高，页面两边会留白，内容区固定在版心内
• 除了版心，还有响应式布局，根据分辨率、操作等来决定页面怎么显示，解决分辨率适配问题

布局-重置默认样式

• 很多元素都有默认样式，例如h1~h6有上下margin，且字体加粗，超链接默认的文字颜色和下划线、p元素的上下margin等
• 在早期，元素的默认样式能够快速的绘制网页，但是如今网页的设计越来越复杂，内容越来越多且精细，这些默认样式会给绘制网页带来一定麻烦，而且这些默认样式在不同的浏览器上呈现出来的效果也不一样，所以我们需要重置这些默认样式

方案一 使用全局选择器

* {
  margin:0;
  padding:0;
}

此方法一般在简单案例中使用，实际开发中不使用，因为*选择的所有元素，而并不是所有的元素都有默认样式，而且所有的默认样式要重置的效果不一样，且重置的时候有时候可能需要对元素做特定的处理

方案二 reset.css

选择到具有默认样式的元素，清空其默认的样式,经过reset后的网页，可以比如成一张白纸，开发可以根据设计稿，精细的添加具体的样式,每个公司几乎都有自己定制的适合自己的reset.css，其实就相当于一个css文件中,使用元素去选中，设置其样式

方案三 Normalize.css

• Normalize.css是一种新方案，在清除默认样式的基础上,保留了一些有价值的默认样式
• Normalize.css官网地址

和reset.css相比，Normalize.css的优点

• 保护了有价值的默认样式,而不是完全清除他们,例如一个h1标签，可能火狐浏览器边距是10，谷歌是8，Normalize.css会设置一个统一的边距，保持一致，而不是直接清除为0
• 为大部门HTML元素提供一般化样式
• 新增对HTML5元素的设置
• 对并集选择器的使用比较谨慎,有效避免调试工具杂乱
• 和reset.css相比，更加的文虎，可以根据实际情况选择使用