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

【前端基础】Day 4 CSS盒子模型

news 2025/11/20 21:50:40

目录

1. 盒子模型

1.1 盒子模型布局

1.2 盒子模型组成

1.3 边框

1.4  表格细线边框

1.5 边框会影响盒子实际大小

1.6 内边距

1.7 外边距

1.8 外边距合并

1.9 清除内外边距

2. PS基本操作

3. 综合案例

3.1 案例1

3.2 案例2-快报模块

4. 圆角边框

5. 盒子阴影

6. 文字阴影（了解）

1. 盒子模型

1.1 盒子模型布局

1.2 盒子模型组成

1.3 边框

    <style>div {width: 300px;height: 200px;/* 边框粗细 一般单位用px */border-width: 5px;/* 边框的样式 solid 实线边框  dashed 虚线边框  dotted 点线边框 */border-style: dotted;/* 边框的颜色 */border-color: pink;}</style>

具有重叠性，所以一般先写大范围再写小范围

/* 得到的盒子为：上边框粗细为2像素、实线、红色，其余边框粗细为5像素、实线、蓝色 */

border: 5px solid blue;

border-top: 2px solid red;

/* 得到的盒子为：边框粗细均为5像素、实线、蓝色 */

border-top: 2px solid red;

border: 5px solid blue;

1.4  表格细线边框

    <style>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid red;/* 合并相邻的边框 */border-collapse: collapse;font-size: 14px;text-align: center;}</style><body><table align="center" cellspacing="0"><thead><tr><th>排行</th><th>关键词</th></tr></thead><tbody><tr><td>1</td><td>hhh</td></tr></tbody></table>
</body>

1.5 边框会影响盒子实际大小

1.6 内边距

 padding-left: 5px;

 padding-top: 5px;

 padding-bottom: 5px;

 padding-right: 5px;

 复合写法：

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

盒子内字数不一样多，让padding撑开盒子——新浪导航案例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 41px;background-color: #fcfcfc;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;/* 文字居中对齐 */line-height: 41px;}div a {font-size: 12px;color: #4c4c4c;text-decoration: none;display: inline-block;padding: 0 20px;}div a:hover {background-color: #eee;color: #ff8500;}</style>
</head><body><div><a href="#">设为首页</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">博客</a><a href="#">微博</a><a href="#">关注我</a></div></body></html>

1.7 外边距

1.8 外边距合并

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷

1.9 清除内外边距

2. PS基本操作

3. 综合案例

