前端 | （六）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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

mac 下 geoserver 安装

mac 下 geoserver 安装

一、去官网下载geoserver https://geoserver.org/ 选择一个版本&#xff0c;然后点进去 二、需要配置java环境和设置geoserver 环境变量 1&#xff09;、java 环境安装 Java Downloads | Oracle 中国 2&#xff09;、环境变量设置 1.打开终端&#xff1a;command 空格键 2…
阅读更多...
一道SQL题

一道SQL题

有个搞数仓的朋友不知道从哪儿弄了个题。。。 做了做体验了一下。。。 记录记录。 分析 要保证每天都要做新题 5天必须都做题&#xff0c;不然GG 最后一天必须做新题&#xff0c;如果最后一天做新题了&#xff0c;前面那几天没做新题&#xff0c;做的是老题 最后一天&#…
阅读更多...
STM32使用高级定时器输出互补pwm波

STM32使用高级定时器输出互补pwm波

STM32使用高级定时器输出互补pwm波 前言硬件和软件cubemx新建工程打开Debug模式配置时钟源六大时钟的作用选择Crystal/Ceramic Resonator&#xff0c;即使用外部晶振作为HSE的时钟源。 配置时钟配置高级定时器TIM8和通用定时器TIM3这里大概解释一下配置pwm输出用到的几个参数我…
阅读更多...
git clone 或者是vscode clone 时遇到the remote end hung up unexpectedly

git clone 或者是vscode clone 时遇到the remote end hung up unexpectedly

fatal: the remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed使用git clone总是报错 查看原因有三种可能&#xff1a;要么是缓存不够&#xff0c;要么是网络不行&#xff0c;要么墙的原因。 如果是网络不行&#xff0c;可以配置git的最低速度和最…
阅读更多...
postgresql导入导出数据库的一些问题

postgresql导入导出数据库的一些问题

新建一个数据库 别忘了添加空间数据的扩展 备份之前的数据库 注意一定要自定义表&#xff0c;去掉 spatial_ref_sys &#xff0c;要不然需要先drop在创建&#xff0c;可能会报错。 一般不会去导函数&#xff0c;如果有个别自己创建的函数可以手动复制一下&#xff0c;全部导的话…
阅读更多...
SQL 上升的温度

SQL 上升的温度

197 上升的温度 SQL架构 表&#xff1a; Weather ---------------------- | Column Name | Type | ---------------------- | id | int | | recordDate | date | | temperature | int | ---------------------- id 是这个表的主键 该表包含特定日期的温度信息 编写一个 SQL …
阅读更多...
第108天：免杀对抗-Python混淆算法反序列化打包生成器Py2exeNuitka

第108天：免杀对抗-Python混淆算法反序列化打包生成器Py2exeNuitka

知识点 #知识点&#xff1a; 1、Python-对执行代码做文章 2、Python-对shellcode做文章 3、Python-对代码打包器做文章#章节点&#xff1a; 编译代码面-ShellCode-混淆 编译代码面-编辑执行器-编写 编译代码面-分离加载器-编写 程序文件面-特征码定位-修改 程序文件面-加壳花指…
阅读更多...
《面试1v1》Kafka基础

《面试1v1》Kafka基础

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…
阅读更多...
Modbus TCP/BACnet IP/MQTT物联网网关IOT-810介绍及其典型应用

Modbus TCP/BACnet IP/MQTT物联网网关IOT-810介绍及其典型应用

伴随着计算机技术以及互联网的发展&#xff0c;物联网这个概念已经逐渐进入我们的日常生活&#xff0c;例如智能泊车&#xff0c;智能家居&#xff0c;智能照明&#xff0c;智能楼宇等。智能楼宇是将传统的楼宇自控系统与物联网技术相融合&#xff0c;把系统中常见的传感器、设…
阅读更多...
kotlin基础

kotlin基础

