当前位置: 首页 > news >正文

CSS盒模型-怪异盒模型笔记-思维导图-案例等

文章目录

        • 一、盒模型(重点)
        • 二、怪异盒模型
        • 三、块级元素和行内元素区别汇总
        • 四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏
        • 五、思维导图
        • 六、笔记资料

一、盒模型(重点)

所有HTML元素可以看作盒子。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

我们把 padding 和 margin 统一地称为内边距和外边距,边框内的空白是内边距,边框外的空白是外边距。

盒模型由5个属性组合而成。

CSS盒模型

用处:决定盒子的尺寸问题(盒子的所占空间或高矮胖瘦)。

  1. width 宽度

    元素{width:400px;
    }
    //假设不写宽度会怎么用
    1. 块级元素默认是100%的宽,即父盒子有多宽,它就有多宽
    2. 行内元素默认就是内容的宽,即内容有多宽,它就有多宽默认是不支持width属性,即无法设置
    
  2. height 高度

    元素{height:400px;
    }
    //假设不写高度会怎么用
    1. 块级元素默认是没有高度
    2. 行内元素默认就是内容的高,即内容有多高,它就有多高默认是不支持height属性,即无法设置
    
  3. padding 内间距(重点)

    内间距会影响盒子的宽高,即让它变大。

    大部分元素默认都没有填充(内间距)。

    内间距:指的是盒子的内容与边框的间距(4个边都有内间距)

    1.块级有效2.行内有效内间距有4种写法:
    1.取一个值
    padding:20px;
    /上右下左都是20px/2.2个值
    padding:20px 10px;上下  右左3.3个值
    padding:10px 15px 20px;上   左右   下4.4个值
    padding:10px 5px 15px 20px;	上   右    下  左----padding是复合写法----可以拆分为单独的写法
    注意:如果拆分了,则只能写一个值。
    padding-top:10px;
    padding-right:10px;
    padding-bottom:5px;
    padding-left:15px;
    
  4. 边框

    边框默认是没有的,一个盒子可以有4条边框

    边框也会影响盒子的总宽和总高

    border:边框粗细  边框风格  边框颜色;
    border:1px solid  red;
    边框风格:实线(solid)、虚线(dashed)、点(dotted)、双实线(double)border:1px solid  red; 	表示4中边框都是一样的;
    如果要让每个边框都不一样:学了边框后,水平线标签就可以不用了
    border-方向词:边框粗细  边框风格  边框颜色外间距有4种写法:
    同内间距
    
  5. 外间距

    盒子与盒子之间的间距即为外间距

    不会影响到盒子的尺寸。

    取值同内间距

    大部分元素默认都没有margin

    1.块级有效2.行内左右有效,上下无效
  6. 盒模型的计算公式(重要)

    总宽= width+左右padding+左右border;
    总高= height+上下padding+上下border;
    
  7. 哪些元素默认有外间距、内间距

    1. 有外间距的元素
    h1~h6,p,body
    2. 有内间距的元素
    ul,ol等为了不影响自己写代码,一般会将默认的这些外间距和内间距统一设置为0
    也就是默认的外间距、内间距会干扰自己算盒模型
    
二、怪异盒模型

改变了盒模型的计算尺寸的方式。

   公式:总宽=width总高=height如果添加了padding和border,则会自动扣除,收缩-----默认是正常的盒模型,如果要启用怪异盒模型,则需要写一行代码----选择器{box-sizing:content-box(默认值)|border-box(启用了怪异和模型);}

怪异盒模型的好处:

  1. 不需要理会复杂的盒模型的方式了
  2. 现代浏览器和移动端可以大胆放心的使用,而且是主流的方式
三、块级元素和行内元素区别汇总
  1. 行内元素同一行水平排列。
  2. 块级元素各占据一行,垂直方向排列。
  3. 块级元素可以包含行内元素和块级元素。行内元素不建议包含块级元素,除非转为块级
  4. 行内元素与块级元素属性的不同,主要是盒模型属性上。
  5. 行内元素设置width无效,height无效(可以设置line-height),margin上下无效
四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏

功能:可以通过 display 属性修改元素框的显示方式

取值:

  • none:不显示元素(隐藏),相当于消失不见
  • block : 让元素像块级一样显示使用场合:将行内元素改变成块级元素
  • inline(默认):此元素会被显示为内联元素,可以对块状元素进行设置,让它变成行内元素
  • inline-block : 让元素显示的为行内块,本身是行内元素:一行内能够显示多个。具备块级元素特点:允许改宽和高