3.1 案例1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {/* 外边距 */margin: 0;/* 内边距 */padding: 0;}body {background-color: #f5f5f5;}.box {width: 298px;height: 415px;background-color: #fff;margin: 100px auto;}.box img {/* 图片宽度和父亲一样宽 */width: 100%;}.review {height: 70px;font-size: 14px;/* 这个段落没有width属性 所以padding不会撑开盒子的宽度 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style>
</head><body><div class="box"><img src="../img1.jpg"><p class="review">快递牛，整体不错蓝牙可以秒连。红米给力</p><div class="appraise">来自于111用户的评价</div><div class="info"><h4>Redmi AirDots真无线蓝…</h4><em>|</em><span>99.9元</span></div></div>
</body></html>

总结

3.2 案例2-快报模块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}li {/* 去掉li前面的小圆点 */list-style: none;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover {text-decoration: underline;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}.box ul {margin-top: 7px;}</style>
</head><body><div class="box"><h3>品优购快报</h3><ul><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】母亲节，健康好礼！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】9.9元洗100张照片！</a></li><li><a href="#">【特惠】长虹智能空调立省1000</a></li></ul></div>
</body></html>

4. 圆角边框

    <style>/* 圆形的做法 */.yuanxing {width: 200px;height: 200px;background-color: pink;border-radius: 50%;}/* 圆角矩形的做法 */.yuanjiaojuxing {width: 600px;height: 200px;background-color: pink;border-radius: 100px;}/* 可以设置不同的圆角 */.radius {width: 200px;height: 200px;background-color: pink;border-radius: 10px 20px 30px 40px;}</style>

5. 盒子阴影

6. 文字阴影（了解）

相关文章：

【前端基础】Day 4 CSS盒子模型

目录 1. 盒子模型 1.1 盒子模型布局 1.2 盒子模型组成 1.3 边框 1.4 表格细线边框 1.5 边框会影响盒子实际大小 1.6 内边距 1.7 外边距 1.8 外边距合并 1.9 清除内外边距 2. PS基本操作 3. 综合案例 3.1 案例1 3.2 案例2-快报模块 4. 圆角边框 5. 盒子阴影 6…...

编程日记 2025/2/28 13:54:53

补题蓝桥杯14届JavaB组第4题

算法&#xff1a;动态规划 需要两个一维数组来进行dp 一个用来记录到当前位置的最短时间&#xff0c;另一个用来记录到达当前位置传送门的最短时间 到达传送门的时间需要进行判断&#xff0c;如果上一次传送到达传送门&#xff0c;需要判断上一次传送到这的位置在当前传送门…...

编程日记 2025/2/28 13:50:50

kotlin的函数标准库使用

摘要说明 函数标准库常用的有&#xff1a; 1、apply&#xff1a; apply函数作为一个配置函数&#xff0c;可以传入一个接收者&#xff0c;然后调用一系列函数来配置它以方便使用&#xff0c;如果提供lambda给apply函数执行&#xff0c;它会返回配置好的接收者 使用介绍&#x…...

编程日记 2025/2/28 13:44:41

Visual Studio Code 跨平台安装与配置指南（附官方下载链接）

一、软件定位与核心功能 Visual Studio Code&#xff08;简称VS Code&#xff09;是微软开发的开源跨平台代码编辑器&#xff0c;支持超过50种编程语言的智能补全、调试和版本控制功能。2025版本新增AI辅助编程模块&#xff0c;可自动生成单元测试代码和API文档注释。 二、下载…...

编程日记 2025/2/28 13:43:40

STM32学习【4】ARM汇编（够用）

目录 ARM汇编语言基础写在前面 1. ARM汇编的分类2. 关于指令集指令集切换Thumb2指令集统一汇编语言&#xff08;UAL&#xff09;常用汇编指令 3. 汇编格式立即数与伪指令 4. 操作内存的汇编指令LDR&#xff1a;从内存加载数据到CPU寄存器STR&#xff1a;将数据从寄存器存储到内…...

编程日记 2025/2/28 13:41:38

Linux驱动开发实战（一）：LED控制驱动详解

Linux驱动开发野火实战&#xff08;一&#xff09;&#xff1a;LED控制驱动详解 文章目录 Linux驱动开发野火实战&#xff08;一&#xff09;&#xff1a;LED控制驱动详解引言一、基础知识1.1 什么是字符设备驱动1.2 重要的数据结构read 函数write 函数open 函数release 函数 二…...

编程日记 2025/2/28 13:38:33

windows下安装pyenv+virtualenv+virtualenvwrapper

1、下载pyenv 进入git官网&#xff0c;打包下载zip到本地 2、解压到安装目录 解压下载好的pyenv-win-master.zip到自己的安装目录&#xff0c;如D:\Program Files 3、配置环境变量 右击桌面 此电脑 --> 属性 --> 高端系统设置 --> 环境变量 --> 新建系统变量…...

编程日记 2025/2/28 13:37:32

Cherno 游戏引擎笔记（91~111）

好久不见&#xff01; 个人库的地址&#xff1a;&#xff08;GitHub - JJJJJJJustin/Nut: The game_engine which learned from Cherno&#xff09;&#xff0c;可以看到我及时更新的结果。 -------------------------------Saving & Loading scene-----------------------…...

编程日记 2025/2/28 13:35:30

0x02 js、Vue、Ajax

文章目录 js核心概念js脚本引入html的方式基础语法事件监听 Vuevue简介v-forv-bindv-if&v-showv-model&v-on Ajax js 核心概念 JavaScript&#xff1a;是一门跨平台、面向对象的脚本语言&#xff0c;用来控制网页行为实现交互效果&#xff0c;由ECMAScript、BOM、DOM…...

编程日记 2025/2/28 13:33:26

Windows 11【1001问】删除Win11左下角小组件的6种方法

在Windows 11中&#xff0c;左下角的小组件功能虽然提供了天气、新闻等实用信息&#xff0c;但对于一些用户来说可能显得多余或干扰视线。因此&#xff0c;微软提供了多种方式让用户能够自定义是否显示这些小组件。以下是 6 种常见的设置方法来隐藏或关闭Windows 11左下角的小组…...

编程日记 2025/2/28 13:31:22

【动手学深度学习】基于Python动手实现线性神经网络

深度学习入门&#xff1a;基于Python动手实现线性回归 1&#xff0c;走进深度学习2&#xff0c;配置说明3&#xff0c;线性神经网络4&#xff0c;线性回归从0开始实现4.1&#xff0c;导入相关库4.2&#xff0c;生成数据4.3&#xff0c;读取数据集4.4&#xff0c;初始化模型参数…...

编程日记 2025/2/28 13:27:16

leetcode 912. 排序数组

912. 排序数组 912. 排序数组 题目 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 你必须在 不使用任何内置函数 的情况下解决问题&#xff0c;时间复杂度为 O(nlog(n))&#xff0c;并且空间复杂度尽可能小。 示例 1&#xff1a; 输入&#xff1a;nums [5,2,3,1…...

编程日记 2025/2/28 13:26:14

【芯片设计】NPU芯片前端设计工程师面试记录·20250227

应聘公司 某NPU/CPU方向芯片设计公司。 小声吐槽两句，前面我问了hr需不需要带简历，hr不用公司给打好了，然后我就没带空手去的。结果hr小姐姐去开会了，手机静音( Ĭ ^ Ĭ )面试官、我、另外的hr小姐姐都联系不上，结果就变成了两个面试官和我一共三个人在会议室里一人拿出…...

编程日记 2025/2/28 13:21:09

BUU40 [CSCCTF 2019 Qual]FlaskLight1【SSTI】

模板&#xff1a; {{.__class__.__base__.__subclasses__()[80].__init__.__globals__[__builtins__].eval("__import__(os).popen(type flag.txt).read()")}} 是个空字符串&#xff0c;.__class__代表这个空字符串的类是什么&#xff08;这里是单引号双引号都行&a…...

编程日记 2025/2/28 13:19:07

WiFi IEEE 802.11协议精读：IEEE 802.11-2007，6，MAC service definition MAC服务定义

继续精读IEEE 802.11-2007 6&#xff0c;MAC service definition MAC服务定义 6.1 MAC服务概述 6.1.1 数据服务 此服务为对等逻辑链路控制&#xff08;LLC&#xff09;实体提供交换MAC服务数据单元&#xff08;MSDU&#xff09;的能力。为支持此服务&#xff0c;本地媒体访…...

编程日记 2025/2/28 13:18:00

2025学年安徽省职业院校技能大赛 “信息安全管理与评估”赛项 比赛样题任务书

2024-2025 学年广东省职业院校技能大赛 “信息安全管理与评估”赛项 技能测试试卷&#xff08;五&#xff09; 第一部分&#xff1a;网络平台搭建与设备安全防护任务书第二部分&#xff1a;网络安全事件响应、数字取证调查、应用程序安全任务书任务1 &#xff1a;内存取证&…...

编程日记 2025/2/28 13:16:56

VAE变分自编码器的初步理解

VAE的结构和原理 VAE由两部分组成&#xff1a; 编码器&#xff08;Encoder&#xff09;&#xff1a; 编码器负责将输入数据&#xff08;例如图像&#xff09;压缩成一个潜在空间&#xff08;latent space&#xff09;的表示。这个潜在空间不是一个固定的值&#xff0c;而是一个…...

编程日记 2025/2/28 13:15:49

2025 最新版鸿蒙 HarmonyOS 开发工具安装使用指南

为保证 DevEco Studio 正常运行&#xff0c;建议电脑配置满足如下要求&#xff1a; Windows 系统 操作系统&#xff1a;Windows10 64 位、Windows11 64 位内存&#xff1a;16GB 及以上硬盘&#xff1a;100GB 及以上分辨率&#xff1a;1280*800 像素及以上 macOS 系统 操作系统…...

编程日记 2025/2/28 13:13:46

Rider 安装包 绿色版 Win/Mac/Linux 适合.NET和游戏开发者使用 2025全栈开发终极指南：从零配置到企业级实战

下载链接&#xff1a; https://pan.baidu.com/s/1cfkJf6Zgxc1XfYrVpwtHkA?pwd1234 导语&#xff1a;JetBrains Rider以跨平台支持率100%、深度.NET集成和智能代码分析能力&#xff0c;成为2025年全栈开发者的首选工具。本文涵盖环境配置、核心功能、框架集成、性能调优、团队…...

编程日记 2025/2/28 13:12:45

Python常见面试题的详解24

1. 如何对关键词触发模块进行测试 要点 功能测试&#xff1a;验证正常关键词触发、边界情况及大小写敏感性&#xff0c;确保模块按预期响应不同输入。 性能测试&#xff1a;关注响应时间和并发处理能力&#xff0c;保证模块在不同负载下的性能表现。 兼容性测试&#xff1a;测…...

编程日记 2025/2/28 13:09:41

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/11/19 20:36:29

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/11/18 11:45:13

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/11/16 22:28:00

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/11/20 18:59:22

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/11/17 6:48:16

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

编程新知 2025/11/17 3:51:27

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

编程新知 2025/11/19 3:03:16