前端 | （六）CSS盒子模型 | 尚硅谷前端html+css零基础教程2023最新

学习来源：尚硅谷前端html+css零基础教程，2023最新前端开发html5+css3视频

文章目录

  • 📚元素的显示模式
    • 🐇CSS长度单位
    • 🐇元素的显示模式
      • ⭐️块元素（block）
      • ⭐️行内元素（inline）
      • ⭐️行内块元素（inline-block）
    • 🐇总结各元素的显示模式
    • 🐇修改元素的显示模式
  • 📚CSS盒子模型
    • 🐇盒子模型的组成
    • 🐇盒子内容区（content）
    • 🐇盒子的内边距（padding）
    • 🐇盒子边框（border）
    • 🐇盒子外边距（margin）
      • ⭐️margin注意事项
      • ⭐️margin塌陷问题
      • ⭐️margin合并问题
    • 🐇处理内容溢出
    • 🐇隐藏元素的方式
    • 🐇样式的继承
    • 🐇默认样式
    • 🐇布局小技巧🔥
    • 🐇元素之间的空白问题
    • 🐇行内块的幽灵空白问题

⭐️前文回顾：前端 | （五）CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p87-p112，本文对应p113-p132
⭐️补充网站：W3school，MDN

📚元素的显示模式

🐇CSS长度单位

在这里插入图片描述

🐇元素的显示模式

⭐️块元素（block）

  • 也即块级元素。
  • 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
  • 默认宽度：撑满父元素。
  • 默认高度：由内容撑开。
  • 【可以通过CSS设置宽高】。

⭐️行内元素（inline）

  • 也即内联元素。
  • 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
  • 默认宽度：由内容撑开。
  • 默认高度：由内容撑开。
  • 【无法通过CSS设置宽高】。

⭐️行内块元素（inline-block）

  • 也即内联块元素。
  • 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
  • 默认宽度：由内容撑开。
  • 默认高度：由内容撑开。
  • 【可以通过CSS设置宽高】。

🐇总结各元素的显示模式

在这里插入图片描述

🐇修改元素的显示模式

通过CSS中的display属性可以修改元素的默认显示模式，常用值如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>修改元素的显示模式</title><style>div{width: 200px;height: 200px;font-size: 20px;/* 块元素改行内块元素，CSS可控制宽高且可一行显示 */display: inline-block;}#d1{background-color: pink;}#d2{background-color: palegreen;}#d3{background-color: blue;}a{font-size: 20px;width: 200px;height: 200px;/* 行内元素改块元素，css可控制宽高 *//* 这时候点击整个框都能完成超链接跳转 */display: block;}#s1{background-color: pink;}#s2{background-color: palegreen;}#s3{background-color: blue;}</style>
</head>
<body><div id="d1">你好1</div><div id="d2">你好2</div><div id="d3">你好3</div><hr><a id="s1" href="https://www.baidu.com">去百度</a><a id="s2" href="https://www.jd.com">去京东</a><a id="s3" href="https://www.toutiao.com">去头条</a>
</body> 
</html>

📚CSS盒子模型

🐇盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。

  • margin（外边框）：盒子与外界的距离。
  • border（边框）：盒子的边框。
  • padding（内边距）：紧贴内容的补白区域。
  • content（内容）：元素中的文本或后代元素都是它的内容。

在这里插入图片描述

🐇盒子内容区（content）

在这里插入图片描述

关于默认宽度：

  • 所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。
  • 总宽度 = 父的content - 自身左右margin。
  • 内容区的宽度 = 父的content - 自身左右margin - 自身左右border - 自身左右padding。

🐇盒子的内边距（padding）

在这里插入图片描述

🐇盒子边框（border）

在这里插入图片描述在这里插入图片描述

🐇盒子外边距（margin）

在这里插入图片描述

⭐️margin注意事项

在这里插入图片描述

⭐️margin塌陷问题

