前端——盒子模型

news2024/9/24 3:21:54

一个盒子的特点组成

外边距就是两个元素之前的距离

padding就是填充区的大小 从上开始 顺时针进行设置,没有则对称

也可以单独对某个方向进行设定,比如:padding-top

border 边框区 符合属性

border-style 边框样式

border-color 边框颜色

border-width 边框宽度

margin 外边距 元素和元素之间的距离

块级盒子(标签,元素)特点:独占一行,对宽度高度支持 举例:div h1~h6 p ul li

内联级盒子 特点: 不独占一行,对高度宽度不支持 举例: a  span-->

上面发现我们发现hello是块级盒子的特点,demo是内联级盒子的特点

接下来我们看弹性盒子的点

改成弹性盒子

我们发现弹性盒子 特点:默认该元素无论放不放的下子元素们,子元素都横着布局 dispaly:flex

接下来我们看内联级块级盒子的特点

改成内联级块级盒子

我们发现内联级块级盒子不独占一行了,而且对高度宽度支持。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

web前端之选项卡集合、动态添加类名、动态移除类名、动态添加样式、激活、间距、节流、tabBar

MENU input的checked属性(HtmlStyle)伪元素(HtmlStyleJavaScript)激活类(HtmlStyleJavaScript)vue伪元素 input的checked属性(HtmlStyle) 前言 代码段创建一个使用HTML和CSS实现的标签式内容切换组件。通过选择不同的标签,可以展示相应的内容。 代码段实现一个简洁…

掌握时间的艺术:Python的sched库深度解析

文章目录 掌握时间的艺术:Python的sched库深度解析背景:为何选择sched?什么是sched库?如何安装sched库?简单库函数使用方法1. 创建调度器实例2. 安排事件3. 取消事件4. 运行调度器5. 检查事件是否在队列中 场景应用1. …

iOS profiles文件过期如何更新

创建发布用的Certificates 首先进入到https://developer.apple.com/account页面选择【证书】进入【新建证书】页面 点击【新建证书】按钮: 根据需求选中对应的【证书类型】,我选的是【Apple Distribution】, 开发者证书选择【Apple Devel…

数码管进阶设计验证

前言 随着数字电路和嵌入式系统的广泛应用,数码管作为一种常见的显示设备,在各种电子产品中扮演着重要角色。数码管以其结构简单、显示清晰和成本低廉的特点,广泛应用于计数器、时钟、测量仪器等领域。然而,传统的数码管设计通常仅…

小梅哥 xilinx fpga VGA

