2024.4.2-[作业记录]-day07-CSS 盒子模型(显示模式、盒子模型)


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

    • 作业
  • 2024.4.2 学习笔记
    • CSS标签元素显示模式
      • 1 块元素
      • 2 行内元素
      • 3 行内块元素
      • 4 行内模式
      • 5 标签元素的显示与隐藏
      • 6 置换元素
    • css盒子模型
      • 1 盒子模式组成
      • 2 怪异盒子模型

作业

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="首页" content="首页">
        <meta description="首页" content="首页">
        <title>手机列表</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ul, ol {
                list-style: none;
            }
            .mobile-list {
                width: 1030px;
                margin: 50px auto 0;
                text-align: center;
            }
            .mobile-list>li {
                box-sizing: border-box;
                width: 250px;
                display: inline-block;
                border: 1px solid;
            }

            .mobile-list .title{
                font-size: 14px;
                font-weight: 400;
                line-height: 42px;
            }
            .mobile-list .desc {
            font-size: 12px;
            color: #B0B2B9;
            }

            .mobile-list .price {
                font-size: 12px;
                color: #444;
                line-height: 28px;
            }

            .mobile-list .num {
                color: red;
            }
        </style>
    </head>
    <body>
        <ul class="mobile-list">
            <li>
                <div><img src="./images/1.webp" width="200"></div>
                <h3 class="title">小米10 青春版 5G</h3>
                <div class="desc">50倍潜望式变焦/轻薄5G手机</div>
                <div class="price"><span class="num">2099</span>元起</div>
            </li>
            <li>
                <div><img src="./images/1.webp" width="200"></div>
                <h3 class="title">小米10 青春版 5G</h3>
                <div class="desc">50倍潜望式变焦/轻薄5G手机</div>
                <div class="price"><span class="num">2099</span>元起</div>
            </li>
            <li>
                <div><img src="./images/1.webp" width="200"></div>
                <h3 class="title">小米10 青春版 5G</h3>
                <div class="desc">50倍潜望式变焦/轻薄5G手机</div>
                <div class="price"><span class="num">2099</span>元起</div>
            </li>
            <li>
                <div><img src="./images/1.webp" width="200"></div>
                <h3 class="title">小米10 青春版 5G</h3>
                <div class="desc">50倍潜望式变焦/轻薄5G手机</div>
                <div class="price"><span class="num">2099</span>元起</div>
            </li>
            
        </ul>

    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta chaset="UTF-8">
        <meta name="测试1" content="测试1">
        <meta desciption="测试1" content="测试1">
        <title>测试1</title>
        <style>
            div {
                text-align:center;
                font-size:50px;
            }
            .none {
                display:none;
            }
            .hidden {
                visibility:hidden;
            }
        </style>
    </head>
    <body>
        <div>
            <p><span>姓名</span>
                <span class="none">学号</span>
                <span>班级</span>
                <span class="hidden">性别</span>
                <span>入学年份</span>
            </p>
        </div>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="测试2" content="测试2">
        <meta description="测试2" content="测试2">
        <title>测试2</title>
        <style>
            * {
                padding:0;
                margin:0;
            }
            h1 {
                margin-bottom:80px;
            }
            div {
                padding-top:50px;
            }
        </style>
    </head>
    <body>
        <h1>我是一个标题</h1>
        <div>我是一个div</div>
    </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="测试3" content="测试3">
        <meta description="测试3" content="测试3">
        <title>测试2</title>
        <style>
           * {
                margin: 0;
                padding: 0;
           }
           .father {
                width: 200px;
                height:200px;
                background-color: blue;
                /* border-top: 1px solid; */
                /* padding-top: 1px; */
                overflow: hidden;
           }
           .son {
                margin-top: 20px;
                width: 100px;
                height: 100px;
                background-color: green;
           }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
