筱筱学前端Day6

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量328 收藏
点赞数 1
分类专栏： 前端入门学习 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62772655/article/details/123150598
版权

干货1——背景的复合属性

<style>
        /* 
        复合写法：
        1.用空格隔开
        2.顺序可以换
        3.可以只取一个值，放在后面能覆盖前边的值
        4.background-size属性只能单独用
        5.位置诸如center top要挨着
        */
        div{
            width:600px;
            height: 600px;
            background: yellow url(008/32.jpg) no-repeat fixed;

        }
    </style>

干货2——浮动属性
属性一览表（图源自网络）：
在这里插入图片描述
浮动的情况一览（图源自网络）：
在这里插入图片描述

举例如下：

<!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>
        div{
            width: 100px;
            height: 100px;
        }
        .red{
            background: red;
        }
        .blue{
            background: blue;
        }
        .yellow{
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
</body>
</html>

没加float时效果如下：
在这里插入图片描述
在red类中加上左浮动

.red{
            background: red;
            float:left;
        }

效果如下：
在这里插入图片描述
若在red类上加上向右浮动，效果如下：
在这里插入图片描述

若将三个类都加上左浮动/右浮动（右浮动和左浮动效果不一样，但原理差不多）

        .red{
            background: red;
            float:left;
        }
        .blue{
            background: blue;
            float: left;
        }
        .yellow{
            background: yellow;
            float: left;
        }

效果如下：
在这里插入图片描述
若对三个类大小设置如下：

        .red{
            background: red;
            float:left;
            width: 1000px;
            height: 1000px;
        }
        .blue{
            background: blue;
            float: left;
            width: 600px;
            height: 600px;
        }
        .yellow{
            background: yellow;
            float: left;
            width: 300px;
            height: 300px;
        }

效果如下（图太大了这是截取的一部分）：
在这里插入图片描述
若对三个类大小设置如下：

        .red{
            background: red;
            float:left;
            width: 1000px;
            height: 1000px;
        }
        .blue{
            background: blue;
            float: left;
            width: 400px;
            height: 400px;
        }
        .yellow{
            background: yellow;
            float: left;
            width: 300px;
            height: 300px;
        }

效果如下（图太大，未截全）：
在这里插入图片描述
若在第二类控制的div中加上文字：

<div class="red"></div>
<div class="blue">大家好</div>
<div class="yellow"></div>

效果如下：
在这里插入图片描述

  • 清浮动

在这里插入图片描述
法一，直接清：

<!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>
        .box1, .box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            clear:left;
            /* left代表禁止左浮动，若为right则代表禁止右浮动
            若为both代表禁止左右浮动，若为none代表允许浮动
            */
        }
    </style>
</head>
<body>
    <div>
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

    <div class="box"></div>
</body>
</html>

这样是可以达到阻止浮动的效果的：
在这里插入图片描述
法二，写固定高度 ：

