07-CSS浮动

最新推荐文章于 2024-05-22 19:36:03 发布
最新推荐文章于 2024-05-22 19:36:03 发布
阅读量67 收藏
点赞数
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44431329/article/details/131368321
版权

1、结构伪类选择器

1、作用：结构伪类选择器的作用与优势

  1. 作用：根据元素在HTML中的结构关系查找元素
  2. 优势：减少对于HTML的依赖，有利于保持代码整洁
  3. 场景：常用于查找某父级选择器的子元素

2、结构伪类选择器

image.png
结构伪类选择器中的n可以组成常见的公式
image.png
代码

<!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>
        li:first-child{
            /* 选中第一个 */
            color: red;
        }
        li:last-child{
            /* 选中最后一个 */
            color: green;
        }

        li:nth-child(3){
            /* 选中第三个 */
            color: aqua;
        }

        li:nth-last-child(1){
            /* 选中倒数第一个 */
            color: antiquewhite;
        }
    </style>
</head>
<body>

    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
    
</body>
</html>

展示
image.png

2、伪元素

作用：伪元素一般页面中的非主体内容可以使用伪元素
区别

  1. 元素：HTML设置的标签
  2. 伪元素：由CSS模拟出来的标签效果

种类：
image.png
注意点：

  1. 必须设置content属性才能生效
  2. 伪元素默认是行内元素

3、标准流

1、标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
2、常见的标准流排版规则：

  1. 块元素：从上往下，垂直布局，独占一行
  2. 行内元素或行内块元素，从左往右，水平布局，空间不够自动折行

4、浮动

1、浮动的作用

  1. 早期图文环绕

image.png

  1. 现在的作用：网页布局

image.png

2、浮动的代码

属性名效果
float:left左浮动
float:right右浮动

3、浮动的特点

  1. 浮动的元素会脱离标准流，在标准流中不占位置，相当于飘到空中
  2. 浮动元素标准流高半个级别，可以覆盖标准流中的元素
  3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素有特殊的显示效果
    1. 一行可以显示多个
    2. 可以设置宽高
  5. 注意点
    1. 浮动的元素不能通过text-aligen:center或者margin:0 auto

4、浮动的案例

  1. 需求：使用浮动，完成设计图中布局效果

image.png

  1. 需求：使用浮动，完成设计图中的布局效果
<!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;
        }
        .head{
            width: 100%;
            height: 40px;
            background-color: #333333;
        }
        .box{
            width: 1226px;
            height: 560px;
            background-color: yellow;
            margin: 0 auto;

        }
        .box ul{
            list-style: none;
        }
        li:first-child{
            display: block;
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;

        }
        li:nth-child(2){
            display: inline-block;
            height: 460px;
            width: 234px;
            background-color: #ffa500;

        }
        li:nth-child(3){
            display: inline-block;
            height: 460px;
            width: 992px;
            background-color: #87ceeb;
            float: right;

        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

image.png

<!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;
        }
        div{
            width: 1235px;
            height: 614px;
            margin: 0 auto;

        }
        ul li{
            list-style: none;

        }
        .box{
            display:inline-block;
            width: 234px;
            height: 614px;
            background-color: #800080;
            overflow: hidden;
            float: left;
            margin-top: 14px;

        }
        li:nth-child(n){
            display:inline-block;
            width: 234px;
            height: 300px;
            float: right;
            background-color: #87ceeb;
            margin-top: 14px;
            margin-left: 14px;
        }
        li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <div class="box"></div>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
</body>
</html>32
  1. 网页导航案例

image.png

<!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;
        }
        a{
            text-decoration: none;
            color: aliceblue;
            display: inline-block;
            width: 80px;
            height: 50px;
            background-color: #ffc0cb;
            font-size: 16;
            float: left;
            line-height: 50px;
            text-indent: 1em;
        }
        a:hover{
            background-color: #008000;
        }
    </style>
</head>
<body>
    <a href="">新闻1</a>
    <a href="">新闻2</a>
    <a href="">新闻3</a>
    <a href="">新闻4</a>
    <a href="">新闻5</a>
    <a href="">新闻6</a>
    <a href="">新闻7</a>
    <a href="">新闻8</a>
    <a href="">新闻9</a>
</body>
</html>

4、清除浮动

1、为什么要清除浮动

  1. 如果子元素浮动了，父级没有高度，此时子元素不能撑开标准流的块级元素。因为子元素浮动后脱标后不占位置

