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

CSS的盒子模型(重点)

news 文章来源：https://blog.csdn.net/weixin_45533131/article/details/135017989 2025/5/1 5:28:28

网页布局的三大核心：盒子模型、浮动、定位

网页布局的过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
3. 往盒子里面装内容.
网页布局的核心本质： 就是利用 CSS 摆盒子。

  • 盒子模型的组成：

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

  • 边框（boeder）

CSS 边框属性允许你指定一个元素边框的样式和颜色。

border : border-width || border-style || border-color

边框样式 border-style 可以设置如下值：
 none：没有边框即忽略所有边框的宽度（默认值）
 solid：边框为单实线(最为常用的)
 dashed：边框为虚线 
 dotted：边框为点线

  • 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse;

 collapse 单词是合并的意思
 border-collapse: collapse; 表示相邻边框合并在一起

边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1. 测量盒子大小的时候,不量边框.
2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离。

  • 内边距影响盒子实际大小的情况

当我们给盒子指定 padding 值之后，发生了 2 件事情：
1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

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


解决方案：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

  •  外边距（margin）

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

 外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。
.header{ width:960px; margin:0 auto;}
1.7 外边距典型应用
常见的写法，以下三种都可以：
 margin-left: auto; margin-right: auto;
 margin: auto;
 margin: 0 auto;


注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

外边距合并问题

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况:
1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷

清除内外边距 

综合案例：

案例1：产品模块 