</html>
  1. 显示模式有哪几种?它们有什么区别?

    答:

    1.块元素:横跨一行,可设置宽高度,里面各种显示模式的元素都可以装。

    2.行内元素:一行可容纳多个行内元素,宽高度不可以设置,默认是本身内容的宽高度,里面只能装文本或其他行内元素。

    3.行内块元素:一行可容纳多个(行内元素性特点),可设置宽高度(块元素特点),里面各种显示模式的元素都可以装。

  2. 怪异盒子模型和标准盒子模型有什么区别?

    答:

    怪异盒子模型(box-sizing: border-box),也叫做内减盒模型,或者IE 盒子模型

    内减盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同。

    怪异盒子模型的 content 内容宽度会把 padding 和 border 算入其中,是由外而内的计算宽度。

    怪异盒子模型当内减到负数的时候,那么表现形式和标准盒子模型差不多。

  3. 用代码实践下,重现兄弟标签元素垂直外边距合并问题和父子标签元素穿透合并的问题,并实践中解决它们?

    答:重现兄弟标签元素垂直外边距合并问题是上元素的margin-bomtoon和下元素的margin-top产生了重叠部分
    在这里插入图片描述

    解决方法:分别设置margin和padding,就可以避免重叠

    在这里插入图片描述

    对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

    在这里插入图片描述

    1.可以为父元素定义上边框。

    在这里插入图片描述

    2.可以为父元素定义上内边距。

    在这里插入图片描述

    3.可以为父元素添加 overflow:hidden。

    在这里插入图片描述

  4. 块级元素怎么居中?和text-align居中有什么区别?

    答:块级元素可以用:marigin-right: auto;margin-left: auto;进行居中。

    区别:

    1、margin: 0 auto只针对块级居中,对行内标签元素和行内块标签元素(含有inline)的无效。

    2、父级加text-align: center ,对子级的文本或者行内标签元素和行内块标签元素(含有inline)进行居中,

    对子级块级无效,由于继承性,子级块级如果没有重置text-align,子级块级孙子含有inline是有效的。

  5. display:none和visibility:hidden有什么区别?用代码实践下。

    答:disply:none是相当于元素直接删除,不仅不显示,原来的位置也没了;

    visibility:hidden是不显示元素,是原来的位置还在,只是不显示内容了。

在这里插入图片描述

在这里插入图片描述

2024.4.2 学习笔记

CSS标签元素显示模式

查询chrome的computed的display

1 块元素

display:block | list-item | table类;

宽度为容器父级的百分之百,横跨一行,高度是自动的

里面什么都能装,特例:p标签里面不能放语义上块级元素,它只能存放段落,p>div不能失效,p标签可以包含行内元素

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

2 行内元素

display: inline;

一行可以显示多个行内元素,内容太长会自动折行,垂直方向宽高设置是无效的 。默认的宽高度就是内容本身的宽高度。

行内元素只能包含文本和行内元素。

特例:a标签里不能包含a标签,会解析错误

在这里插入图片描述

在这里插入图片描述

行内元素转换块级元素

在这里插入图片描述

在这里插入图片描述

行内元素之间无论打多少个空格都只能解析出一个

3 行内块元素

disply:inline-block;

和块级元素相比,它不会独占一行

和行内块元素相比,它可以设置宽高度

4 行内模式

5 标签元素的显示与隐藏

display的隐藏不会占原来的位置,visibility的隐藏会占原来的位置。

行内元素就是靠内容进行撑开的

img图片只要设置一个宽或者高度,就会自动按比例

6 置换元素

img

如果可以给inline行内元素通过样式设置宽高的一般都是置换元素。

大多数行内元素不能直接设置宽高度,只有少数的置换元素可以

css盒子模型

1 盒子模式组成

margin:外边距

border:边框 border: 1px solid red;

padding:内边距

css的宽高是内容的宽高,不包括上面那三个

宽度=width +padding(左右)+border(左右)

高度=height +padding(上下)+border(上下)

设置padding:

一个值:上下左右

两个值:上下,左右

三个值:上,左右,下

四个值:上,右,下,左

在这里插入图片描述

居中:

只能对块级元素有效:margin-right:auto;margin-left:auto;

inline行内元素要用text-align=center进行居中;block元素也可以用text-align居中

在这里插入图片描述

inline-block没设置宽高度,宽高度就和内容一致。

行内元素只能在水平方向上设置margin,padding样式;

块级元素上下左右都可以设置样式

block设置了 width 后,右侧会用margin-right自动铺满,所以 block 设置width 还是独占一行

