CSS教程(八)- 盒子模型

1、介绍

  • 核心内容

    • 盒子模型、浮动和定位,帮助我们实现页面布局

      在这里插入图片描述

  • 本质:页面布局过程

    1. 准备好相关的页面元素,网页元素基本都是盒子 Box

    2. 利用 CSS 设置盒子的样式,摆放到相应的位置

    3. 向盒子中填充相应内容

      网页布局的核心本质: 就是利用 CSS 摆盒子。

  • 概念

    • 就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
  • 组成

    • 封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 实际内容
      在这里插入图片描述
      在这里插入图片描述

2、边框

1 边框样式

  • 属性:border-style

  • 作用:指定要显示的边框类型

  • 取值

    • dotted - 定义点线边框
    • dashed - 定义虚线边框
    • solid - 定义实线边框
    • double - 定义双边框
    • groove - 定义 3D 坡口边框。效果取决于 border-color 值
    • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
    • inset - 定义 3D inset 边框。效果取决于 border-color 值
    • outset - 定义 3D outset 边框。效果取决于 border-color 值
    • none - 定义无边框
    • hidden - 定义隐藏边框
  • 示例

    在这里插入图片描述


2 边框宽度

  • 属性:border-width

  • 作用:指定四个边框的宽度

  • 取值:以 px、pt、cm、em 单位。

  • 示例


3 边框颜色

  • 属性:border-color

  • 作用:用于设置四个边框的颜色。

  • 取值:

    • name - 指定颜色名,比如 “red”
    • HEX - 指定十六进制值,比如 “#ff0000”
    • RGB - 指定 RGB 值,比如 “rgb(255,0,0)”
    • transparent
  • 说明:如果未设置 border-color,则它将继承元素的颜色。

  • 示例

    p.one {border-style: solid;border-color: red green blue yellow;   /* 上红、右绿、下蓝、左黄 */
    }
    

4 边框简写

  • 属性:border

  • 写法

    border: border-width border-style border-color;/* 单独设置某一个边的边框 */
    border-top: border-width border-style border-color;
    border-bottom: border-width border-style border-color;
    border-left: border-width border-style border-color;
    border-right: border-width border-style border-color;
    
  • 示例

    p {border-bottom: 6px solid red;background-color: lightgrey;
    }
    

5 边框圆角

  • 属性:border-radius

  • 作用:用于向元素添加圆角边框

  • 取值:px 或 百分比

  • 分类

    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-left-radius
    • border-bottom-right-radius
  • 说明

    • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
  • 示例


3、内边距

  • 属性:padding

  • 作用:用于定义边框与内容之间的距离。

  • 分类

    • padding-left
    • padding-right
    • padding-top
    • padding-bottom
  • 语法

    padding语法表达含义
    padding: 5px;1个值,表示上下左右内边距都是5像素
    padding: 5px 10px;2个值,表示上下内边距是5像素,左右内边距是5像素
    padding: 5px 10px 20px;3个值,表示上内边距是5像素,左右内边距10像素,下内边距是20像素
    padding: 5px 10px 20px 30px;4个值,表示上内边距是5像素,右内边距10像素,下内边距20像素,左内边距30像素
  • 示例
    在这里插入图片描述

  • 说明

    • 如果盒子已经有了宽度和高度,再指定内边距,则会撑大盒子。
  • 解决方案

    • 如果要保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小

4、外边距

1 介绍

  • 属性:margin

  • 作用:用于在任何定义的边框之外,为元素周围创建空间(盒子和盒子之间的距离)。

  • 分类

    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
  • 取值

    • auto:浏览器来计算外边距
    • length:以 px、pt、cm 等单位指定外边距
    • %:指定以包含元素宽度的百分比计的外边距
    • inherit:指定应从父元素继承外边距
  • 简写方法

    margin: top/right/bottom/left
    margin: top/bottom  right/left
    margin: top  right/left  bottom
    margin: top  right  bottom  left
    
  • 示例
    在这里插入图片描述

  • 应用

    • 让块级盒子 水平居中,必须满足两个条件

      1. 盒子必须指定宽度(width)

      2. 盒子的 左右外边距 都设置为 auto

    • 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

  • 示例
    在这里插入图片描述


2 外边距合并

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

  • 介绍

    • 当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和,取两个值中的较大者,这种现象被称为 相邻元素垂直外边距的合并

      在这里插入图片描述

  • 示例

    在这里插入图片描述

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

  • 介绍

    • 对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

      在这里插入图片描述

  • 示例
    在这里插入图片描述

  • 解决方案

    1. 使用边框或内外边距:给元素添加边框或内边距可以阻止外边距塌陷。

      <div class="container">  <div class="box" style="margin-bottom: 20px; border-bottom: 1px solid transparent;"></div> <div class="box" style="margin-top: 30px;"></div>  
      </div>
      
    2. 使用浮动:浮动元素不会参与外边距塌陷。

      <div class="container">  <div class="box" style="margin-bottom: 20px; float: left;"></div>  <div class="box" style="margin-top: 30px; clear: both;"></div>  
      </div>
      
    3. 使用 overflow 属性:给父元素设置 overflow: hiddenoverflow: autooverflow: scroll 可以创建一个新的块格式化上下文(Block Formatting Context, BFC),从而避免外边距塌陷。

      <div class="container" style="overflow: hidden;">  <div class="box" style="margin-bottom: 20px;"></div>  <div class="box" style="margin-top: 30px;"></div>  
      </div>
      
    4. 使用伪元素:通过添加伪元素(如 ::before::after)并设置适当的样式,可以创建 BFC,从而避免外边距塌陷。

      <div class="container">  <div class="box" style="margin-bottom: 20px;"></div>  <div class="clearfix"></div>  <div class="box" style="margin-top: 30px;"></div>  
      </div>  <style>  .clearfix::after {  content: "";  display: table;  clear: both;  }  
      </style>
      