可以通过修改样式display属性改变元素是以块级还是行内元素呈现,当display的值设为block时,元素将以块级方式呈现;当display值设为inline时,元素将以行内形式呈现。

举例:

<!--HTML结构-->
<div><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a><a href="#">链接5</a>
</div>
<!--CSS-->
<style type="text/css">a{border: 1px solid red;width: 100px;height: 35px;/*转为行内块级*/display: inline-block;margin: 10px;text-align: center;padding-top: 13px;}
</style>

技巧:

如果想让一个元素可以设置宽度高度,又让它以行内形式显示,我们可以设置display的值为inline-block

五、思维导图

css盒模型思维导图

六、笔记资料

笔记资料
如需本次课作业、笔记、案例等,请在下方+微获取。


如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。

免费答疑,行业深潜多年的技术牛人帮你解决bug。

我可提供web前端开发,网站开发、技术咨询、答疑、直播讲座等服务

祝你能成为一名优秀的WEB前端开发工程师!

相关文章:

CSS盒模型-怪异盒模型笔记-思维导图-案例等

文章目录 一、盒模型&#xff08;重点&#xff09;二、怪异盒模型三、块级元素和行内元素区别汇总四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏五、思维导图六、笔记资料 一、盒模型&#xff08;重点&#xff09; 所有HTML元素可以看作盒子。 CSS盒模型本质上是…...

thinkphp6开发的通用网站系统源码

thinkphp6开发的通用网站系统源码。 基于ThinkPHP6框架开发的通用后台权限管理系统&#xff0c;底层采用国内最流行的ThinkPHP6框架&#xff0c; 支持内容管理、文章管理、用户管理、权限管理、角色管理等功能。 代码下载百度网盘...

Junit 5 - 理解Mockito,提高UT 覆盖率

前言 当我是1个3年初级程序员时&#xff0c; 我被面试者问到1个问题&#xff1a; 如何保证你的开发任务交付质量 当我是1个7年开发组长时&#xff0c; 我被面试者问到另1个问题&#xff1a;如何保证你的团队的代码质量&#xff0c; 减少rework。 又若干年后&#xff0c; 我才…...

微服务sentinel解析部署使用全流程

sentinel源码地址&#xff1a; 介绍 alibaba/Sentinel Wiki GitHub sentinel官方文档&#xff1a; https://sentinelguard.io/zh-cn/docs/introduction.html Sprong Cloud alibaba Sentinel文档【小例子】 : Sentinel alibaba/spring-cloud-alibaba Wiki GitHub 目录 1、…...

YOLO11震撼发布!

非常高兴地向大家介绍 Ultralytics YOLO系列的新模型&#xff1a; YOLO11&#xff01; YOLO11 在以往 YOLO 模型基础上带来了一系列强大的功能和优化&#xff0c;使其速度更快、更准确、用途更广泛。主要改进包括 增强了特征提取功能&#xff0c;从而可以更精确地捕捉细节以更…...

机器学习框架(含实例说明)

机器学习框架是用于开发和部署机器学习模型的软件库和工具集。它们提供了一系列的算法、工具和基础设施&#xff0c;帮助开发者更高效地构建、训练和部署机器学习模型。以下是一些主要的机器学习框架及其详细介绍&#xff1a; 1. TensorFlow TensorFlow 是由Google开发的开源…...

vue2与vue3知识点

1.vue2&#xff08;optionsAPI&#xff09;选项式API 2.vue3&#xff08;composition API&#xff09;响应式API vue3 setup 中this是未定义&#xff08;undefined&#xff09;vue3中已经开始弱化this vue2通过this可以拿到vue3setup定义得值和方法 setup语法糖 ref > …...

从源码中学习动态代理模式

动态代理模式 动态代理是 Java 反射&#xff08;Reflection&#xff09;API 提供的一种强大机制&#xff0c;它允许在运行时创建对象的代理实例&#xff0c;而不需要在编译时静态地创建。 Java 提供了两种主要的方式来实现动态代理&#xff1a; 基于接口的动态代理&#xff1a…...

谷歌浏览器完美清除缓存

1.在页面上按下键盘的F12&#xff0c;打开控制台。 2.鼠标放到刷新图标上&#xff0c;点击鼠标右键&#xff0c;选择‘清空缓存并硬性重新加载’。 这样浏览器对网站页面的缓存就彻底被清理干净了。 目前支持该操作方式的浏览器有谷歌和Edge浏览器。 有的浏览器不支持该方式操…...

《如何高效学习》