module VGA_CTRL(Clk,Reset_n,Data,Data_Req,VGA_HS, //行VGA_VS, //场VGA_BLK, //数据有效的那一段VGA_RGB );input Clk;input Reset_n;input [23:0]Data;output reg Data_Req;output reg VGA_HS;output reg VGA_VS; output reg VGA_BLK;output reg [23:0]VGA_RGB;//{R[7:0]、…

Android常见界面控件(三)

目录 前言 列表控件ListView 常用属性 常用适配器 1.BaseAdapter 2.SimpleAdapter 3.ArrayAdapter 购物商城 选择菜品照片 创建布局文件 实现购物商城列表界面的显示效果 前言 在前面,我们已经讲了六个常用的界面控件和五个界面布局,那么本篇…

【HarmonyOS NEXT星河版开发实战】灯泡定时开关

个人主页→VON 收录专栏→鸿蒙综合案例开发​​​​​ 代码及其图片资源会发布于gitee上面(已发布) 所有与鸿蒙开发有关的知识点都会在gitee上面进行发布 gitee地址https://gitee.com/wang-xin-jie234 目录 前言 界面功能介绍 界面构建思路 头部 中间…

数据结构——二叉树经典OJ题

1.单值二叉树 单值二叉树:就是判断二叉树里的所有值是否都一样 bool isUnivalTree(struct TreeNode* root) {if(rootNULL)return true;//查找有没有左子树并且看左子树当前指向的值是否和根当前指向的值相等if(root -> left && root -> left -> v…

【三维室内数据集】ScanNet v2使用说明

【版权声明】本文为博主原创文章,未经博主允许严禁转载,我们会定期进行侵权检索。 参考书籍:《人工智能点云处理及深度学习算法》 本文为专栏《Python三维点云实战宝典》系列文章,专栏介绍地址“【python三维深度学习】python…

Python自动化:图片批量添加水印

前言 本文将讲述怎样通过Python自动化的方法,来对照片进行批量的加水印,从而能够有效地阻止他人的非法占有,提高工作的效率。 Python自动化:办公效率的革命 自动化解决方案 实现步骤 读取指定文件夹中的图片:打开…

YOLOv9改进策略【卷积层】| 利用MobileNetv4中的UIB、ExtraDW优化RepNCSPELAN4

一、本文介绍 本文记录的是利用ExtraDW优化YOLOv9中的RepNCSPELAN4,详细说明了优化原因,注意事项等。ExtraDW是MobileNetv4模型中提出的新模块,允许以低成本增加网络深度和感受野,具有ConvNext和IB的组合优势。可以在提高模型精度…

redis | 认识非关系型数据库Redis的哈希数据类型

Redis 非关 kv型 哈希通用命令python 操作hash应用场景 数据类型 数据类型丰富,字符串strings,散列hashes,列表lists,集合sets,有序集合sorted sets等等 哈希 定义 1、由field和关联的value组成的键值对 类似于python的键值对 2、field和value.是字符…

『功能项目』新输入系统【07】

我们打开上一篇06新输入系统项目, 本章要做的事情是摄像机跟随主角移动, 给主角增加一个Player标签方便主摄像机查找主角对象 在编辑场景调好角度,选择Main Camera对象按键盘Ctrl Shift F使运行场景与编辑场景相同 新建CameraCtrl脚本代码 …

秋招突击——8/16——字节广告业务——面经整理——二面挂

文章目录 引言一面面试内容基础知识一、Redis为什么进行AOF重写?二、AQS和Conditon的使用三、乐观锁和分布式锁有什么差异?频繁使用乐观锁行不行?四、Java的即时编译技术五、Java中的JVM调优是如何做的?六、Java中创建对象的流程&…

STM32——BKP备份寄存器RTC实时时钟

首先是理论知识Unix时间戳: 时间戳只显示秒,没有进位,永不进位的秒计数器,60秒就是60秒,100秒就是100秒,它可以和年月日/时分秒进行转换 优点:1、简化硬件电路(只需要考虑秒的容量…

C语言 猜数字游戏

目录 1. 随机数⽣成 1.1 rand 1.2 srand 1.3 time 1.4 设置随机数的范围 2. 猜数字游戏实现 游戏要求: 1. 电脑⾃动⽣成1~100的随机数 2. 玩家猜数字,猜数字的过程中,根据猜测数据的⼤⼩给出⼤了或⼩了的反馈,直到猜对&a…

运行微信小程序报错:Bad attr data-event-opts with message

问题 使用uniapp 编译,运行微信小程序环境时,报错 Bad attr data-event-opts with message。(这个错误报错原因很多,这里只解决一个) 原因 原因是:代码中有: :key"swiperList i"…

猫头虎分享:Python库 Pip 的简介、安装、用法详解入门教程

猫头虎分享:Python库 Pip 的简介、安装、用法详解入门教程 🎯 大家好!今天猫头虎带您一起探索Python世界中的一个基础工具——Pip。作为一名Python开发者,掌握Pip的使用不仅能帮助你更有效地管理项目中的依赖,还能让你…

【Java】Spring Boot使用 Email 传邮件 (上手图解)

Java系列文章目录 补充内容 Windows通过SSH连接Linux 第一章 Linux基本命令的学习与Linux历史 文章目录 Java系列文章目录一、前言二、学习内容:三、问题描述四、解决方案:4.1 认识依赖4.2 发送邮件步骤4.2.1 先获取授权码4.2.1 邮件配置4.2.2 主体内容…

使用 jar-analyzer 和dbeaver 分析java

https://github.com/jar-analyzer/jar-analyzer 可以进行jar分析,包括method调用 分析完可以通过界面进行一些分析,如果复杂还可以用DbWeaver 打开数据库进行分析