【CSS从入门到入土系列】—— 浮动、元素转换、定位专题

浮动

1.浮动的概念？
可以理解为将某一部分漂浮起来，这部分不在不同的文档流中，也称为脱离文档流。
2.浮动的方向？
浮动有向左浮动和向右浮动两种形式
3.浮动的应用：
可以实现文字环绕（图片）效果、可以实现多个版块横向排列。
4.css通过float属性来完成浮动。

left  向左浮动
right 向右浮动

5.为了更好的显示浮动的效果，我们先设置三个大小相同颜色不同的版块。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
/*在style标签中添加以下样式*/
<style>
        .{
            margin:0;
            padding:0;
            
        }
        .box1{
            width: 20px;
            height: 50px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 50px;
            background-color: green;
        }
        .box3{
            width: 200px;
            height: 50px;
            background-color: blue;
        }
</style>

• 此时的布局情况如下：
  
• 为第一个版块添加向右浮动时：
  

脱离文档流：对于某个设置浮动的版块，会浮动到指定的方向，相当于脱离了浏览器，但浏览器是不允许存在空位置的，所以下面的版块会进行补位，就出现了这种情况。

• 为第一个版块添加向左浮动时：
  
  可以看出：向左浮动和向右浮动效果是不同的，但为什么会出现这样的现象呢？
  对于向右浮动根据脱离文档流的概念很好理解，向左浮动的情况我推测：下面的版块向上移动，浏览器认为向左浮动的版块不存在，但实际上是存在的，所以第一个红色版块覆盖掉了绿色的版块。
  为了验证这种猜想，我将绿色版块的宽和高都调大，如果能显示出一部分的绿色版块，那么就得以验证猜想。

猜想得证

6.当下面的兄弟元素为文本时，对上面的元素进行浮动时，并不会覆盖文本。【做文字环绕图片效果】
7.浮动停止的条件：

（1）当遇到父元素的边界（2）遇到浮动的元素

8.当子元素进行浮动时，父元素可能出现高度塌陷问题（不为父元素设置高度）：子元素没有撑开父元素，导致无法显示父元素的下边界。
那么如何来解决这种问题呢？

方法一：为父元素设置相应的高度 【缺点：当子元素的高度改变时，父元素可能要重新设置高度】
方法二：通过溢出隐藏来解决浮动的影响
overflow:hidden/auto;
【缺点：当绝对定位元素如果一部分溢出了父元素，那么溢出的这部分就会被隐藏】
方法三：万能清除浮动法
为含有浮动版块的父元素添加属性：clear:both;both可以替换为left、right就代表去除左浮动、右浮动。

最常用的方法是clear结合伪类选择器使用：

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

• 为需要的父元素添加 clear-fix 类名即可，如果存在多个类名用空格分开。

8.对于一些常用的CSS样式，我们可以创建一个单独的CSS文件，用外部样式表引入需要的CSS样式。

/*去除内外边距*/
*{
    margin:0;
    padding:0;
}
/*去除图片基线对齐*/
img{
    vertical-align:middle;
}
/*去除列表标识符*/
li{
    list-style:none;
}
/*去除超链接下划线*/
a{
   text-decoration:none;
}
/*设置清除浮动的类名*/
.clear-fix{
    content:"";
    diplay:block;
    clear:both;
}

• 在HTML的头部标签中添加：<link rel="stylesheet" href="css文件路径">

元素转换

1. 众所周知：元素类型分为行内元素与块级元素两种。
2. 如何实现元素的转换呢？
   通过display关键字对元素进行类型转换

block 将元素显示为块级元素
inline 将元素显示为行内元素
inline-block 将元素显示为行内块级元素

3.元素类型转换又有什么应用呢？
（1）block 主要应用于不能设置宽高的行内元素
（2）inline 一般不会用到，暂时不了解有什么实际的作用
（3）inline-block 可以代替悬浮制作一些横向布局的东西。

4.切换页码栏的具体设置方法
当使用元素类型转换时，转换为行内块元素，如果为超链接，彼此之间默认存在一个回车，效果如下。在代码压缩时，这个回车可能消失，所以我们要提前去掉这个初始化的间距进行自定义。

通过将父元素的字体大小设置为零，因为字体大小的属性是可以被继承的，所以我们需要为子元素重新设置字体大小。

定位

1.定位，顾名思义指确定元素在整个浏览器的位置。
2.定位分为一下三种：相对定位、绝对定位、固定定位。
3.浅谈一下这三种定位的形式：
（1）相对定位

position:relative;

参考物：元素的初始位置
不脱离文档流：在元素移动位置后，原来的位置仍然占据空间
偏移距离：以元素中心为基准，向上下左右四个方向移动。
top 参考底部向下移动指定像素值的距离（可以为正值，也可以为负值）
bottom、left、right 同理

（2）绝对定位

position:adsolute;

参考物：父元素中具有position属性的元素作为参照物，没有会继续向爷爷辈找，依次类推，如果没有找到，就会参考浏览器空白文档区域定位。
脱离文档流
偏移距离：
top 参照物的顶部距离元素的顶部
bottom、left、right、同理

（3）固定定位

position:fixde;

参照物：浏览器中的空白区域
会脱离文档流
偏移距离： top 参照物的顶部与元素的顶部的距离 bottom、left、right
“同理”

• 应用与默写固定在浏览器页面中的版块，不随页面滚动而相应的进行位置变化。

4.对定位的元素设置先后顺序

z-index:number;

• 调整几个定位的元素前后顺序，一般情况下就是这几张图片之间有交叠部分，通过数值的大小来确定前后顺序，数值大的在前面

5.CSS通过定位实现块级元素居中效果
（1）方法一：

此处以父子容器为例，为父子容器设置大小，将容器的margin属性值设置为auto，对于文本内容我们知道，将左右外边距设置为auto可以让文本内容居中，对于块级元素是没有作用的。

margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;

• 就实现了块级元素在父元素的容器中居中的效果。
• 应用前提：子元素的大小小于父元素的大小

（2）方法二：

为父容器添加属性"position:relative"，为子元素设置绝对定位

position: absoluate;
top: 50%;
left: 50;
margin-left: 自身宽度的一半;
margin-right: 自身高度的一半;

• 这里说明一下left与top调整的作用，设置一个外边距，来移动元素的位置
• 应用前提：要知道子元素的大小