CSS浮动与CSS定位装饰 Day3

最新推荐文章于 2025-05-19 18:24:15 发布

nefu_zth

最新推荐文章于 2025-05-19 18:24:15 发布

阅读量494

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/qq_46274219/article/details/128374004

版权

前端专栏收录该内容

4 篇文章

订阅专栏

结构伪类选择器

结构伪类公式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>

    <style>
        li:nth-child(4n){
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
    </ul>
</body>
</html>

伪元素（通过CSS模拟标签通常用来装饰非重要的地方）

标准流

浮动（让块级元素能完美的在一行内排列）

由于浏览器在处理两个行内块级元素或者行内元素的时候如果源码的标签换行书写会出现缝隙，这个缝隙并不是浏览器自带的或者是外边距，是换行书写导致的如果都放到一行写的话并不现实。所以要使用浮动来解决。

浮动元素具备行内块元素的特点而且源码换行不会产生缝隙

如果父级宽度不够子代会自动换行再浮动也没用

CSS书写顺序（为了追求浏览器效率）

浮动/display
盒子模型：margin、padding、border、宽度高度背景色
文字样式

清除浮动

父子级标签，子代浮动的同时父代没有设置高度会使后面的标签受到影响。如果开发的时候无法直接给父代高度的同时规避风险可以使用额外标签法

额外标签法（轻松清除浮动）

单伪元素清除法

双伪元素清除浮动同时能很好的解决塌陷问题（坑爹现象）

overflow清除浮动

图片垂直对齐方式

<style>
        img{
            vertical-align: middle;
        }
    </style>

CSS定位装饰（主要作用是让块级元素折叠）

网页常见布局方式

定位的应用场景

使用定位的步骤（所谓静态定位就是默认值不定位）

左右、上下各选一个就行

相对定位（相对于自己原来的位置进行移动可以压到其他的标签上面并且可以保留自己原有的位置通常以左边、上边的偏移量优先生效）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            position: relative;
            left:100px;
            top: 200px;

            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <div class="box"></div>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</body>
</html>

绝对定位（具备行内块特点、在一行内共存且宽高生效）（绝对定位逐层寻找已经定位的父级元素如果都没定位就根据浏览器可视区域进行绝对定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            position: absolute;
            left:100px;
            top: 200px;

            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <div class="box"></div>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
    <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
</body>
</html>

通常子元素用绝对定位父元素使用相对定位。也叫作子绝父相

固定定位（具有行内块特点）

元素的层级关系

默认情况下，定位的盒子。代码写在后面的会覆盖前面的。

可以通过z-index（默认值是0）来设置显示顺序 z-index的值越大，显示的就越靠上面

装饰（能够完成元素的装饰效果）

基线（浏览器处理行内标签和行内块标签的时候都默认按照文字去解析也就是按照基线去对齐）

文字对齐方式

垂直对齐方式（处理行内块标签和行内块标签对齐/行内块和文字对齐）

光标类型

边框圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 25%;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>