3、清除内边距

  • 介绍

    • 网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。

      *{padding: 0;    /* 清除内边距  */margin: 0;      /* 清除外边距  */
      }
      
  • 注意

    • 行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以。

5、盒子阴影

  • 语法

    • box-shadow: h-shadow v-shadow blur spread color inset;
  • 参数

    描述
    h-shadow必需,水平阴影的位置,可以为正值(向右)或负值(向左)。
    v-shadow必需,垂直阴影的位置,可以为正值(向下)或负值(向上)。
    blur可选,模糊半径,值越大,阴影越模糊。如果不需要模糊效果,可以设置为 0。
    spread可选,阴影尺寸,值可以是正值(扩展阴影)或负值(收缩阴影)。
    color可选,阴影的颜色,可以使用颜色名称、十六进制值、RGBA、HSLA 等。
    insert可选,将外部阴影(outset,默认)修改为内部阴影(inset)
  • 注意

    1. 默认是外部阴影(outset),但不可以写这个单词,否则阴影无效
    2. 盒子阴影不占空间,不会影响其他盒子排列
  • 示例
    在这里插入图片描述


6、文字阴影

  • 语法

    • text-shadow: h-shadow v-shadow blur color;
  • 参数

    描述
    h-shadow必需,水平阴影的位置,可以为正值(向右)或负值(向左)。
    v-shadow必需,垂直阴影的位置,可以为正值(向下)或负值(向上)。
    blur可选,模糊半径,值越大,阴影越模糊。如果不需要模糊效果,可以设置为 0。
    color可选,阴影的颜色,可以使用颜色名称、十六进制值、RGBA、HSLA 等。
  • 示例
    在这里插入图片描述

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

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

相关文章

数据结构——二叉树和BST

树与二叉树 基本概念 树是一种非线性结构&#xff0c;其严格的数学定义是&#xff1a;如果一组数据中除了第一个节点&#xff08;第一个节点称为根节点&#xff0c;没有直接前驱节点&#xff09;之外&#xff0c;其余任意节点有且仅有一个直接前驱&#xff0c;有零个或多个直接…

mysql数据库(四)单表查询

单表查询 文章目录 单表查询一、单表查询1.1 简单查询1.2where1.3group by1.4having1.5order by1.6limit 一、单表查询 记录的查询语法如下&#xff1a; SELECT DISTINCT(去重) 字段1,字段2… FROM 表名 WHERE 筛选条件 GROUP BY 分组 HAVING 分组筛选 ORDER BY 排序 LIMIT 限…

常用机器人算法原理介绍

一、引言 随着科技的不断发展&#xff0c;机器人技术在各个领域得到了广泛应用。机器人算法是机器人实现各种功能的核心&#xff0c;它决定了机器人的行为和性能。本文将介绍几种常用的机器人算法原理&#xff0c;包括路径规划算法、定位算法和运动控制算法。 二、路径规划算法…

Vagrant 没了 VirtualBox 的话可以配 Qemu

开源虚拟机软件 VirtualBox 从当初不可一世的 Sun 易手到 Oracle 之间&#xff0c;变得不那么被许多公司信任了。之前一直是用 Vagrant 搭配 VirtualBox 在 Mac 下使用 Linux 虚拟机&#xff0c;因为不需要用到 Linux 桌面&#xff0c;用 Vagrant 操作虚拟机非常方便。但现在不…

C语言 | Leetcode C语言题解之第542题01矩阵

题目&#xff1a; 题解&#xff1a; /*** Return an array of arrays of size *returnSize.* The sizes of the arrays are returned as *returnColumnSizes array.* Note: Both returned array and *columnSizes array must be malloced, assume caller calls free().*/ type…

一文了解珈和科技在农业遥感领域的服务内容和能力

2020年&#xff0c;农业农村部、中央网信办联合印发了《数字农业农村发展规划&#xff08;2019-2025年&#xff09;》&#xff0c;对数字农业农村建设作出了具体部署。其中&#xff0c;农业遥感作为推进数字农业农村的重要力量贯穿《规划》始终。 今年10月&#xff0c;农业农村…

【Golang】Channel的ring buffer实现

文章目录 前言一、介绍三、环形缓冲区的实现原理三、使用方式四、总结 前言 在并发编程中&#xff0c;channel 是 Golang 提供的一种用于 goroutine 之间通信的机制。channel 的底层实现是一个环形缓冲区&#xff0c;这种设计使得 channel 在处理大量数据传输时能够保持高效。…

