【前端基础】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. 文字阴影(了解)


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…...
补题蓝桥杯14届JavaB组第4题
算法:动态规划 需要两个一维数组来进行dp 一个用来记录到当前位置的最短时间,另一个用来记录到达当前位置传送门的最短时间 到达传送门的时间需要进行判断,如果上一次传送到达传送门,需要判断上一次传送到这的位置在当前传送门…...
kotlin的函数标准库使用
摘要说明 函数标准库常用的有: 1、apply: apply函数作为一个配置函数,可以传入一个接收者,然后调用一系列函数来配置它以方便使用,如果提供lambda给apply函数执行,它会返回配置好的接收者 使用介绍&#x…...
Visual Studio Code 跨平台安装与配置指南(附官方下载链接)
一、软件定位与核心功能 Visual Studio Code(简称VS Code)是微软开发的开源跨平台代码编辑器,支持超过50种编程语言的智能补全、调试和版本控制功能。2025版本新增AI辅助编程模块,可自动生成单元测试代码和API文档注释。 二、下载…...
STM32学习【4】ARM汇编(够用)
目录 ARM汇编语言基础写在前面 1. ARM汇编的分类2. 关于指令集指令集切换Thumb2指令集统一汇编语言(UAL)常用汇编指令 3. 汇编格式立即数与伪指令 4. 操作内存的汇编指令LDR:从内存加载数据到CPU寄存器STR:将数据从寄存器存储到内…...
Linux驱动开发实战(一):LED控制驱动详解
Linux驱动开发野火实战(一):LED控制驱动详解 文章目录 Linux驱动开发野火实战(一):LED控制驱动详解引言一、基础知识1.1 什么是字符设备驱动1.2 重要的数据结构read 函数write 函数open 函数release 函数 二…...
windows下安装pyenv+virtualenv+virtualenvwrapper
1、下载pyenv 进入git官网,打包下载zip到本地 2、解压到安装目录 解压下载好的pyenv-win-master.zip到自己的安装目录,如D:\Program Files 3、配置环境变量 右击桌面 此电脑 --> 属性 --> 高端系统设置 --> 环境变量 --> 新建系统变量…...
Cherno 游戏引擎笔记(91~111)
好久不见! 个人库的地址:(GitHub - JJJJJJJustin/Nut: The game_engine which learned from Cherno),可以看到我及时更新的结果。 -------------------------------Saving & Loading scene-----------------------…...
0x02 js、Vue、Ajax
文章目录 js核心概念js脚本引入html的方式基础语法事件监听 Vuevue简介v-forv-bindv-if&v-showv-model&v-on Ajax js 核心概念 JavaScript:是一门跨平台、面向对象的脚本语言,用来控制网页行为实现交互效果,由ECMAScript、BOM、DOM…...
Windows 11【1001问】删除Win11左下角小组件的6种方法
在Windows 11中,左下角的小组件功能虽然提供了天气、新闻等实用信息,但对于一些用户来说可能显得多余或干扰视线。因此,微软提供了多种方式让用户能够自定义是否显示这些小组件。以下是 6 种常见的设置方法来隐藏或关闭Windows 11左下角的小组…...
【动手学深度学习】基于Python动手实现线性神经网络
深度学习入门:基于Python动手实现线性回归 1,走进深度学习2,配置说明3,线性神经网络4,线性回归从0开始实现4.1,导入相关库4.2,生成数据4.3,读取数据集4.4,初始化模型参数…...
leetcode 912. 排序数组
912. 排序数组 912. 排序数组 题目 给你一个整数数组 nums,请你将该数组升序排列。 你必须在 不使用任何内置函数 的情况下解决问题,时间复杂度为 O(nlog(n)),并且空间复杂度尽可能小。 示例 1: 输入:nums [5,2,3,1…...
【芯片设计】NPU芯片前端设计工程师面试记录·20250227
应聘公司 某NPU/CPU方向芯片设计公司。 小声吐槽两句,前面我问了hr需不需要带简历,hr不用公司给打好了,然后我就没带空手去的。结果hr小姐姐去开会了,手机静音( Ĭ ^ Ĭ )面试官、我、另外的hr小姐姐都联系不上,结果就变成了两个面试官和我一共三个人在会议室里一人拿出…...
BUU40 [CSCCTF 2019 Qual]FlaskLight1【SSTI】
模板: {{.__class__.__base__.__subclasses__()[80].__init__.__globals__[__builtins__].eval("__import__(os).popen(type flag.txt).read()")}} 是个空字符串,.__class__代表这个空字符串的类是什么(这里是单引号双引号都行&a…...
WiFi IEEE 802.11协议精读:IEEE 802.11-2007,6,MAC service definition MAC服务定义
继续精读IEEE 802.11-2007 6,MAC service definition MAC服务定义 6.1 MAC服务概述 6.1.1 数据服务 此服务为对等逻辑链路控制(LLC)实体提供交换MAC服务数据单元(MSDU)的能力。为支持此服务,本地媒体访…...
2025学年安徽省职业院校技能大赛 “信息安全管理与评估”赛项 比赛样题任务书
2024-2025 学年广东省职业院校技能大赛 “信息安全管理与评估”赛项 技能测试试卷(五) 第一部分:网络平台搭建与设备安全防护任务书第二部分:网络安全事件响应、数字取证调查、应用程序安全任务书任务1 :内存取证&…...
VAE变分自编码器的初步理解
VAE的结构和原理 VAE由两部分组成: 编码器(Encoder): 编码器负责将输入数据(例如图像)压缩成一个潜在空间(latent space)的表示。这个潜在空间不是一个固定的值,而是一个…...
2025 最新版鸿蒙 HarmonyOS 开发工具安装使用指南
为保证 DevEco Studio 正常运行,建议电脑配置满足如下要求: Windows 系统 操作系统:Windows10 64 位、Windows11 64 位内存:16GB 及以上硬盘:100GB 及以上分辨率:1280*800 像素及以上 macOS 系统 操作系统…...
Rider 安装包 绿色版 Win/Mac/Linux 适合.NET和游戏开发者使用 2025全栈开发终极指南:从零配置到企业级实战
下载链接: https://pan.baidu.com/s/1cfkJf6Zgxc1XfYrVpwtHkA?pwd1234 导语:JetBrains Rider以跨平台支持率100%、深度.NET集成和智能代码分析能力,成为2025年全栈开发者的首选工具。本文涵盖环境配置、核心功能、框架集成、性能调优、团队…...
Python常见面试题的详解24
1. 如何对关键词触发模块进行测试 要点 功能测试:验证正常关键词触发、边界情况及大小写敏感性,确保模块按预期响应不同输入。 性能测试:关注响应时间和并发处理能力,保证模块在不同负载下的性能表现。 兼容性测试:测…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
vscode里如何用git
打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
