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

初学HTMLCSS——盒子模型

news 2026/4/17 15:14:06

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

<!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>盒子模型</title><style>div {width: 200px;  /* 宽度 */height: 200px;  /* 高度 */box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>

初学HTMLCSS——盒子模型

盒子模型盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局盒子模型组成：内容区域（content&…...

编程日记 2024/3/1 6:01:19

吸猫毛空气净化器哪个好？推荐除猫毛好的宠物空气净化器品牌

如今，越来越多的家庭选择养宠物！虽然家里变得更加温馨，但养宠可能会带来异味和空气中的毛发增多可能会引发健康问题，这也是一个大问题。但我不想家里到处都是异味，尤其是便便的味道，所以很需要一款能够处…...

编程日记 2024/3/1 6:00:18

【玩转408数据结构】线性表——双链表、循环链表和静态链表（线性表的链式表示下）

知识回顾在前面的学习中，我们已经了解到了链表（线性表的链式存储）的一些基本特点，并且深入的研究探讨了单链表的一些特性，我们知道，单链表在实现插入删除上，是要比顺序表方便的，但是…...

编程日记 2024/3/1 5:59:17

分布式概念

分布式概念一、分布式介绍1.1 分布式计算1.1.1 分布式计算的方法1.1.1 分布式计算与互联网的普及1.1.2 分布式计算项目1.1.3 参与计算 1.2 分布式存储系统1.2.1 P2P 数据存储系统1.2.2 云存储系统 1.3 应用二、分布式基础概念2.1 微服务2.2 集群2.3 分布式2.4 节点2.5 远程调…...

编程日记 2024/3/1 5:58:16

vue中的ref/reactive区别及原理

Vue中的ref和reactive是两种不同的数据响应式管理方式。 ref是Vue 3中新加入的特性，它可以将一个普通的JavaScript对象转换为响应式对象。通过ref创建的响应式对象在访问和修改时会自动触发重新渲染。ref返回的是一个包含value属性的对象，访问或修改数据…...

编程日记 2024/3/1 5:57:15

深度学习介绍与环境搭建

深度学习介绍与环境搭建慕课大学人工智能学习笔记，自己学习记录用的。（赋上连接） https://www.icourse163.org/learn/ZUCC-1206146808?tid1471365447#/learn/content?typedetail&id1256424053&cid1289366515人工智能、机器学习与…...

编程日记 2024/3/1 5:54:13

QT C++实践|超详细数据库的连接和增删改查操作|附源码

0：前言 🪧 什么情况需要数据库? 1 大规模的数据需要处理（比如上千上万的数据量）2 需要把数据信息存储起来，无论是本地还是服务上，而不是断电后数据信息就消失了。如果不是上面的原因化，一般…...

编程日记 2024/3/1 5:53:12

matlab：涉及复杂函数图像的交点求解

matlab：涉及复杂函数图像的交点求解在MATLAB中求解两个图像的交点是一个常见的需求。本文将通过一个示例，展示如何求解两个图像的交点，并提供相应的MATLAB代码。画出图像首先，我们需要绘制两个图像，以便直观地看…...

编程日记 2024/3/1 5:51:10

Unity（第二十二部）官方的反向动力学一般使用商城的IK插件，这个用的不多

反向动力学（Inverse Kinematic，简称IK）是一种通过子节点带动父节点运动的方法。正向动力学在骨骼动画中，大多数动画是通过将骨架中的关节角度旋转到预定值来生成的，子关节的位置根据父关节的旋转而改变，这…...

编程日记 2024/3/1 5:50:09

一、获取客户端ip代码 /*** description: 获取客户端IP* return string*/ public static function getClientIp(){$ip ;if(getenv(HTTP_CLIENT_IP) && strcasecmp(getenv(HTTP_CLIENT_IP),unknown)){$ip getenv(HTTP_CLIENT_IP);}else if(getenv(HTTP_X_FORWARDED_F…...

编程日记 2024/3/1 5:48:08

13 Codeforces Round 886 (Div. 4)G. The Morning Star（简单容斥）

G. The Morning Star 思路：用map记录x，y，以及y-x、yx从前往后统计一遍答案即可公式 a n s c n t [ x ] c n t [ y ] − 2 ∗ c n t [ x , y ] c n t [ y x ] c n t [ y − x ] anscnt[x]cnt[y]-2 * cnt[x,y]cnt[yx]cnt[y-x] anscnt[x]…...

编程日记 2024/3/1 5:47:07

CLion 2023：专注于C和C++编程的智能IDE mac/win版

JetBrains CLion 2023是一款专为C和C开发者设计的集成开发环境（IDE），它集成了许多先进的功能，旨在提高开发效率和生产力。 CLion 2023软件获取 CLion 2023的智能代码编辑器提供了丰富的代码补全和提示功能，使您能够更…...

编程日记 2024/3/1 5:46:06

数据可视化基础与应用-02-基于powerbi实现连锁糕点店数据集的仪表盘制作

总结本系列是数据可视化基础与应用的第02篇，主要介绍基于powerbi实现一个连锁糕点店数据集的仪表盘制作。数据集描述有一个数据集，包含四张工作簿，每个工作簿是一张表，其中可以销售表可以划分为事实表，产品表&am…...

编程日记 2024/3/1 5:45:05

前后端分离Vue+nodejs酒店公寓客房预订管理系统udr7l-java-php-django-springboot

本系统的设计与实现共包含13个表:分别是关于我们信息表，配置文件信息表，公寓信息评论表信息表，公寓入住信息表，公寓退房信息表，公寓信息信息表，公寓预订信息表，系统公告信息表，收藏表…...

编程日记 2024/3/1 5:44:03

VUE打包的dist文件放到后端一起发布

背景前后端分离开发的项目，在部署时为了方便部署，使用集成部署的方式（即前后端在一起部署的方式） 问题直接将前端打包好的dist文件夹下的内容，放到后端项目的resource/static目录下，但是在启动访问时发…...

编程日记 2024/3/1 5:43:02

React入门之React_渲染基础用法和class实例写法

渲染元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>04元素渲染</title><script src&…...

编程日记 2024/3/1 5:42:01

Git自动忽略dll文件的问题

检查了半天发现是sourcetreee的全局忽略文件导致， 从里面删除dll即可。我是干脆直接删了全局忽略，太恶心了，如下： #ignore thumbnails created by windows Thumbs.db #Ignore files build by Visual Studio *.exe .vsconfig .s…...

编程日记 2024/3/1 5:38:59

sql中如何实现递归

在SQL中，递归通常是通过使用公用表表达式（Common Table Expressions，CTE）来实现的。CTE允许你定义一个临时的结果集，该结果集可以在一个SELECT、INSERT、UPDATE或DELETE语句的主体中被引用。递归CTE有两个关键部分&a…...

编程日记 2024/3/1 5:32:54

GPT 的基础 - T（Transformer）

我们知道GPT的含义是： Generative - 生成下一个词 Pre-trained - 文本预训练 Transformer - 基于Transformer架构我们看到Transformer模型是GPT的基础，这篇博客梳理了一下Transformer的知识点。 BERT: 用于语言理解。（Transformer的Encoder…...

编程日记 2024/3/1 5:27:50

微信小程序 --- 常用样式和组件

常用样式和组件 1. 组件和样式介绍在开 Web 网站的时候： 页面的结构由 HTML 进行编写，例如：经常会用到 div、p、 span、img、a 等标签页面的样式由 CSS 进行编写，例如：经常会采用 .class 、#id 、element 等选择…...

编程日记 2024/3/1 5:23:47

树莓派 4B EEPROM 升级实战：从原理到三种更新方法详解

1. 树莓派4B EEPROM的核心作用当你第一次接触树莓派4B时，可能会好奇这个小板子是怎么启动系统的。与传统电脑不同，树莓派4B使用了一种叫做EEPROM的特殊芯片来存储启动代码。这就像给电脑装了一个永远不会丢失的"开机说明书"，即使拔…...

编程新知 2026/4/17 15:13:23

终极OpenWrt网络加速指南：3步让你的路由器性能翻倍

终极OpenWrt网络加速指南：3步让你的路由器性能翻倍【免费下载链接】turboacc 一个适用于官方openwrt(22.03/23.05/24.10) firewall4的turboacc 项目地址: https://gitcode.com/gh_mirrors/tu/turboacc 在智能设备泛滥的时代，你是否遇到过这样的困…...

编程新知 2026/4/17 13:02:37

Zotero Format Metadata：如何一键解决文献库混乱问题？

Zotero Format Metadata：如何一键解决文献库混乱问题？ 【免费下载链接】zotero-format-metadata Linter for Zotero. A plugin for Zotero to format item metadata. Shortcut to set title rich text; set journal abbreviations, university places, a…...

编程新知 2026/4/17 11:46:54