css知识点3

已于 2023-10-27 16:14:30 修改
阅读量59 收藏
点赞数 1
文章标签： css 前端
于 2023-10-17 14:41:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57689217/article/details/127194799
版权

1.css布局的三种机制

网页布局的核心就是用css来排放盒子的位置
css提供了3中机制用来设置盒子的摆放位置，分别普通流（标准流），浮动流和定位流；

  1. 普通流
    块级元素独占一行，从上往下顺序排列
    行内元素会按照从左到右的顺序顺序排列，碰到父元素的边缘自动换行
  2. 浮动流
    让盒子从普通流种漂浮起来，主要作用是让多个块级元素同行显示
  3. 定位流
    将盒子定义在浏览器可视区域的任意位置

2.浮动流

  1. 为什么需要学习浮动？
    块级元素同行显示，如果使用display：inline-block进行同行存在一个bug，bug就是会有空格间隙
    而浮动主要作用是让多个块级元素同行显示

  2. 浮动的作用
    1.让多个块级元素同行显示
    2.可以实现盒子的左右对齐
    3.最早浮动使用来控制图片的，实现文字绕排效果
    （前面不理解看后面有说明）

  3. 语法

    float: left right none;// 浮 漏 特
  1. 浮动口诀之 浮 漏
    漂浮在普通流的上面 脱离文档流,俗称脱标
     .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
    .box2{
        width: 200px;
        height: 200px;
        background-color: red;
    }

总结：只要有盒子设置了浮动则脱离文档流，不占原本标准流的位置

  1. 浮动口诀之 特
    浮动有个特性：改变元素的属性display
    任何元素都可以浮动，只要被浮动了的元素则直接变成行内块元素

  2. 浮动的应用

    1. 浮动元素和父元素的关系
    • 子盒子的浮动参照父元素对齐
    • 不会超过父元素的边框，也不会超过父元素的内边距
    1. 浮动元素与兄弟元素的关系
      当前盒子为浮动盒子
      在一个父盒子中，如果前一个兄弟盒子是
      1.浮动的，那么当前盒子会与前一个盒子顶部对齐，跟着前一个兄弟盒子浮动(float值一样的)
      2.是普通流的，那么当前盒子会在前一个盒子的下方

  3. 清除浮动

    1. 为什么需要清楚浮动？
      因为父盒子在很多情况下不方便给高度，但是滋贺子浮动后就不占位置，则父元素的高度就会成为0，就影响了下面的标准流盒子的位置
    2. 清除浮动
        clear : left right both;

    方法：
    1.额外标签法：在浮动元素的末尾也就是同级，添加一个空的块级元素，给这个元素设置清除浮动的css样式即可
    优点：通俗易懂，书写方便
    缺点：添加了许多无意义的标签，结构化差
    2.在浮动元素的父元素上添加overflow即可，至于overflow的值都可以
    优点：代码简洁，不存在无意义标签
    缺点：专人专事
    3.伪元素法(常用)
    ::after 在标签的最后添加一个子元素
    ::before 在标签的最前面添加一个子元素

浮动带来的三个问题

1.被浮动元素所覆盖
<!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>Document</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
            
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

在这里插入图片描述