清除内外边距:

  • {
    padding:0; /* 清除内边距 /
    margin:0; /
    清除外边距 */
    }

上下盒子的margin-bottom和margin-top可以合并

如何避免?padding和margin分别设置,避免冲突。

background-color:设置背景颜色

嵌套块元素垂直外边距的塌陷:overflow:hidden;

让文字的行高等于盒子的高度,可以让文字在当前盒子内垂直居中;

2 怪异盒子模型

box-sizing: border-box

padding增大会内减

怪异盒子模型当内减到负数的时候,那么表现形式和标准盒子模型差不多。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/519505.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机组成结构—存储器概述

目录 一、存储器的分类 1.按存储介质分类 半导体存储器 磁性材料存储器 光盘存储器 2.按存取方式分类 随机存储器&#xff08;Random Access Memory&#xff0c; RAM&#xff09; 只读存储器&#xff08;Read Only Memory&#xff0c; ROM&#xff09; 串行访问存储器…

如何在iPhone上恢复永久删除的照片?

2007 年&#xff0c;Apple Inc. 推出了这款震撼人心的智能手机&#xff0c;后来被称为 iPhone。您会惊讶地发现&#xff0c;迄今为止&#xff0c;Apple Inc. 已售罄 7 亿台 iPhone 设备。根据 2023 年 8 月的一项调查数据&#xff0c;95% 的智能手机利润都落入了苹果公司的口袋…

下载页面上的视频

引言&#xff1a;有些页面上的视频可以直接右键另存为或者F12检索元素找到视频地址打开后保存&#xff0c;但有些视频页面是转码后的视频&#xff0c;不能直接另存为视频格式&#xff0c;可以参考下本方法 以该页面视频为例&#xff1a;加载中...点击查看详情https://wx.vzan.c…

#SOP#-如何使用AI辅助论文创作

#SOP#-如何使用AI辅助论文创作 ——2024.4.6 “在使用工具的时候&#xff0c;要做工具的主人” 最终交付物&#xff1a; 一份可执行的AI辅助创作论文的指导手册 交付物质量要求&#xff1a; 不为任何AI大模型付费&#xff01;不为任何降重网站付费&#xff01;通过知网检查论…

苍穹外卖08(地址簿功能,用户下单功能,订单支付全过程,内网穿透Cpolar)

目录 一、导入地址簿功能代码 1. 需求分析和设计 1 产品原型 2 接口设计 2. 代码导入 3. 功能测试 二、用户下单 1. 需求分析和设计 1 产品原型 2 接口设计 3 表设计 2. 代码开发 1 DTO设计 2 VO设计 3 开发代码 3. 功能测试 三、订单支付 1 微信支付介绍 1 …

Java 学习和实践笔记(51):二分法查找(折半检索)

二分法查找&#xff08;折半检索&#xff09;又叫binary search. 要在一堆数据中查找是否存在某一个已知数&#xff0c;二分法查找的步骤&#xff1a; 第一步&#xff0c;对数据实现排序 第二步&#xff0c;将该数与排序后的数据集的中间一个数进行比较 第三步&#xff0c;…

非关系型数据库(缓存数据库)redis的性能管理

目录 一.Redis性能管理 1.Info Memory——查看Redis内存使用 2.内存碎片率 3. 内存使用率 4.内存回收key 二.缓存的穿透&#xff0c;击穿和雪崩 1.缓存的穿透 1.1 问题描述 1.2 缓存穿透发生的条件 1.3 缓存穿透发生的原因 1.4 解决方案 2 缓存的击穿 2.1 问题描…

使用SVD将图像压缩四分之一(MATLAB)

SVD压缩前后数据量减少的原因在于&#xff0c;通过奇异值分解&#xff08;SVD&#xff09;&#xff0c;我们将原始数据&#xff08;如图像&#xff09;转换成了一种更加紧凑的表示形式。这种转换依赖于数据内部的结构和相关性&#xff0c;以及数据中信息的不均匀分布。 让我们…

以 2021inCTF-DeadlyFastGraph 入门 JSC利用

