前端基础 - float浮动和position定位

float浮动

基础知识

• 会使元素左右移动，但不能上下移动
• 浮动元素碰到另一个浮动元素，浮动停止
• 浮动元素之后的元素将围绕他，之前的不受影响
• 浮动会脱离标准流

语法

• float：left
• float：right

清除浮动

• clear：none | left | right | both

方法一：在浮动元素之后使用一个空元素

    <style>
        .clear {
            clear:both;
        }
    </style>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="clear"></div>

方法二：给浮动元素的父容器添加 overflow：hidden

    <style>
        .box {
            overflow:hidden;
            //兼容低版本浏览器
            zoom:1;
        }
    </style>
    <div class="box">
        <div class="list1"></div>
        <div class="list2"></div>
    </div>

方法三：使用CSS3的 :after 伪元素

    <style>
        .clearfix:after {
            content:'';
            display:block;
            height:0;
            visibility:hidden;
            clear:both;
        }
        //兼容低版本IE浏览器
        .clearfix {
            zoom:1;
        }
    </style>
    <div class="box clearfix">
        <div class="list1"></div>
        <div class="list2"></div>
    </div>

定位position

position属性

• static
• relative
• absolute
• fixed
• sticky
• inherit

1)static

2)relative

box-sizing属性

允许以特定的方式定义匹配某个区域的特定元素

属性

• inherit：规定从父元素继承box-sizing属性
• content-box：在宽度，高度之外绘制元素的内边距和外框
• border-box：通过从已经设定的宽度高度中分别减去内边距和边框的值，才是内容的宽度和高度

        <style>
        .box {
            width: 200px;
            margin: 0 auto;
        }
        .list1 {
            width: 100px;
            height: 100px;
            padding: 10px;
            background-color: blueviolet;
            border: 10px solid black;
            //border-box
            box-sizing: border-box;
        }
        .list2 {
            width: 100px;
            height: 100px;
            padding: 10px;
            background-color: brown;
            border: 10px solid gray;
            //content-box
            box-sizing: content-box;
        }
    </style>
    <div class="box">
        <div class="list1"></div>
        <div class="list2"></div>
    </div>

list1的显示效果如下,内容的宽度会减去padding和border的值

list2的显示效果如下,内容部的宽高度不变，padding和border都加在内容外面

z-index

z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面

• 元素可拥有负的z-index值
• z-index仅仅在定位元素上奏效
  LOy-1588177366923)]

z-index

z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面

• 元素可拥有负的z-index值
• z-index仅仅在定位元素上奏效