在这里插入图片描述

  • 塌陷举例：

    <!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>margin塌陷问题</title><style>.outer{width: 400px;height: 400px;background-color: gray;}.inner1{width: 100px;height: 100px;background-color: orange;/* 给inner1加下外边框，没问题 *//* margin-bottom: 50px; *//* 给inner1加上外边框，外边框动了，两个小框反而没动 */margin-top: 50px;}.inner2{width: 100px;height: 100px;background-color: green;/* 给inner2加上外边框，没问题 *//* margin-top: 50px; */}</style>
</head>
<body><div class="outer"><div class="inner1">inner1</div><div class="inner2">inner2</div></div>
</body> 
</html>

    在这里插入图片描述

  • 解决举例：

    <!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>margin塌陷问题</title><style>.outer{width: 400px;height: 400px;background-color: gray;border: 3px solid red;}.inner1{width: 100px;height: 100px;background-color: orange;/* 给inner1加下外边框，没问题 *//* margin-bottom: 50px; *//* 给inner1加上外边框，外边框动了，两个小框反而没动 */margin-top: 50px;}.inner2{width: 100px;height: 100px;background-color: green;/* 给inner2加上外边框，没问题 *//* margin-top: 50px; */}</style>
</head>
<body><div class="outer"><div class="inner1">inner1</div><div class="inner2">inner2</div></div>
</body> 
</html>

    在这里插入图片描述

  • 最理想的解决方案：overflow:hidden，不影响大小

    <!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>margin塌陷问题</title><style>.outer{width: 400px;height: 400px;background-color: gray;overflow: hidden;}.inner1{width: 100px;height: 100px;background-color: orange;/* 给inner1加下外边框，没问题 *//* margin-bottom: 50px; *//* 给inner1加上外边框，外边框动了，两个小框反而没动 */margin-top: 50px;}.inner2{width: 100px;height: 100px;background-color: green;/* 给inner2加上外边框，没问题 *//* margin-top: 50px; */}</style>
</head>
<body><div class="outer"><div class="inner1">inner1</div><div class="inner2">inner2</div></div>
</body> 
</html>

    在这里插入图片描述

⭐️margin合并问题

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>margin合并问题</title><style>.outer{width: 400px;height: 400px;background-color: gray;overflow: hidden;}.inner1{width: 100px;height: 100px;background-color: orange;margin-bottom: 100px;}.inner2{width: 100px;height: 100px;background-color: green;margin-top: 100px;}</style>
</head>
<body><div class="outer"><div class="inner1">inner1</div><div class="inner2">inner2</div></div>
</body> 
</html>

在这里插入图片描述
在这里插入图片描述

🐇处理内容溢出

在这里插入图片描述

🐇隐藏元素的方式

在这里插入图片描述

🐇样式的继承

在这里插入图片描述

🐇默认样式

在这里插入图片描述

🐇布局小技巧🔥

在这里插入图片描述

<!DOCTYPE html>
<html lang="zn-CN">
<head><meta charset="UTF-8"><title>布局技巧</title><style>.outer{width: 400px;height: 400px;background-color: gray;overflow: hidden;}.inner{width: 200px;height: 100px;background-color: orange;padding: 5px;border: 5px solid red;/* 让橙色盒子在水平方向上居中 */margin: 0 auto;/* 让橙色盒子垂直居中，别忘了父元素的overflow *//* (400-(100+10+10))/2 */margin-top: 140px;/* 让文字水平居中 */text-align: center;/* 让文字垂直居中 */line-height: 100px;}</style>
</head>
<body><div class="outer"><div class="inner">inner</div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zn-CN">
<head><meta charset="UTF-8"><title>布局技巧_2</title><style>.outer{width: 400px;height: 400px;background-color: gray;/* 行内元素按文字处理，让inner水平居中 */text-align: center;/* 让inner垂直居中 */line-height: 400px;}.inner{background-color: orange;font-size: 20px;}</style>
</head>
<body><div class="outer"><span class="inner">出来玩啊?</span></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zn-CN">
<head><meta charset="UTF-8"><title>布局技巧_3</title><style>.outer{width: 400px;height: 400px;background-color: gray;/* 行内元素按文字处理，让inner和img水平居中 */text-align: center;/* 让inner和img垂直居中 */line-height: 400px;/* 图片绝对垂直居中 */font-size: 0px;}.inner{background-color: orange;font-size: 20px;/* 每个元素都要 */vertical-align: middle;}img{vertical-align: middle;border: 5px solid red;}</style>
</head>
<body><div class="outer"><span class="inner">x出来玩啊?</span><img src="maomao.png" alt="maomao"></div>
</body>
</html>