<!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>Document</title><style>/* 设置所有组件的默认内外边距为o */* {margin: 0;padding: 0;}/* 设置页面的背景颜色 */body {background-color: #f5f5f5;}img {/* 图片的宽度和父亲一样宽 */width: 100%;}.box{width: 372px;height: 518px;background-color: #fff;/* 设置盒子水平居中 */margin: 100px auto;}.review {height: 70px;/* 内边距左右36 *//* 因为这个段落没有有width属性,所以不会撑开盒子 */padding: 0 36px;/* 上边距 */margin-top: 42px;}.apprise {font-size: 12px;color: #b0b0b0;margin-top: 40px;padding: 0 36px;}.info h4 {/* 将块元素转成行内块 */display: inline-block;margin-top: 25px;margin-left: 36px;/* 不加粗 */font-weight: 400;}.info em {font-style: normal;margin: 0 12px 0 25px;color: #efe4e0;}.info span {font-size: 14px;color: #ff6700;}</style>
</head>
<body><div class="box"><img src="./images/img.jpg" alt=""><p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p><div class="apprise">来自于 117384232 的评价</div><div class="info"><h4>Redmi AirDots真无线蓝...</h4><em>|</em><span> 99.9元</span></div></div></body>
</html>

案例总结

1. 布局为啥用不同盒子,我只想用div？
标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p


2. 为啥用辣么多类名？
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。


3. 到底用 margin 还是 padding？
大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。


4. 自己做没有思路？
布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。
最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等
 

案例 2 ：快报模块

<!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>Document</title><style>* {margin: 0;padding: 0;}.box {width: 250px;height: 165px;border: 1px solid #cccccc;/* 水平居中 */margin: 100px auto;}.box h3 {height: 32px;/* 不加粗 */font-weight: 400;font-size: 14px;/* 底边框虚线 */border-bottom: 1px dotted #cccccc;/* 文字垂直居中对齐 */line-height: 32px;/* 左外边距15像素 */padding-left: 15px;       }.box ul li a {font-size: 12px;color: #666666;/* 去下划线 */text-decoration: none;}/* 鼠标悬停时触发 */.box ul li a:hover {/* 添加下划线 */text-decoration: underline;}/* 去点li的点 */li {list-style: none;}.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 class="one"><a href="#" >【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li></ul></div>
</body>
</html>

 新知识点: 去掉 li 前面的 项目符号(小圆点)

list-style: none;

相关文章：

CSS的盒子模型(重点)

网页布局的三大核心&#xff1a;盒子模型、浮动、定位 网页布局的过程&#xff1a; 1. 先准备好相关的网页元素&#xff0c;网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式&#xff0c;然后摆放到相应位置。 3. 往盒子里面装内容.网页布局的核心本质&#xff1a; 就…...

编程日记 2023/12/19 20:55:58

论文笔记：Bilinear Attention Networks

更精简的论文学习笔记 1、摘要 多模态学习中的注意力网络提供了一种选择性地利用给定视觉信息的有效方法。然而&#xff0c;学习每一对多模态输入通道的注意力分布的计算成本是非常昂贵的。为了解决这个问题&#xff0c;共同注意力为每个模态建立了两个独立的注意分布&#x…...

编程日记 2023/12/19 20:54:57

2312llvm,01基本介绍

LLVM设计的核心是它的IR. 在把LLVMIR翻译特定汇编语言时,LLVM首先将程序变换为(DAG)有向无环图,以更易选指(SelectionDAG)容易,然后变换回三地址指令,来调度指令(MachineFunction). 为了看清驱动编译程序时,调用的后续工具,用-###命令行参数: $ clang -### hello.c -o hello…...

编程日记 2023/12/19 20:51:54

Spring之手写IoC

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…...

编程日记 2023/12/19 20:50:54

IDEA运行JSP启动后页面中文乱码

源代码截图&#xff1a; 运行结果截图&#xff1a; 在<head>标签内加入代码 <% page contentType"text/html; charsetgb2312"%> 重启服务器&#xff0c;问题已改善 ————————————————— 该文仅供学习以及参考&#xff0c;可做笔记收藏…...

编程日记 2023/12/19 20:49:52

Python 自动化之收发邮件（二）

发邮件之Windows进程监控 文章目录 发邮件之Windows进程监控前言一、基本内容二、基本结构三、库模块四、函数模块1.进程监控2.邮件发送 五、程序运行模块1.获取时间2.用户输入3.进程监控3.1进程启动发邮件3.2进程停止发邮件 总结 前言 上一篇简单写了一下如何进行邮件的收发操…...

编程日记 2023/12/19 20:47:50

RHEL8_Linux_Ansible常用模块的使用

本章主要介绍Ansible中最常见模块的使用 shell模块文件管理模块软件包管理模块服务管理模块磁盘管理模块用户管理模块防火墙管理模块 ansible的基本用法如下。 ansible 机器名 -m 模块x -a "模块的参数" 对被管理机器执行不同的操作&#xff0c;只需要调用不同的模块…...

编程日记 2023/12/19 20:45:48

2023 英特尔On技术创新大会直播 | AI 融合发展之旅

前言 2023 年的英特尔 On 技术创新大会中国站&#xff0c;主要聚焦最新一代增强 AI 能力的计算平台&#xff0c;深度讲解如何支持开放、多架构的软件方案&#xff0c;以赋能人工智能并推动其持续发展。 大会的目标之一是优化系统并赋能开发者&#xff0c;特别注重芯片增强技术…...

编程日记 2023/12/19 20:44:47

【JavaWeb】往浏览器打印一个hello world

上集:建一个web项目 第一步&#xff1a;建好Servlet类的文件 右键src&#xff0c;建一个class 就行 第二步&#xff1a;编代码 可以直接复制粘贴 用来测试的类 import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; //↓是注解&#xff0…...

编程日记 2023/12/19 20:43:46

技术探秘：在RISC Zero中验证FHE——由隐藏到证明：FHE验证的ZK路径（1）

1. 引言 开源代码实现见&#xff1a; https://github.com/hashcloak/fhe_risc0_zkvm&#xff08;Rust&#xff09;https://github.com/weikengchen/vfhe-profiled&#xff08;Rust&#xff09;https://github.com/l2iterative/vfhe0&#xff08;Rust&#xff09; L2IV Resea…...

编程日记 2023/12/19 20:41:44

Spring容器中scope为prototype类型Bean的回收机制

文章目录 一、背景二、AutowireCapableBeanFactory 方法 autowireBean 分析三、Spring 容器中 scope 为 prototype 类型 Bean 的回收机制四、总结 一、背景 最近做 DDD 实践时&#xff0c;遇到业务对象需要交给 Spring 管理才能做一些职责内事情。假设账号注册邮箱应用层代码流…...

编程日记 2023/12/19 20:40:43

Python生成器（python系列25）

前言&#xff1a;什么是生成器&#xff0c;他和迭代器的区别是什么&#xff1f;什么时生成器表达式&#xff0c;为什么和列表推导式那么像呢&#xff1f; 生成器&#xff1a; 定义&#xff1a;能够动态&#xff08;循环一次&#xff0c;计算一次&#xff0c;返回一次&#xf…...

编程日记 2023/12/19 20:39:42

Vue项目搭建过程

Vue项目搭建过程 1、安装NodeJs 1.1 下载安装包 在 http://nodejs.cn/download/ 上下载64位安装包&#xff0c;然后进行安装&#xff0c;和普通软件的安装一样。 C:\Users\Administrator>node -v v16.13.1C:\Users\Administrator>npm -v 8.5.51.2 安装cnpm # 安装cn…...

编程日记 2023/12/19 20:38:41

系统分析师（软考）知识点整理（一）

第一章 信息 信息是不确定性的减少 xi: n个状态中的第i个状态p(xi):出现第i个状态的概率b: b一般取值为2 特征 #mermaid-svg-pvPkY9RE5GZIIIxl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pvPkY9RE5GZIIIxl…...

编程日记 2023/12/19 20:37:40

2021年数维杯国际大学生数学建模D题2021年电影市场票房波动模型分析求解全过程文档及程序

2021年数维杯国际大学生数学建模 D题 2021年电影市场票房波动模型分析 原题再现&#xff1a; 1、电影票房预测建模背景   随着人们文化消费需求的增加&#xff0c;电影院和银幕的数量不断增加&#xff0c;我国的电影产业不断呈现出繁荣景象。2019年&#xff0c;全国电影票房…...

编程日记 2023/12/19 20:34:37

Kubernetes 的用法和解析 -- 5

一.企业级镜像仓库Harbo 准备&#xff1a;另起一台新服务器&#xff0c;并配置docker yum源&#xff0c;安装docker 和 docker-compose 1.1 上传harbor安装包并安装 [rootharbor ~]# tar xf harbor-offline-installer-v2.5.3.tgz [rootharbor ~]# cp harbor.yml.tmpl harbor…...

编程日记 2023/12/19 20:33:35

HTML选择题试题——附答案

单选题 HTML的缩写是什么&#xff1f; A) Hyper Tool Markup LanguageB) Hyperlinks and Text Markup LanguageC) Hyper Text Markup LanguageD) Home Tool Markup Language 下列哪个标签用于定义文档的主体内容&#xff1f; A) <head>B) <body>C) <title>D)…...

编程日记 2023/12/19 20:32:33

html之CSS的高级选择器应用

文章目录 一、CSS高级选择器有哪些呢&#xff1f;二、高级选择器的应用1、层次选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器 2、结构伪类选择器&#xff08;不常用&#xff09;3、属性选择器E[attr]E[attrval]E[attr^val]E[attr$val]E[attr*val] 一、CSS高级选择器有…...

编程日记 2023/12/19 20:29:30

elementui+ ＜el-date-picker type=“datetime“/＞时间组件的当前时间的180天之内的禁止选择处理

需求1如下&#xff1a;当前时间180天不可选择&#xff0c;180天之后可以选择&#xff0c;之前的时间都禁止选择 页面代码如下&#xff1a; <el-date-picker v-model"temp.expire_time" :picker-options"pickerOption" type"datetime" placeh…...

编程日记 2023/12/19 20:28:29

全网好听的BGM都在这里下载，赶紧收藏好了

无论是自媒体创作者还是从事视频剪辑工作的朋友&#xff0c;对于BGM的选择都很重要&#xff0c;一首适配的BGM能大大提升你作品的质量&#xff0c;还能让作品更优秀。哪里才能找到好听又免费的BGM&#xff1f;下面推荐几个我多年收藏的6个音效、音频素材网站&#xff0c;赶紧收…...

编程日记 2023/12/19 20:27:28

Spark编程实验一：Spark和Hadoop的安装使用

目录 一、目的与要求 二、实验内容 三、实验步骤 1、安装Hadoop和Spark 2、HDFS常用操作 3、Spark读取文件系统的数据 四、结果分析与实验体会 一、目的与要求 1、掌握在Linux虚拟机中安装Hadoop和Spark的方法&#xff1b; 2、熟悉HDFS的基本使用方法&#xff1b; 3、掌…...

编程日记 2023/12/19 20:26:27

代理和AOP

一:java代理 整体分为两种&#xff1a;静态代理和动态代理 静态代理&#xff1a;23种设计模式里面有个代理模式&#xff0c;那个就是静态代理。 动态代理&#xff1a;分为编译时增强(AspectJ)和运行时增强(JDK动态代理和CGLIB动态代理) 1:静态代理 这种代理在我们日常生活中其…...

编程日记 2023/12/19 20:25:26

Solidity-3-类型

Solidity 是一种静态类型语言&#xff0c;这意味着每个变量&#xff08;状态变量和局部变量&#xff09;都需要在编译时指定变量的类型。 “undefined”或“null”值的概念在Solidity中不存在&#xff0c;但是新声明的变量总是有一个 默认值 &#xff0c;具体的默认值跟类型相…...

编程日记 2023/12/19 20:22:24

【mask转json】文件互转

mask图像转json文件 当只有mask图像时&#xff0c;可使用下面代码得到json文件 import cv2 import os import json import sysdef func(file:str) -> dict:png cv2.imread(file)gray cv2.cvtColor(png, cv2.COLOR_BGR2GRAY)_, binary cv2.threshold(gray,10,255,cv2.TH…...

编程日记 2023/12/19 20:20:22

华清远见嵌入式学习——ARM——作业1

要求&#xff1a; 代码&#xff1a; mov r0,#0 用于加mov r1,#1 初始值mov r2,#101 终止值loop: cmp r1,r2addne r0,r0,r1addne r1,r1,#1bne loop 效果&#xff1a;...

编程日记 2023/12/19 20:17:19

如何在公网环境使用固定域名远程访问内网BUG管理系统协同办公

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…...

编程日记 2023/12/19 20:15:18

k8s pod网络排查教程

1、背景 背景&#xff1a;在日常的k8s运维中&#xff0c;经常会遇到pod之间网络无法访问&#xff0c;域名无法解释的情况。且容器中网络排查命令不全&#xff0c;导致无法准确定位问题。 2、nsenter介绍 #Centos 下载方式 $ yum install util-linux -ynsenter 是一个 Linux …...

编程日记 2023/12/19 20:03:08

Apollo Planning——换道：LANE_CHANGE_DECIDER

LaneChangeDecider 是lanefollow 场景下&#xff0c;所调用的第一个task&#xff0c;它的作用主要有两点&#xff1a;判断当前是否进行变道&#xff0c;以及变道的状态&#xff0c;并将结果存在变量lane_change_status中&#xff1b;变道过程中将目标车道的reference line放置到…...

编程日记 2023/12/19 20:00:04

Python 爬虫之简单的爬虫（三）

爬取动态网页&#xff08;上&#xff09; 文章目录 爬取动态网页&#xff08;上&#xff09;前言一、大致内容二、基本思路三、代码编写1.引入库2.加载网页数据3.获取指定数据 总结 前言 之前的两篇写的是爬取静态网页的内容&#xff0c;比较简单。接下来呢给大家讲一下如何去…...

编程日记 2023/12/19 19:59:03

为突发事件提供高现势性数据支撑!大势智慧助力中山市2023应急测绘保障演练举行

12月14日&#xff0c;2023年度中山市应急测绘保障演练在中山树木园举行&#xff0c;市自然资源局总工程师邓宇文出席本次演练活动。来自全市自然资源、应急管理部门和部分测绘单位的近70人现场观摩了演练。本次演练由中山市自然资源局主办、中山市自然资源信息中心承办&#xf…...

编程日记 2023/12/19 19:51:56