有道云笔记 第一部分 整体性学习策略 结构 结构就像思想中的一座城市&#xff0c;有很多建筑物&#xff0c;建筑物之间有道路相连&#xff0c;有高大而重要的与其他建筑有上百条路相连&#xff0c;无关紧要的建筑只有少数泥泞的小道与外界相通。 建立良好的知识结构就是绘制…...

阿里云ACP认证考试题库

最近有好些同学&#xff0c;考完阿里云ACP了&#xff0c;再来跟我反馈&#xff1a;自己花700买的阿里云ACP题库&#xff0c;结果答案是错的&#xff01; 或者考完后发现&#xff0c;买的阿里云ACP题库覆盖率只有50%&#xff01; 为避免大家继续踩坑&#xff0c;给大家分享一个阿…...

学习经验分享【38】YOLOv11解读——最新YOLO版本

YOLO算法更新速度很快&#xff0c;已经出到V11版本&#xff0c;后续大家有想发论文或者搞项目可更新自己的baseline了。后续将改进YOLOv11算法&#xff0c;有需要的朋友可关注&#xff0c;我会持续进行更新。 YOLO11是Ultralytics YOLO系列实时目标检测器的最新迭代版本&#x…...

电商选品/分析| 亚马逊常见插件爬虫实战之-helium插件

说明 插件爬虫相当于二次爬虫,二次加工信息,因为大部分插件信息也是从正规网上去获取数据,这次列举helium插件爬虫案例,其他插件爬虫也是类似这个方式. 需求 1、⽤⾕歌浏览器&#xff0c;下载chrome extension&#xff1a;“Helium 10 2、登录helium10 3、打开 打开Amazo…...

遇到慢SQL、SQL报错,应如何快速定位问题 | OceanBase优化实践

在数据库的使用中&#xff0c;大家时常会遇到慢SQL&#xff0c;或执行出错的SQL。对于某些SQL问题&#xff0c;其错误原因显而易见&#xff0c;但也有不少情况难以直观判断。面对这类问题&#xff0c;我们应当如何应对&#xff1f;如何准确识别SQL错误的根源&#xff1f;是否需…...

postgresql僵尸进程的处理思路

简介 僵尸进程&#xff08;zombie process&#xff09;是指一个已经终止但仍然在进程表中保留条目的进程。正常情况下&#xff0c;当一个进程完成执行并退出时&#xff0c;操作系统会通过父进程调用的wait()或waitpid()系统调用来收集该子进程的退出状态。如果父进程未及时调用…...

Springboot 练习

Springboot练习——分页查询 Emp类 package com.wzb.pojo20240930;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;import java.time.LocalDate; import java.time.LocalDateTime;Data NoArgsConstructor AllArgsConstructor public…...

ISA-95制造业中企业和控制系统的集成的国际标准-(3)

ISA-95 文章目录 ISA-95ISA-95设备对象模型一、设备对象模型是什么&#xff1f;二、设备对象模型常见组织 ISA-95设备对象模型 ISA-95 标准中的设备对象模型侧重于表示制造和生产过程中使用的物理和逻辑设备及资源。 一、设备对象模型是什么&#xff1f; 设备对象模型提供了…...

MATLAB中图形导出功能的详细使用指南

在MATLAB中&#xff0c;图形的导出是一个常见的需求&#xff0c;无论是为了报告、演示还是进一步的分析。MATLAB提供了多种方式来导出图形&#xff0c;包括使用图形用户界面(GUI)的工具&#xff0c;以及通过编程方式使用特定的函数。本文将详细介绍如何在MATLAB中导出图形&…...

助农小程序|助农扶贫系统|基于java的助农扶贫系统小程序设计与实现(源码+数据库+文档)

助农扶贫系统小程序 目录 基于java的助农扶贫系统小程序设计与实现 一、前言 二、系统功能设计 三、系统实现 5.1.1 农户管理 5.1.2 用户管理 5.1.3 订单统计 5.2.1 商品信息管理 5.3.1 商品信息 5.3.2 订单信息 5.3.3 商品评价 5.3.4 商品退货 四、数据库设计 1、…...

SpringBoot上传图片实现本地存储以及实现直接上传阿里云OSS

一、本地上传 概念&#xff1a;将前端上传的文件保存到自己的电脑 作用&#xff1a;前端上传的文件到后端&#xff0c;后端存储的是一个临时文件&#xff0c;方法执行完毕会消失&#xff0c;把临时文件存储到本地硬盘中。 1、导入文件上传的依赖 <dependency><grou…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...