CSS入门学习笔记例题详解（三） - 码农知识堂 - 文章详情页

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显示与隐藏遮罩层
相关阅读:
【软件测试】LoadRunner与JMeter工具安装教程
 Django ORM深度游：探索多对一、一对一与多对多数据关系的奥秘与实践
 GBASE 8C——SQL参考6 sql语法（6）
文件管理功能重构，MeterSphere开源持续测试平台v2.1.0发布
 每日4道算法题——第005天
 python进制和编码
 windows局域网共享文件
 SVG循环滑动效果
 【Spring Cloud】Spring Cloud Oauth2 + Gateway 微服务权限管理方案
 汽车电子中的安森美深力科分享一款高性能车规级芯片NCV7520MWTXG
原文地址：https://blog.csdn.net/m0_47010003/article/details/126915405