展示
image.png
2、解决浮动带来的影响

  1. 直接设置父元素的高度
    1. 优点：简单粗暴
    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>
        .top {
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
  1. 额外标签法
    1. 在父元素内容的最后添加一个块级元素
    2. 给添加的块级元素设置clear:both
    3. 缺点会在页面添加额外的标签，会让页面的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>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
  1. 单伪元素清除法
    1. 补充写法 是为了兼容性来考虑的，把标签进行隐藏

image.png

<!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>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
  1. 双伪元素清除法
    1. 把盒子转为表格的显示模式
    2. 最后一行代码才是清除浮动的标签
    3. clerafix::before 为了解决外边距塌陷问题
    4. clerafix::after 中的display:table 也是为了解决外边距塌陷

image.png

<!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>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }
        .clearfix::after{
            clear: both;

        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
  1. 清除浮动可以使用overflow:hidden
    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>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            overflow: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
      
        
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top ">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
孙小明的测试修炼手册
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS-盒子浮动
fcc627的博客
04-19 4442
文章目录一、浮动导读1.1 什么是浮动1.2 浮动特性1.3 网页布局准则二、清除浮动2.1 清除浮动的本质2.2 消除浮动影响（副作用）的方法 一、浮动导读 1.1 什么是浮动 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框边缘 语法： 选择器 { float ： 属性值 ；} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 1.2 浮动特性 ①设置了浮动（float）的元素最重要特性：
CSS-浮动
JINGJID的博客
04-09 1727
1.display display的用法： block:块元素 inline-size: 行内元素 inline-block：是块元素，但可以内联，在一行 none：消失
CSS进阶-浮动
voiley的博客
12-28 88
CSS的浮动引入篇
04-css浮动&边距
CapejasmineY的博客
08-05 809
CSS元素浮动、清浮动、内外边距详解
CSS--浮动
weixin_42584834的博客
11-28 823
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置。5.如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移。4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。1.浮动元素会完全脱离文档流，不再占据文档流中的位置。所以元素下边的还在文档流中的元素会自动向上移动。2.设置浮动以后元素会向父元素的左侧或右侧移动。
CSS - 浮动布局（float）
热门推荐
伏城之外的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
CSS-浮动与定位
花城的博客
08-28 4675
CSS浮动. 父标签的塌陷问题及解决方法、溢出属性、CSS定位. 定位方法. 修改位置. 是否脱离文档流、z-index属性、透明度
CSS 浮动
m0_52861684的博客
08-28 4944
CSS浮动。
CSS浮动
『愚』的博客
11-05 4950
CSS浮动浮动的特性float属性三个div都不浮动第一个div浮动第二个div浮动三个div都浮动浮动的父子关系浮动影响父层盒子高度overflow属性溢出处理清除浮动 浮动的特性 1.浮动主要用于使得div脱离标准文档流，生成多列布局 2.浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素） 3.浮动元素支持所有的css样式 、内容撑开宽高 、多个元素设置浮动，宽度足够的话，会排在一行 、脱离文档
CSS 浮动(Float)-清除浮动（Clear）
qq_52499703的博客
06-22 1764
1.浮动的作用： 用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。 2.float属性可以设置以下值之一： left 元素浮动到其容器的左侧 right 元素浮动在其容器的右侧 none 元素不会浮动（将显示在文本中刚出现的位置）。默认值。 inherit - 元素继承其父级的 float 值.........
Day06-CSS布局-浮动
07-10
Day06-CSS布局-浮动
CSS-清除浮动
01-13
从别人博客看来的，整理成了PPT，分享下吧，感觉挺好懂的
浅谈CSS浮动的特性
09-24
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。这篇文章主要介绍了浅谈CSS浮动的特性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 关于浮动
09-25
浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。
css浮动，左右浮动和去除浮动
11-12
浮动f
CSS浮动（CSS从入门到精通学习第四天）
最新发布
m0_49067926的博客
05-22 1004
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
前端已死? Bootstrap--CSS&组件
金灰的博客
05-14 1116
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多。通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。(这里的屏幕大小 是为了在前端显示的时候更好看,显示的更全.)用的时候href引用一下就行(link标签)( - 后面可加数字,总共12份就行.)--分的份数加起来是12就行了.v5--里面的图标更多.
three.js官方CSS2DRender案例学习
hemiaoyuan1989的专栏
05-18 697
CSS2DRender官方有两个案例CSS2DRenderer 是一个附加组件，必须显式导入。CSS2DObject的实例中包含Dom元素。当然引入这个的同时，同样的引入three，OrbitControls。
CSS+vue.js
weixin_56316833的博客
05-19 264
p {/*设置字体颜色*/color: red;/*设置字体大小*/
html-css-javascript面试题
08-31
5. CSS是什么？它的作用是什么？ 6. 请解释一下CSS盒模型。 7. 什么是浮动（float）？如何清除浮动？ 8. 请解释一下响应式设计（Responsive Design）。 9. JavaScript是什么？它的作用是什么？ 10. 请解释一下变量...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值