val和var的区别 var是一个可变变量&#xff0c;这是一个可以通过重新分配来更改为另一个值的变量。这种声明变量的方式和java中声明变量的方式一样。 val是一个只读变量&#xff0c;这种声明变量的方式相当于java中的final变量。一个val创建的时候必须初始化&#xff0c;因为…
阅读更多...
【Hippo4j监控Web容器Tomcat线程池】

【Hippo4j监控Web容器Tomcat线程池】

&#x1f680; 线程池管理工具-Hippo4j &#x1f680; &#x1f332; AI工具、AI绘图、AI专栏 &#x1f340; &#x1f332; 如果你想学到最前沿、最火爆的技术&#xff0c;赶快加入吧✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;CSDN-Java领域优质创作者&#…
阅读更多...
k8s与集群管理

k8s与集群管理

从docker讲起 终于有人把 Docker 讲清楚了&#xff0c;万字详解&#xff01; Docker资源&#xff08;CPU/内存/磁盘IO/GPU&#xff09;限制与分配指南 默认情况下&#xff0c;Docker容器是没有资源限制的&#xff0c;它会尽可能地使用宿主机能够分配给它的资源。如果不对容器资…
阅读更多...
ylb-接口6验证手机号是否注册

ylb-接口6验证手机号是否注册

总览&#xff1a; 1、service处理 在api模块下service包&#xff0c;创建一个UserService接口&#xff1a;&#xff08;根据手机号查询数据queryByPhone(String phone)&#xff09; package com.bjpowernode.api.service;import com.bjpowernode.api.model.User; import co…
阅读更多...
如何使用Spring Boot实现分页和排序?

如何使用Spring Boot实现分页和排序?

使用Spring Boot实现分页和排序需要借助Spring Data JPA。Spring Data JPA是Spring Data项目中的一个模块&#xff0c;提供了简化数据访问层的功能&#xff0c;包括分页和排序。 接下来我们通过一段Java代码&#xff0c;展示如何使用Spring Data JPA和Spring Boot实现分页和排…
阅读更多...
el-progress组件使用，样式修改，自定义文字

el-progress组件使用，样式修改，自定义文字

正常的el-progress显示是这样的 修改后 自动计算percentage&#xff0c;format自定义显示文字 <template><div><div class"content-view"><div v-for"(item, index) in progressList" class"item-view"><el-prog…
阅读更多...
单轴机器人的结构与特点

单轴机器人的结构与特点

单轴机器人是由马达驱动的移动平台&#xff0c;由滚珠螺杆和 U型线性滑轨导引构成&#xff0c;其滑座同时为滚珠螺杆的驱动螺帽及线性滑轨的导引滑块&#xff0c;可用半导体、光电、交通运输业、环保节能产业、精密工具机、机械产业、智慧自动化、生技医疗上。 相对于传统的模组…
阅读更多...
stable diffusion webui mov2mov

stable diffusion webui mov2mov

手把手教你用stable diffusion绘画ai插件mov2mov生成动画_哔哩哔哩_bilibili手把手教你用stable diffusion绘画ai插件mov2mov生成动画, 视频播放量 14552、弹幕量 3、点赞数 275、投硬币枚数 114、收藏人数 980、转发人数 75, 视频作者 懂你的冷兮, 作者简介 科技改变世界&…
阅读更多...
oc基本控件2

oc基本控件2

// // ViewController.m // OcDemoTest // // Created by Mac on 2023/7/14. //#import "ViewController.h"interface ViewController () // label property (weak, nonatomic) IBOutlet UIImageView *imageView; // Use of undeclared identifier // 全局propert…
阅读更多...
uniapp 土法 瀑布流 - vue3

uniapp 土法 瀑布流 - vue3

效果图 代码 <template><view><!-- 瀑布流展示 --><!-- 标签页 --><view class="rowStart flexNoLineBreaking paddingCol10 innerDomPaddingRow5 tinyShadow marginBottom10"><view @click="tabsCurrent = 0; run_waterfa…
阅读更多...
DCDC芯片选型

DCDC芯片选型

一、BUCK芯片选型 最初MP2307特别好用&#xff0c;是由美国MPS公司推出
阅读更多...
最新文章

Copyright @ 2022~2023