<!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>
        .box1, .box2{
            width: 200px;
            height: 200px;
            float: left;
        }
        .box1{
            background-color: yellow;
        }
        .box2{
            background-color: blue;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .container{
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

    <div class="box"></div>
</body>
</html>

法三，当前浮动元素后面补一个盒子，不设置宽高，clear:both：

    <div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div style="clear: both;"></div>
    </div>

法四，overflow:hidden,用bfc让浮动元素计算高度：

.container{
            overflow:hidden;
}

干货3——盒子模型
形象的盒子（图源网络）：
在这里插入图片描述

  • 内边距

举例与重点如下：

<!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>
        div{
            width: 500px;
            height: 300px;
            background-color: red;
            text-align: justify;
            /* 使左右与边框紧密贴合 */
            /* 
            内边距：
            1个值，4个方向一样
            2个值，上下，左右
            3个值，上，左右，下
            4个值，上，右，下，左
            */
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Voluptatum recusandae suscipit exercitationem ullam officia, ratione, 
        autem nostrum veniam rerum dolore in mollitia cum aspernatur
         consequuntur nihil, sint asperiores. Aliquam, repellendus.
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
补充：

<!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>
        /* 
        1.背景色可以蔓延到内边距
        2.可以设置单一方向边距
        padding-方向：top bottom left right
        */
        div{
            width: 300px;
            height: 300px;
            /* padding: 30px 0 0 0; */
            padding-top: 30px;
            background: yellow;
        }
        ul{
            padding-left: 0;
            /* 不可以是负数喔 */
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Quaerat et nesciunt soluta perspiciatis alias culpa temporibus, 
        facilis voluptate sint nam, ullam quos accusamus vel 
        ducimus vitae! Velit illum laborum quod.
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
或者用通配符选择器：

       *{
            padding: 0;
        }
  • 边框
    举例与重点如下：
<!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>
        /* eg:border:1px solid gray */
        .box1{
            width: 100px;
            height: 100px;
            background: blue;
            border: 10px dotted red;
            /* 样式：solid(实线) double(双实线) dashed(虚线) dotted(圆点) */
            /* 背景色也能蔓延到边框 */
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
            border-top: 5px solid red;
            border-left: 10px dashed yellow;
        }
        .box3{
            width: 100px;
            height: 100px;
            background: green;
            border-width: 10px 20px 30px 40px;
            border-color: yellow blue black rebeccapurple;
            border-style: solid;
            /*border
            
              border-width
              border-style
              border-color
            
            */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果如下：
在这里插入图片描述

  • 外边距
    举例与重点如下：
<!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>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background:red;
            border: 1px solid yellow;
            margin-left: 10px;
        }
        .box2{
            background: green;
            border: 1px solid blue;
        }
        .box3{
            background: blueviolet;
            margin: 0 auto;
            /* auto auto竖向并不会居中 
               0可以换成别的数值的px效果会有不同           
            */
        }
        /* 
        1.margin-方向：四个方向
        2.背景色没有蔓延
        3.*{margin:0}
        4.外边距可以有负值
        5.横向居中： margin:0 auto;
        */
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

    <div class="box3"></div>
</body>
</html>

效果如下：
在这里插入图片描述
外边距的特性：
当只给一个盒子设置外边距：

<!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>
        .box1, .box2{
           width: 200px;
           height: 200px;
        }
        .box1{
            background: red;
            margin-bottom: 100px;
        }
        .box2{
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

效果如下：
在这里插入图片描述
此时若给另一个盒子也加上外边距：

        .box1{
            background: red;
            margin-bottom: 100px;
        }
        .box2{
            background: blue;
            margin-top: 50px;
        }

效果不会发生任何改变。
可见：
当两个盒子为兄弟关系时：
垂直方向：两个盒子的间距取两盒子中外边距较大的值。
水平方向：两个盒子的间距是两盒子外边距之和。
当给“子”盒子加外边距时：

<!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>
        .box1{
            width: 500px;
            height: 500px;
            background: yellow;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
可以发现“子”盒子的外边距居然没起作用，而是让“父”盒子外边距增大了。
那么如何能让红色盒子在黄色盒子中下移100px呢？
方法有四，法一：
把子margin-top==>父的padding-top,再调整父的高度height

<!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>
        .box1{
            width: 500px;
            height: 400px;
            background: yellow;
            padding-top: 100px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

得到了预期效果：
在这里插入图片描述
法二：给父盒子设置边框，子盒子设置margin.

<!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>
        .box1{
            width: 500px;
            height: 500px;
            background: yellow;
            border: 1px solid transparent;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

也可得到预期效果。
法三:加浮动

<!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>
        .box1{
            width: 500px;
            height: 500px;
            background: yellow;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
            margin-top: 100px;
            float: left;
            /* 加在上边也行 */
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

也可得到预期效果。
法四：父盒子加overflow:hidden（BFC相关），子盒子写margin

<!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>
        .box1{
            width: 500px;
            height: 500px;
            background: yellow;
            overflow:hidden;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

以上内容是筱筱根据b站视频总结而成，学习前端的第六天，加油٩(๑òωó๑)۶

慕筱筱
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
筱筱学前端Day2
weixin_62772655的博客
02-07 479
本博客包含特殊符号介绍，div和span标签，列表，快捷键，图片标签的路径和属性介绍，超链接标签等前端入门内容。
筱筱学前端Day4
weixin_62772655的博客
02-23 240
本博客包含了CSS样式表，标签选择器，类选择器，id选择器，通配符选择器，群组和后代选择器，伪类选择器，选择器的权重等前端基础内容。
筱筱学前端Day7
weixin_62772655的博客
03-04 196
本博客包含了对溢出属性和元素显示类型的详细介绍，属于前端较基础内容。
筱筱学前端Day5
weixin_62772655的博客
02-26 255
本博客包含了CSS文本属性，如大小和字体，颜色，加粗倾斜，水平对齐，行高，首行缩进，字间距，文本修饰，文字简写等，还有列表属性，背景属性，背景图片大小，背景的固定和滚动等前端基础内容。
筱筱学前端Day1
weixin_62772655的博客
02-05 552
本篇文章介绍了web的组成部分，HTML的基本语法与常用标签，VScode插件推荐，两个入门代码实例等前端基础内容。
筱筱学前端Day3
weixin_62772655的博客
02-21 186
本博客包含table表格的基本结构，table表格的相关属性，表格合并，表单标签等前端基础内容。
小程序学习知识点day1
weixin_62772655的博客
04-04 51
11.“./”是当前目录，../是找上一级，这两个都是相对路径。12.用id和超链接结合可以实现在一个网页点击后跳转到网页的某个地方。17.要让i标签，b标签等内联元素标签独占一行只需要在style中加上。点开超链接时会新开一个网页展现新内容而不会改变原有网页。1.如果当前元素的子元素小于或超出父元素，默认情况下也。提供全部四个参数值，按上，右，下，左的顺序作用于四边。前两个是让重影字向右向下移，最后一个是阴影的颜色。3.块级元素总是在新行上开始。16.如下这样可以设置选项，元素大小的，而margin。
小程序学习知识点day2
weixin_62772655的博客
04-09 67
定义一定要放在a:link、a:visited的后面，正确的顺序：a:link、a:visited、a:hover、a:active。position属性用来设置元素在页面中的位置，通过这个属性可以把任何属性放置在认为合适的地方。这时只需要给下边的东西设置内边距等于上边的东西的高度它就可以回到原来的位置上。在有浮动的两个块的父块上加上class="clearfloat"即可。在需要居中的div中加上class="flex center"即可。"控制居中，居左，居右等。：选择器设置访问过的页面链接的样式。
手写一个日历，记录签到-vue3
weixin_67255581的博客
05-21 138
【代码】手写一个日历，记录签到-vue3。
06day_前端学习资料_
09-30
【前端学习资料】是针对...这些知识点构成了一个完整的前端学习路径，通过【06day】的学习资源，你可以逐步深入每个主题，从基础到高级，系统地提升自己的前端技能。记住，持续学习和实践是成为优秀前端开发者的关键。
学习前端-HTML-day01
08-17
学习前端-HTML-day01
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
Web前端.DAY6-.mp4
05-16
Web前端.DAY6-.mp4
python爬虫基础——Webbot库介绍
qq_56262770的博客
07-22 979
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 285
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 244
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 293
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
苍穹外卖前端课程：套餐管理与操作实践
"苍穹外卖前端课程 day03主要涵盖了套餐管理的相关功能，包括套餐的分页查询、启售停售、删除以及新增操作。课程深入讲解了前端开发中的需求分析、接口设计、代码实现及功能测试等环节，强调了与后端的协作和数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值