2.子元素和父元素重叠
<!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>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        /* .clearfix::before{
            content: '';
            display: table;
            
        } */
        .div2{
            /* 
            子元素和父元素外边距重叠 同时下移
            */
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="div1 clearfix">
        <div class="div2"></div>
    </div>
</body>
</html>

在这里插入图片描述

3.父元素里面有个浮动子元素
<!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>Document</title>

    <style>
        .div1{
            border: 10px solid yellowgreen;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

在这里插入图片描述

以上问题解决方案(解决高度塌陷)一：

<!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>Document</title>
    <style>
        /* 
        BFC(Block Formatting Context)块级格式化环境
            -BFc是一个css中的一个隐含的属性，可以为一个元素开启BFC
                开启BFC该元素会变成一个独立的布局区域
            -元素开启BFC后的特点:
                1.开启BFC的元素不会被浮动元素所覆盖
                2.开启BFC的元素子元素和父元素外边距不会重叠
                3.开启BFC的元素可以包含浮动的子元素


        - 可以通过一些特殊方式来开启元素的BFC:
            1、设置元素的浮动(不推荐)
            2、将元素设置为行内块元素(不推荐)
            3、将元素的overflow设置为一个非visible的值
                -常用的方式为元素设置 overflor:hidden 开启其BFC以使其可以包含浮动元素

    */
        .div1 {
            border: 20px solid red;
        /* 
        1、设置元素的浮动(不推荐)
        副作用：下面的会上移
        */
        /* float: left; */
        /* 
        2、将元素设置为行内块元素(不推荐)
        副作用：宽度会缺失
        */
        /* display: inline-block; */
        /* 
        3、将元素的overflow设置为一个非visible的值
        有副作用但很小
        */
            overflow: hidden;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 
            高度塌陷的问题:
                在浮动布局中,父元素的高度默认是被子元素撑开的,
                    当子元素浮动后，其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的
                    高度,导致父元素的高度丢失
                父元素高度丢失以后，其下的元素会自动上移,导致页面的布局混乱
                所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理
        */
            /* 
        float: left;
        这样就发生了高度塌陷
        */
            float: left;
        }

        .div3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>

</head>

<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <div class="div3"></div>
</body>

</html>

以上问题解决方案(解决高度塌陷)二——clear：

<!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>Document</title>
    <style>

        .div1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
        .div2{
            width: 100px;
            height: 200px;
            background-color: red;  
            float: right;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            /* 
            由于box1的浮动,导致box3位置上移
                也就是box3收到了box1浮动的影响，位置发生了改变

            如果我们不希望某个元素因为其他元素浮动的影响而改变位置,
                可以通过clear属性来清除浮动元素对当前元素所产生的影响
            
                clear
                    -作用:洁除浮动元素对当前元素所产生的影响
                    -可选值:
                        left清除左侧浮动元素对当前元素的影响
                        right清除右侧浮动元素对当前元素的影响
                        both清除两侧中最大影响的那侧
                    原理:
                        设置清除浮动以后，浏览器会自动为元素添加一个上
                            外边距，以使其位置不受其他元素的影响
        */
        clear: both;
        }
        

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

以上问题解决方案(解决高度塌陷)三——伪类：

<!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>Document</title>
    <style>
        .div1{
            border: 20px solid red;
            /* overflow: hidden; */
            /* display: table; */
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /* clear: both; */
        }
        .div1::after{
            content: '';
            display: table;
            clear: both;
        }
        /* 这个可以同时解决高度塌陷和外边距重叠 */
        .clearfix::after,.clearfix::before{
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div1 ">
        <div class="div2"></div>
        <!-- <div class="div3"></div> -->
    </div>
    
</body>
</html>

2. 拓展知识点

  1. 列表样式 list-style: none;

  2. 精灵图（雪碧图）
    就是一张图片上面有很多的小图片
    作用；优化网站的加载速度，提高用户体验
    background-position 去获取位置

  3. icon字体图标
    本质是文字

定位流

小谭の努力
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS知识点总结
weixin_48494427的博客
03-16 2121
CSS知识点总结
CSS 3知识点
m0_53561448的博客
03-15 303
CSS 3的重要知识点
CSS 核心知识点总结
大剑师兰特的GIS世界
05-27 2113
CSS（Cascading Style Sheets，层叠样式表）是用于描述网页文档如何呈现给用户的样式语言。它与HTML一起构成了网页设计的基础。以下是CSS的一些核心知识点归纳总结
html+css知识点总结：
2303_79193185的博客
04-27 1991
css指层叠样式表css定义如何显示html元素样式通常存储在样式表中外部样式表可以极大提高工作效率外部样式表通常存储在css文件多个样式定义可以层叠为一。
css知识点（3）
weixin_47181056的博客
06-25 993
每天收获一点点
html+css知识点总结
06-24
html+css知识点总结
css3笔记知识点总结
06-24
css3笔记知识点总结
CSS知识点汇总.docx
09-01
CSS 知识点汇总 CSS（Cascading Style Sheets）是一种用于描述 HTML 或 XML 文档样式的标记语言。它可以控制文档的布局、颜色、字体、间距等样式。下面是 CSS 知识点汇总： CSS 单位 在 CSS 中，单位是指用来度量...
CSS知识点.xmind
08-30
里面整理了css样式,用思维导图的形式展示了,对学习css的同学们来说更清晰,css知识点整理,欢迎大家来收藏
使用 Tailwind CSS 实现水平和垂直居中对齐的方法
Chloeeeeeeee的博客
08-20 193
使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位
使用css如何获取最后一行的元素？使用css解决双边框问题
希文Gershwin
08-20 1006
我只要知道最后一行中有哪几个元素，然后给最后一行的元素设置就行了但是只能获取到最后一个元素需要知道一排要有几个元素才行。
CSS有趣知识
weixin_42376775的博客
08-20 221
5.分开写：border-top-ldft-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。2.如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角、右下角、左下角。CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。3.如果是个矩形，设置为高度的一半就可以做。
Tailwind CSS的介绍和使用
最新发布
mq1314520_zhl的博客
08-21 321
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。Font Family - TailwindCSS中文文档 | TailwindCSS中文网。
【速览】CSS（更新中）
椰子的职场成长记录
08-20 333
每个 HTML 元素都被视为一个盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。CSS 中的媒体查询（Media Queries）可以根据设备的特性应用不同的样式。CSS 中的样式可以层叠和继承。CSS 提供了多种布局方式，包括浮动（float）、定位（position）、Flexbox、Grid 等。CSS 可以控制文本的样式，包括字体、大小、颜色、行高、对齐方式等。CSS 可以设置元素的背景颜色、背景图像、边框样式、颜色和宽度等。
vue 动态设置每个tab的颜色scss
qq_32555123的博客
08-20 246
vue设置动态tab样式和颜色
响应式Web设计:纯HTML和CSS的实现技巧
m0_66995023的博客
08-20 726
使用百分比单位 (%) 或者相对单位 (em, rem) 定义宽度和高度，使元素能够根据容器大小自动调整。使用相对单位 (em 或 rem) 来设置字体大小，以便它们可以根据父元素或根元素的字体大小自动缩放。通过调整字体大小、颜色和间距来创建清晰的视觉层次，帮助用户更容易地导航和理解页面内容。从最基本的功能开始构建网站，然后逐渐添加更复杂的功能，确保所有用户都能访问基本内容。（1）使用不同的设备和浏览器进行测试，确保网站在各种环境下都能良好工作。（2）利用浏览器的开发者工具来模拟不同的屏幕尺寸和设备。
在scss中如何使用hover(Vue项目)
Rverdoser的博客
08-19 302
/ hover时的背景颜色。属性来启用SCSS。然后可以在样式中定义hover效果。在Vue项目中使用SCSS时，可以在样式标签中添加。属性用于使颜色变化有一个平滑的过渡效果。元素上时，它的背景颜色会变成红色。在这个例子中，当鼠标悬停在。
不同分辨率下vue页面的高度自适应
weixin_72439307的博客
08-19 255
html高度自适应
全面掌握CSS基础与进阶知识点总结
本文档是对CSS（层叠样式表）知识点的详细归纳和总结，旨在帮助学习者系统地理解和记忆CSS基础知识。CSS是用于网页设计和开发中的关键语言，它控制网页元素的外观和布局。 1. **基本格式**： CSS采用三种基本格式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值