• CSS入门学习笔记例题详解（三）

    接上一篇：CSS入门学习笔记例题详解（二）

    一、浮动

    例题：实现效果如图

    在这里插入图片描述

    浮动的特性

    浮动的视频
    例题：
    小米商城浮动设置盒子位置
    小米商城阴影+弹起效果

    二、清除浮动

    2.1 方法1：额外标签法

    因为：一般来说父元素是不给高度的，由它的子元素给撑开，
    下面例题中1和2两个盒子添加了浮动，则这2个盒子会浮动在页面上方，不能撑开div，导致父元素没有高度

    不清楚浮动时的效果如图：
    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .first{
            width: 300px;
            margin:10px auto;
            border:2px solid blue
        }
        .nav1{
            float: left;
            width: 100px;
            height: 40px;
            background-color: aqua;
        }
        .nav2{
            float: left;
            width: 100px;
            height: 40px;
            background-color: orange;
        }
        .footer{
            
            width: 300px;
            height: 40px;
            margin: 2px auto;
            background-color: rgb(17, 16, 16);
        }
    style>
head>
<body>
    <div class="first">
        <div class="nav1">1div>
        <div class="nav2">2div>
    div>
    <div class="footer">div>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    清除浮动：

    在最后一个添加浮动的盒子后面，新增盒子，本例题中最后一个添加浮动的盒子是.nav2，，所以在.nav2后面再添加一个块级元素div，注意必须是块级元素
    css样式如下

    .xx{
	clear:both;
}

    • 1
    • 2
    • 3

    在这里插入图片描述

    2.2 方法2：父元素添加overflow

    可以给父元素添加overflow的属性，将其属性值设置为hidden、auto、scroll
    在这里插入图片描述

    • 该方式，添加overflow：hidden，则子元素超出部分不会显示
      例题：如图多余部分不显示
      在这里插入图片描述

    2.3 方法3：after伪元素

    在这里插入图片描述

    2.4 方法4：before+after双伪元素

    在这里插入图片描述

    三、ps切图

    3.1 方法1： 图层合并

    图片和字体不在同一图层，ctrl+e可以合并两个图层，右键快速导出
    在这里插入图片描述

    3.2 方法2： 切片工具

    视频：切片工具

    四、CSS书写顺序

    在这里插入图片描述

    五、定位（position）

    5.1 定位模式和边偏移

    在这里插入图片描述

    • position ：static；//定位的盒子没有边便宜
      在这里插入图片描述

    5.2 relative 例题

    relative例题：
    不给定位模式和边偏移
    在这里插入图片描述
    加上定位模式和边偏移：
    在这里插入图片描述

    • relative主要加在父元素上，absolute主要加在子元素上，但是子元素的父元素要加上relative定位，才能约束加了absolute的子元素
      在这里插入图片描述
      绝对定位的特点

    5.3 fixed 例题

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    5.4 粘性定位

    在这里插入图片描述

    5.5 定位叠放次序z-index

    在这里插入图片描述

    5.6 绝对的盒子居中

    加了定位的盒子无法用margin：auto来居中

    在这里插入图片描述

    5.6 定位的特殊特性

    在这里插入图片描述

    5.7 浮动不会压住文字，绝对定位会

    在这里插入图片描述
    在这里插入图片描述

    六、其他

    6.1 display隐藏对象

    在这里插入图片描述

    6.2 visibility隐藏

    在这里插入图片描述

    6.3 overflow溢出

    在这里插入图片描述

    6.4 例题

    CSS显示与隐藏遮罩层

  • 相关阅读:
    [Android] AndroidManifest.xml 详解
    [pytorch]关于进行代码构建网络的一点补充内容(会持续补充)
    进程角度和内核角度看进程运行
    java文件上传下载漏洞修复工具类
    PHP自适应小说网站源码深度SEO优化自动采集
    【Database System Concept 7th】Chapter 13读书笔记
    css三大特性
    如何实现流量控制和熔断降级？
    如何在Windows系统中检测和结束运行中的程序(任务管理器显示运行程序可能有bug)
    Unity 接入天气系统
  • 原文地址：https://blog.csdn.net/m0_47010003/article/details/126915405