HTML笔记（六）CSS 浮动 定位

浮动 定位

Css浮动

1.定义
  定义元素框相对于其正常位置应该出现的位置
2.分类

• 普通流定位
• 浮动定位
• 相对定位
• 绝对定位
• 固定定位

3.浮动定位指
• 将元素排除在普通流之外
• 元素将不在页面中占据空间
• 将浮动元素放置在包含框的左边或者右边
• 浮动元素依旧位于包含框之内
浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。

4、浮动 float:left|right|none;
特点：浮动后排除到文档流以外，在网页中不占据位置。
   浮动是碰到父元素的边框或者浮动元素的边框就会停止，浮动不会重叠。
   浮动没有上下浮动。
    浮动后所有元素转换为块级元素。

5、弹性盒模型
5.1、父元素属性
1)display:flex;
子元素默认水平显示
2)flex-direction: column; //方向
设置子元素垂直排列
3）主轴对齐方式
  justify-content: flex-start; 默认值，居左
  justify-content: flex-end; 居右
  justify-content: center; 居中
  justify-content: space-around; 四周
  justify-content: space-between; 之间

4)侧轴对齐方式
  align-items:stretch 项目拉伸适应容器，默认值
  align-items: flex-start; 居上
  align-items: flex-end; 居下
  align-items: center; 居中

5.2、子元素的属性
flex-grow:number; （所占的比例）
规定项目将相对于其他灵活的项目进行扩展的量。默认值0。

清除浮动

1、属性：clear
值：left、right、both
1)受影响的元素加 clear:both;
2)浮动元素的父元素加overflow:hidden;或者overflow:auto;
3)浮动元素后面加空div clear:both;
4)父元素加height（父元素的高度已知才能用）
5)伪对象法（和加空div）

浮动元素的父元素:after{
                       content:"";
                       display:block; //变成块级的
                       clear:both;
                     }

2、属性display
块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变 。
display常见属性值
1. none：隐藏对象
2. inline：指定对象为内联元素
3. block：指定对象为块元素
4. inline-block：指定对象为内联块元素
5. table-cell：指定对象作为表格单元格，行。 配合vertical-align:使用的多
6. flex：弹性盒

3、visibility:hidden和display:none和opacity:0的区别：
1.visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在
2.display:none 影藏元素，不保留物理空间

例子：Display隐藏引用

<style>
ul li{list-style-type: none; float: left;background-color: #f00;padding: 30px 30px}
ul li a{text-decoration: none;color: black}
.hidden{background-color: black;margin: 35px 0px 0px;display: none}
.hidden li{ float: none;background-color: #00f}
li:hover>.hidden{display: block;}
</style>

<ul>
    <li><a href="#">首页</a>
        <ul class="hidden">
            <li>w</li>
            <li>w</li>
        </ul>
</li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
</ul>

position定位

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
position 定位
属性值：

• 1）静态定位 默认值 static

• 2）相对定位 relative
  相对于自己原位置定位，定位后原位置保留
  配合top，bottom，left，right使用

• 3)绝对定位 absolute
  绝对定位相对于已经定位的父元素定位，如果父元素没有定位，逐级往上找，最后相对于body定位。
  一般建议给父元素加一个相对定位position:relative;
  绝对定位后原位置不保留
  配合top，bottom，left，right使用

• 4)固定定位 fixed
  相对于浏览器窗口定位
  定位后原位置不保留
  配合top，bottom，left，right使用

• 5)堆叠顺序
  z-index:number;
  默认值为1
  取值越大，越往上
  可以取负值

子元素在父元素中水平垂直居中

1.弹性盒

   .container{
        width: 500px;
        height: 500px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }

2、表格法

  .container{
        width: 500px;
        height: 500px;
        background-color: pink;
        display: table-cell;
        vertical-align: middle;
    }
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 0 auto;
    }