在这里插入图片描述

🐇元素之间的空白问题

在这里插入图片描述
给上边猫猫例子的font-size为0去掉——空格就看到了

<!DOCTYPE html>
<html lang="zn-CN">
<head><meta charset="UTF-8"><title>布局技巧_3</title><style>.outer{width: 400px;height: 400px;background-color: gray;/* 行内元素按文字处理，让inner和img水平居中 */text-align: center;/* 让inner和img垂直居中 */line-height: 400px;/* 图片绝对垂直居中 *//* font-size: 0px; */}.inner{background-color: orange;font-size: 20px;/* 每个元素都要 */vertical-align: middle;}img{vertical-align: middle;border: 5px solid red;}</style>
</head>
<body><div class="outer"><span class="inner">x出来玩啊?</span><img src="maomao.png" alt="maomao"></div>
</body>
</html>

在这里插入图片描述

🐇行内块的幽灵空白问题

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。如下所示：

<!DOCTYPE html>
<html lang="zn-CN">
<head><meta charset="UTF-8"><title>行内块幽灵空白问题</title><style>div{width: 600px;/* 没给高 */background-color: pink;}</style>
</head>
<body><div><img src="maomao.png" alt="maomao">xg</div>
</body>
</html>

在这里插入图片描述在这里插入图片描述

以方案一解决

<!DOCTYPE html>
<html lang="zn-CN">
<head><meta charset="UTF-8"><title>行内块幽灵空白问题</title><style>div{width: 600px;background-color: pink;}img{border: 2px solid red;vertical-align: bottom;}</style>
</head>
<body><div><img src="maomao.png" alt="maomao">xg</div>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/29668.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

浅谈电能分项计量在节能降耗中的应用

浅谈电能分项计量在节能降耗中的应用

摘要&#xff1a;随着电力企业改革活动的持续推进&#xff0c;要想加快改革进程、优化改革效果&#xff0c;应该提高对节能降耗问题的关注度。在应用电力计量技术的过程中巧妙地渗透节能降耗这一理念&#xff0c;以此提高技术应用率&#xff0c;充分体现技术应用价值&#xff0…
阅读更多...
selenium-多窗口和frame处理

selenium-多窗口和frame处理

1.切换窗口 适用场景&#xff1a;点击按钮后&#xff0c;重新打开一个窗口&#xff0c;想要在新的窗口定位操作&#xff0c;就需要切换窗口 原理&#xff1a;获取窗口的唯一标识就是句柄&#xff0c;获取到句柄&#xff0c;就可以切换到对应的窗口了 处理方法&#xff1a; …
阅读更多...
S3C2440点亮LED（裸机开发）

S3C2440点亮LED（裸机开发）

文章目录 前言一、环境介绍一、GPIO介绍二、点亮开发板的LED1.预备动作2.led代码 总结 前言 本期和大家主要分享的是使用S3C2440开发板点亮一个LED灯&#xff0c;可能大家拿到开发板之后做的第一件事情都是点灯&#xff0c;这是为什么呢&#xff1f;因为点灯这件事情不仅能够检…
阅读更多...
curl操作

curl操作

下载路径&#xff1a;https://curl.se/windows/ 参考&#xff1a;https://blog.csdn.net/weixin_45191386/article/details/130652821 操作&#xff1a; curl http://localhost:8085/api/v1/aaa/bbbb/?ccc 652781344055627776
阅读更多...
如何在PADS Logic中查找器件

