CSS总结7（浮动与定位）

最新推荐文章于 2022-11-26 15:03:35 发布

敏梨

最新推荐文章于 2022-11-26 15:03:35 发布

阅读量173

点赞数

文章标签： css html 定位

本文链接：https://blog.csdn.net/lzwlm53/article/details/113006166

版权

传统网页布局三种方式：

普通流：（默认定义的方式排列）可以让盒子上下排列，垂直的块级盒子显示用标准流布局
浮动：可以让多个块级元素一行显示或左右对齐盒子，多个块级盒子水平显示
定位：最大特点有层叠概念，可以让多个盒子前后层叠来显示，

浮动：

浮动布局注意：父元素排列上下，内部子元素采取浮动排列左右；浮动的盒子只会影响浮动盒子后面的标准流。
由于父盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0，就会影响下面的标准流盒子。
清除浮动的本质就是清除浮动元素造成的影响，清除之后，父盒子会根据子盒子自动监测高度。
why？1.父盒子无高度2.子盒子浮动3.影响下面布局

浮动解决办法：

1.额外标签法：新增一个盒子添加clear，要求标签为块级元素
2.父级添加overflow：overflow：hidden；可清除浮动，但无法显示溢出部分
3.：after（给父级添加），网上复制粘贴
4.双伪元素清除浮动：复制粘贴

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            background-color: #ff0000;
            width: 20px;
            height: 20px;
        }
        
        .two {
            float: left;
            background-color: blue;
            /* float: left; */
            height: 20px;
            width: 20px;
        }
        
        .three {
            float: left;
            background-color: blueviolet;
            height: 20px;
            width: 20px;
        }
    </style>
</head>

<body>
    <div class="one">

    </div>
    <div class="two">

    </div>
    <div class="three">

    </div>
</body>

</html>

定位:

让盒子在某个盒子内移动或固定位置，并且可以压住盒子；
定位=定位模式+边偏移；
通过position：static | relative | absolute | 边偏移：top bottom left right

定位模式：

static：默认，无定位
relative：1.相对于原来位置2.原有位置继续保留
absolute：相对于祖先元素1.无父元素或父元素无定位，以浏览器为准2.如祖先有定位，以最近一级有的为参考3.绝对定位不占位置
粘性定位：sticky（1.以浏览器可视窗为参考2.占有原先位置3.必须添加一个）

一些法则：

子级绝对定位，父级相对定位
子级绝对定位，不占有位置，可以放到盒子任何地方
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局需要占有位置，需加相对定位
fixed固定在浏览器可视区的位置

绝对定位盒子居中显示：

加了绝对定位不能通过添加margin：0 auto水平居中
水平：先left50%（父容器宽度一半）再margin负值盒子半值
垂直：先top50%（父容器宽度一半）再margin负值盒子半值

定位拓展：

行内元素添加绝对/固定定位，可直接设置宽高；
块级元素添加绝对/固定定位，盒子大小为内容大小（宽也不再是浏览器宽度）
浮动元素不会压住标准流的文字，但是绝对定位会压住；

元素显示与影藏：

让一个元素在页面影藏或显示出来
display：block（显示）| none（影藏，且不占有原有位置）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .tb-promo {
            position: relative;
            /* 子绝父相 */
            width: 1080px;
            height: 747px;
            background-color: pink;
            margin: 100px auto;
        }
        
        .prev {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        /* 并集选择器可以集体声明相同样式 */
        
        .prev,
        .next {
            position: absolute;
            /* 绝对定位的盒子垂直居中 */
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
            color: cornsilk;
            text-decoration: none;
        }
        
        .next {
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        
        .promo-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 17px;
            background-color: pink;
            border-radius: 7px;
        }
        
        li {
            list-style: none;
        }
        
        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }
        
        .promo-nav .selected {
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="123.jpg">
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
        <ul class="promo-nav">
            <li class="selected">
            </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

敏梨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结7（浮动与定位）

传统网页布局三种方式：普通流：（默认定义的方式排列）可以让盒子上下排列，垂直的块级盒子显示用标准流布局浮动：可以让多个块级元素一行显示或左右对齐盒子，多个块级盒子水平显示定位：最大特点有层叠概念，可以让多个盒子前后层叠来显示，浮动：浮动布局注意：父元素排列上下，内部子元素采取浮动排列左右；浮动的盒子只会影响浮动盒子后面的标准流。由于父盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0，就会影响下面的标准流盒子。清除浮动的本质就是清除浮动元素造成的影响，清除之后，父
复制链接

扫一扫