Web前端学习_CSS盒子模型

devtools/2024/11/29 19:13:44/

content

padding

border

margin

image-20241128191836637

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子模型</title><style></style>
</head>
<body>
<div class="demo">yanxiao正在学习web喃,你在干吗? 学个蛋,摆烂</div>
<div class="demo1">yanxiao学习就想睡觉,为什么喃? 因为没有学习web</div>
</body>
</html>

image-20241128201636808

1.边框宽度 格式 颜色
    <style>.demo{border:10px solid #8b1a01;}</style>

image-20241128201740626

2.内联块__文本与边框大小同步
        .demo{border:10px solid #8b1a01;display: inline-block;}

image-20241128201959136

3.设置背景颜色

background-color: #0066cc;

image-20241128202121545

4.边框大小
border-width: 10px 20px 40px 60px;
border-width:10px 20px 40px 60px;  /*上右下左*/
/*边框宽度
当给一个值的时候,上右下左同步;
当个两个值的时候,上下同步,左右同步;
当给它三个值的时候,上 左右同步 下
当给它四个值的时候,上右下左同理可以设置四个颜色,四个格式;*/

image-20241128202310771

5.padding_文本与边框的距离
padding:50px;

image-20241128202543702

6.边框四个格式
            border-style:solid dashed dotted double;/*上边(top): solid(实线)右边(right): dashed(虚线)下边(bottom): dotted(点线)左边(left): double(双线)*/

image-20241128202615978

7.编辑单个边框
border-left: 30px solid #fda543;
上边(top): solid(实线)
右边(right): dashed(虚线)
下边(bottom): dotted(点线)
左边(left): double(双线)

image-20241128203339072


http://www.ppmy.cn/devtools/137995.html

相关文章

【金猿案例展】京东物流UData——物流行业数据分析智能体解决方案

‍ 北极九章数据要素案例 该数据要素项目案例由北极九章投递并参与“数据猿年度金猿策划活动——2024数据要素产业年度创新服务企业榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 在数字经济时代&#xff0c;供应链领域的核心决策能力正越来越多地依赖于数…

使用Eureka实现服务注册与发现的具体案例详解

1. Eureka 的基本概念 1.1 什么是 Eureka&#xff1f; Eureka 是一个基于 REST 的服务注册和发现平台&#xff0c;主要分为以下两个组件&#xff1a; Eureka Server&#xff1a;作为服务注册中心&#xff0c;负责维护服务实例信息。Eureka Client&#xff1a;服务消费者与服…

用Vue3.0 如何实现组件?实现一个 Modal应该怎么设计?

当然,Vue 3.0 提供了非常方便的组件化机制来实现像 Modal 这样的 UI 组件。实现一个 Modal 组件的基本设计思路是:通过一个控制显示与隐藏的 v-if 或 v-show,然后使用 props 接收外部控制参数,最后通过事件机制通知父组件进行交互。 以下是如何在 Vue 3.0 中实现一个基本的…

国产FPGA+DSP 双FMC 6U VPX处理板

高性能国产化信号处理平台采用6U VPX架构&#xff0c;双FMC接口国产V7 FPGA 国产多核 DSP 的硬件架构&#xff0c;可以完成一体化电子系统、有源相控阵雷达、电子侦察、MIMO 通信、声呐等领域的高速实时信号处理。 信号处理平台的组成框图如图 1 所示&#xff0c; DSP处理器采…

onnx报错解决-bert

一、定义 UserWarning: Provided key output for dynamic axes is not a valid input/output name warnings.warn( 案例 实体识别bert 案例 转transformers 模型到onnx 接口解读 二、实现 https://huggingface.co/docs/transformers/main_classes/onnx#transformers.onnx…

Sqoop的安装和配置,Sqoop的数据导入导出,MySQL对hdfs数据的操作

sqoop的安装基础是hive和mysql&#xff0c;没有安装好的同学建议去看一看博主的这一篇文章 Hive的部署&#xff0c;远程模式搭建&#xff0c;centos换源&#xff0c;linux上下载mysql。_hive-4.0.1-CSDN博客 好的那么接下来我们开始表演&#xff0c;由于hive是当时在hadoop03上…

Android so库的编译

在没弄明白so库编译的关系前,直接看网上博主的博文,常常会觉得云里雾里的,为什么一会儿通过Android工程cmake编译,一会儿又通过NDK命令去编译。两者编译的so库有什么区别? android版第三方库编译总体思路: 对于新手小白来说搞明白上面的总体思路图很有必…

PAT甲级 1056 Mice and Rice(25)

文章目录 题目题目大意基本思路AC代码总结 题目 原题链接 题目大意 给定参赛的老鼠数量为NP&#xff0c;每NG只老鼠分为一组&#xff0c;组中最胖的老鼠获胜&#xff0c;并进入下一轮&#xff0c;所有在本回合中失败的老鼠排名都相同&#xff0c;获胜的老鼠继续每NG只一组&am…