前言 最近一直在入门浏览器的利用&#xff0c;然后一直都在搞 V8&#xff0c;然后接触的比较多的都是一些混淆、越界的洞&#xff0c;希望后面可以入门 jit 然后在今年的阿里云 CTF 中看到了一道 jsc 相关的题目&#xff0c;当时本来想做一做的&#xff0c;但是环境一直没有搭…

vLLM介绍

vLLM是伯克利大学LMSYS组织开源的大语言模型高速推理框架&#xff0c;旨在极大地提升实时场景下的语言模型服务的吞吐与内存使用效率。vLLM是一个快速且易于使用的库&#xff0c;用于 LLM 推理和服务&#xff0c;可以和HuggingFace 无缝集成。vLLM利用了全新的注意力算法「Page…

ZKP价值链路的垂直整合

1. ZKP proof生命周期 从ZKP&#xff08;zero-knowledge proof&#xff09;生命周期&#xff0c;先看围绕ZKP的价值链路形成&#xff1a; 1&#xff09;User intent用户意图&#xff1a;以某用户意图为起点&#xff0c;如想要在某zk-rollup上swap某token、证明其身份、执行某…

java数据结构与算法刷题-----LeetCode405. 数字转换为十六进制数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 分组位运算 分组位运算 这道题正常来说可以用转换7进制的思想来&…

加速度:电子元器件营销网站的功能和开发周期

据工信部预计&#xff0c;到2023年&#xff0c;我国电子元器件销售总额将达到2.1万亿元。随着资本的涌入&#xff0c;在这个万亿级赛道&#xff0c;市场竞争变得更加激烈的同时&#xff0c;行业数字化发展已是大势所趋。电子元器件B2B商城平台提升数据化驱动能力&#xff0c;扩…

算法学习18:动态规划

算法学习18&#xff1a;动态规划 文章目录 算法学习18&#xff1a;动态规划前言一、线性DP1.数字三角形&#xff1a;f[i][j] max(f[i - 1][j - 1] a[i][j], f[i - 1][j] a[i][j]);2.1最长上升子序列&#xff1a;f[i] max(f[i], f[j] 1);2.2 打印出最长子序列3.最长公共子序…

[从零开始学习Redis | 第九篇] 深入了解Redis数据类型

前言&#xff1a; 在现代软件开发中&#xff0c;数据存储和处理是至关重要的一环。为了高效地管理数据&#xff0c;并实现快速的读写操作&#xff0c;各种数据库技术应运而生。其中&#xff0c;Redis作为一种高性能的内存数据库&#xff0c;广泛应用于缓存、会话存储、消息队列…

MySQL - 基础三

11、事务管理 CURD不加控制&#xff0c;会有什么问题&#xff1f; 当客户端A检查还有一张票时&#xff0c;将票卖掉&#xff0c;还没有执行更新数据库时&#xff0c;客户端B检查了票数&#xff0c;发现大于0&#xff0c;于是又卖了一次票。然后A将票数更新回数据库。这是就出现…

09 flink-sql 中基于 mysql-cdc 的 select * from test_user 的具体实现

前言 这也是最近帮一个朋友看问题 遇到的一个问题 然后 引发了一下 对于 flink-sql 里面的一些 常规处理的思考, 理解 原始问题主要是 在测试库可以使用 flink-sql 可以正常同步, 但是 在生产环境 无法正常同步数据 这个问题 我们后面单独 记录一篇文章 测试用例 下载…

设计模式总结-外观模式(门面模式)

外观模式 模式动机模式定义模式结构外观模式实例与解析实例一&#xff1a;电源总开关实例二&#xff1a;文件加密 模式动机 引入外观角色之后&#xff0c;用户只需要直接与外观角色交互&#xff0c;用户与子系统之间的复杂关系由外观角色来实现&#xff0c;从而降低了系统的耦…

携程旅行 abtest

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx a15018601872 本文章…

WindowsPowerShell安装配置Vim的折腾记录

说明 vim一直以来都被称为编辑器之神一样的存在。但用不用vim完全取决于你自己&#xff0c;但是作为一个学计算机的同学来说&#xff0c;免不了会和Linux打交道&#xff0c;而大部分的Linux操作系统都预装了vim作为编辑器&#xff0c;如果是简单的任务&#xff0c;其实vim只要会…