隧道论文阅读2-采用无人融合扫描数据的基于深度学习的垂直型隧道三维数字损伤图

目前存在的问题&#xff1a; 需要开发新的无人测量系统测量垂直隧道图像数据量巨大&#xff0c;基于深度学习完成损伤评估跟踪获取图像位置的困难&#xff0c;对大型基础设施感兴趣区域(roi)的2d和3d地图建立进行了研究&#xff0c;对整个目标结构的损伤定位仍然具有挑战性。为…

深入提升Python编程能力的全方位指南

Python作为一种强大且灵活的编程语言&#xff0c;广泛应用于数据科学、机器学习、网络开发、自动化等领域。提升Python编程技术需要结合多方面的知识和技能。本文将详细介绍通过掌握核心技术、项目实践和代码示例来系统提升Python编程技能的方法。 一、掌握基础和高级Python特…

HCIP-HarmonyOS Application Developer V1.0 笔记(五)

弹窗功能 prompt模块来调用系统弹窗API进行弹窗制作。 当前支持3种弹窗API&#xff0c;分别为&#xff1a; 文本弹窗&#xff0c;prompt.showToast&#xff1b;对话框&#xff0c;prompt.showDialog&#xff1b;操作菜单&#xff0c;prompt.showActionMenu。 要使用弹窗功能&…

《深入浅出Apache Spark》系列③:Spark SQL解析层优化策略与案例解析

导读&#xff1a;本系列是Spark系列分享的第三期。第一期分享了Spark Core的一些基本原理和一些基本概念&#xff0c;包括一些核心组件。Spark的所有组件都围绕Spark Core来运转&#xff0c;其中最活跃的一个上层组件是Spark SQL。第二期分享则专门介绍了Spark SQL的基本架构和…

Linux应用——线程池

1. 线程池要求 我们创建线程池的目的本质上是用空间换取时间&#xff0c;而我们选择于 C 的类内包装原生线程库的形式来创建&#xff0c;其具体实行逻辑如图 可以看到&#xff0c;整个线程池其实就是一个大型的 CP 模型&#xff0c;接下来我们来完成它 2. 整体模板 #pragma …

算法每日双题精讲——滑动窗口(长度最小的子数组,无重复字符的最长子串)

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 别再犹豫了&#xff01;快来订阅我们的算法每日双题精讲专栏&#xff0c;一起踏上算法学习的精彩之旅吧&#xff01;&#x1f4aa;…

PHP字符串变量

php字符串变量&#xff0c;也可以理解为一个存放文本的一样东西。 <?php$text"Hello world!"; //输出Hello world&#xff01; echo $text;?> 当赋一个文本值给变量时&#xff0c;请记得给文本值加上单引号或者双引号。 1、下面再来看看字符串的应用场景 …

HiveSQL 中判断字段是否包含某个值的方法

HiveSQL 中判断字段是否包含某个值的方法 在 HiveSQL 中&#xff0c;有时我们需要判断一个字段是否包含某个特定的值。下面将介绍几种常用的方法来实现这个功能。 一、创建示例表并插入数据 首先&#xff0c;我们创建一个名为employee的表&#xff0c;并插入一些示例数据&am…

vue2 - el-table表格设置动态修改表头

效果 代码 <template><el-card><!-- 搜索栏 --><Search :query

MySQL 8.0的Public Key Retrival问题解决

一、导致“Public Key Retrieval is not allowed”原因 该错误是在 JDBC 与 MySQL 建立 Connection 对象时出现的&#xff1b;需要明确的是出现该问题的时候&#xff0c;MySQL 配置的密码认证插件为如下两种&#xff1a; sha256_passwordcaching_sha2_password 使用“mysql_…

Java 集合遍历中删除元素的正确方法与陷阱

在 Java 开发中&#xff0c;经常会遇到遍历集合并删除特定元素的需求。乍一看&#xff0c;这似乎是一个简单的操作&#xff0c;但如果不注意方式&#xff0c;很容易踩坑。这篇文章将带你理解如何在 Java 中安全地删除集合元素&#xff0c;并避免 ConcurrentModificationExcepti…

sed超实用的文本处理工具

sed命令参数表 sed参数说明a在指定行的后面增加新航c替换指定行d删除行-e多次编辑&#xff0c;多次编辑后这样写回文件。sed -i -e /^[[:space:]]*#/d -e /^$/d nginx.confp打印行-r激活拓展正则-n取消默认输出-i静默编辑&#xff0c;屏幕上不显示编辑后的内容&#xff0c;放在…

GPU 环境搭建指南:如何在裸机、Docker、K8s 等环境中使用 GPU

本文主要分享在不同环境&#xff0c;例如裸机、Docker 和 Kubernetes 等环境中如何使用 GPU。 跳转阅读原文&#xff1a;GPU 环境搭建指南&#xff1a;如何在裸机、Docker、K8s 等环境中使用 GPU 1. 概述 仅以比较常见的 NVIDIA GPU 举例&#xff0c;系统为 Linux&#xff0c;…