如何在PADS Logic中查找器件

PADS Logic提供类似于Windows的查找功能&#xff0c;可以进行器件的查找。 &#xff08;1&#xff09;在Logic设计界面中&#xff0c;将菜单显示中的“选择工具栏”进行打开&#xff0c;如图1所示&#xff0c;会弹出对应的“选择工具栏”的分栏菜单选项&#xff0c;如图2所示。…
阅读更多...
【ArcGIS Pro二次开发】(46)：要素类从上到下、从左到右排序

【ArcGIS Pro二次开发】(46)：要素类从上到下、从左到右排序

要素类经过编辑之后&#xff0c;【OBJECTID】字段会变得不规律。应部分网友要求&#xff0c;做了这个从上到下、从左到右排序的工具。 不过后来在ArcGIS Pro中发现了一个【排序】工具&#xff0c;已经可以完美实现这个功能需求&#xff0c;发现自己做了个白工。 不过做了不能白…
阅读更多...
实例019 以图形按钮显示的界面

实例019 以图形按钮显示的界面

实例说明 菜单和工具栏虽然能方便用户操作程序的相应功能&#xff0c;但各有缺点。如果采用按钮式功能菜单&#xff0c;不但美观大方&#xff0c;而且操作灵活。当单击按钮时&#xff0c;用户区将显示相应的操作按钮组。下面介绍图形界面式菜单的设计方法。运行本例&#xff0…
阅读更多...
算法与数据结构-排序

算法与数据结构-排序

文章目录 一、如何分析一个排序算法1.1 排序算法的执行效率1.1.1 最好情况、最坏情况、平均情况时间复杂度1.1.1.1 最好、最坏情况分析1.1.1.2 平均情况分析 1.1.2 时间复杂度的系数、常数 、低阶1.1.3 比较次数和交换&#xff08;或移动&#xff09;次数 1.2 排序算法的内存消…
阅读更多...
【PostgreSQL内核学习（二）—— 查询分析】

【PostgreSQL内核学习（二）—— 查询分析】

查询分析 查询处理查询分析查询处理与查询分析的关系查询分析执行流程Lex和YaccLex&#xff1a;Yacc&#xff1a;词法分析工具Lex语法分析工具Yacc使用Lex和Yacc的案例 词法和语法分析以SELECT语句为例讲解 PostgreSQL中查询语句如何被解析并生成分析树。 语义分析 声明&#x…
阅读更多...
图片速览 DCN K-means-friendly Spaces: Simultaneous Deep Learning and Clustering

图片速览 DCN K-means-friendly Spaces: Simultaneous Deep Learning and Clustering

本文使用了一种交替更新网络参数和聚类中心的方法。在网络更新完成之后&#xff0c;对于固定的网络参数和 M&#xff0c;再更新当前样本的分配向量。然后根据新的分配结果如式子3.8更新聚类中心&#xff1a; 注&#xff1a;文中还有问题是否能进行凸优化的部分 CG https…
阅读更多...
什么是70v转12v芯片?

什么是70v转12v芯片?

问&#xff1a;什么是70v转12v芯片&#xff1f; 答&#xff1a;70v转12v芯片是一种电子器件&#xff0c;其功能是将输入电压范围在9v至100v之间的电源转换为稳定的12v输出电压。这种芯片通常被用于充电器、车载电池充电器和电源适配器等设备中。 问&#xff1a;这种芯片的最大…
阅读更多...
学习babylon.js --- [3] 开启https

学习babylon.js --- [3] 开启https

babylonjs提供WebVR功能&#xff0c;但是使用这个功能得用https&#xff0c;本文讲述如何使用自签名证书来开启https&#xff0c;基于第二篇文章中搭建的工程。 一 生成自签名证书 首先要安装openssl&#xff0c;这个去网上搜下就行了。安装完之后在终端下输入openssl回车可以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023