CSS盒模型(详讲)

2024-04-14 13:44
文章标签 css 模型 frontend 详讲

本文主要是介绍CSS盒模型(详讲),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

概述:

内容区(content):

内边距(paddingj):

前言:

设置内边距:

边框(border):

前言:

示例:

外边距(margin):

 前言:

设置外边距:

补充(折叠):


概述:

  盒模型很好理解,你把其象限成自己用来装东西的盒子,盒子里面就是放东西的。

        盒模型经常在网页中使用这是一种思维模型,它由四个部分组成:从内到外分别是内容(content),内边距(padding),边框(border)以及外边距(margin),我们可以使用CSS分别对这些部分进行设置。如下是一个盒模型:

初识CSS-CSDN博客 0基础看这一篇就够了HTML教程(详细汇总)_php代码格式-CSDN博客

内容区(content):

        内容区就是盒子里面用来存放东西的区域,里面你可以随便放如:文本,图片,视频等等,内容区域有三个属性:width,height,overflow,其中widthheight是用来指定内容区域的宽度和高度,因为如果内容太多就会超出范围导致溢出,这个时候我们就可以使用overflow属性来处理溢出的区域。其属性的可选值如下所示:

  • hidden:表示隐藏这块溢出的区域。
  • visible:表示显示溢出的区域(这部分放到盒子外面)。
  • scroll:如果内容溢出了,就添加一个滚动条,可以通过这个滚动条左右上下查看所有的内容。
  • auto:让浏览器自己去处理这部分。

        如下是示例代码:

<!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 {background-color: red;color: aqua;width: 100px;height: 40px;overflow: scroll;}</style>
</head><body><div>这是一个内容区域的设置,后面内容要使用滚动条进行查看。</div>
</body></html>

        上述代码运行结果如下所示:我们把<div>盒子背景变为红色,字体颜色为蓝色,大小为100px宽度和40px宽度,此时盒子大小不够放不下所有的内容,我添加了一个overflow把其设置为scroll就为溢出的区域添加了一个可以上下滚动的条子。此时就可以通过这个滚动条查看盒子所有的文本内容。 CSS设置网页背景_css 设置背景图-CSDN博客

内边距(paddingj):

前言:

        内边距(padding)是元素内容跟元素边框之间的距离,就像我在一个盒子里面放一本书(内容)这个盒子的边框到这本书的距离就是内边距,书越大盒子越小内边距就会越小,其属性如下所示:

  • padding-top:可以设置元素距离上面边框的距离。
  • padding-right:可以设置元素距离右边边框的距离
  • padding-bottom:可以设置元素距离下面边框的距离。
  • padding-left:可以设置元素距离左边边框的距离。
  • padding:可以一次性设置元素距离上下左右边框的距离。

上述属性的可选值如下:

说明
length使用数值配合px,cm单位来定义元素的尺寸,不可以设置负值,默认为0px。
%定义基于父元素的宽度的  内边距,不可以设置为负的。
inherit从元素继承对内边距的设置。

使用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>* {height: 60px;width: 300px;}.top {background-color: aqua;padding-top: 20px;}.bottom {background-color: rgb(51, 26, 212);padding-bottom: 30px;}.left {background-color: blue;padding-left: 30px;}.right {background-color: blueviolet;padding-right: 20px;}.padding {background-color: aquamarine;padding: 20px 10px 3px 7px;}</style>
</head><body><p class="top">padding-top:20px;</p><p class="bottom">padding-bottom:30px;</p><p class="left">padding-left:30px</p><p class="right">padding-right:20px</p><div class="padding">padding:20px 10px 3px 7px;</div>
</body></html>

        上述代码的运行结果如下所示:其中绿色框起来的是padding红色框起来的是内容,这里并无难点所以不过多讲解。

边框(border):

前言:

        边框就是内边距到外边距的这一段距离,就像我们日常用的盒子它的壳或者是校园的围墙。一般情况下是一条线,我们可以自己设置这些线段的样式。如宽度,颜色等等。我们可以用以下几种属性来设置边框:

  • border-style:设置边框的样式,如:实线,虚线等等。
  • border-width:用来设置边框的宽度的(厚度)。
  • border-color:可以用来设置边框的颜色。
  • border:可以用这个属性直接设置边框的三种属性

示例:

border-样式(颜色...),如border-style,border-width等等,如果用其设置属性的话需要注意一下顺序:

  • 如果你要一次设置四个参数,那么需要按照上,右,下,左的顺序依次设置元素四个方向的边框。
  • 如果你只提供三个参数,那第一个将会用来设置上面第二个将会被用来设置左,右两个方向最后一个将会被用来设置
  • 如果一次只提供两个参数,那第一个参数会被用来上,下两个方向另外一个参数会被用来设置左,右两个方向
  • 如果你只提供一个参数,那么这个参数将是四个方向的值

border - 方向(上下左右) - 样式  其说明如下:

  • border-bottom-样式 :设置下面对应的边框样式。
  • border-top-样式:设置上面对应的边框样式。
  • border-left-样式:设置左边对应的边框样式。
  • border-right-样式:设置右边对应的边框样式。

style样式的可选属性如下所示:

说明
none没有边框。
hidden把边框隐藏,跟none类似。
dotted定义点状虚线边框。
deshed定义虚线边框。
solid定义实线边框。
double定义双实线边框,双实线边框的宽度等于border-width的值。
groove

定义3D凹槽边框,其效果取决于border-color的值。

ridge定义3D垄状边框,其效果取决于border-color的值。
inset定义3D嵌入边框,其效果取决于border-color的值。
outset定义3D突出边框,其效果取决于border-color的值。
inherit从父元素中继承对边框样式的设置。

上述属性的示例代码如下所示: 

<!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>.test1 {border-top: dashed #c91010 3px;border-bottom: outset #8cd319 5px;border-left: groove rgb(101, 43, 182) 7px;border-right: inset rgb(207, 32, 169) 9px;}</style>
</head><body><p class="test1">啥都没得1</p>
</body></html>

代码运行结果如下所示:可以明显看到上面的是虚线,左边的是凹槽边框,下面是突出边框,右边是嵌入边框。 

width样式可选属性如下:

说明
thin定义较细的边框。
medium默认值,定义中等宽度的边框。
thick定义较粗的边框。
length使用数值加单位的形式设置具体的边框宽度,如2px。
inherit从父元素中继承对边框的宽度。

 示例代码如下所示:

<!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>p {border: solid;width: 150px;border-top-color: blue;border-bottom-color: red;border-left-color: #901f1f;/* border-color: red; */border-right-color: rgb(27, 156, 96);}p {border-top-width: 7px;border-bottom-width: 3px;border-right-width: 2px;border-left-width: 9px;}</style>
</head><body><p>color样式的定义</p>
</body></html>

代码运行结果如下所示:可以明显看到上面7px表现出来的厚度,还有左边9px的厚度,以及右边的细小,和下面的3px

 color样式的可选值如下所示:CSS设置网页颜色-CSDN博客

说明
color_name使用颜色名称来设置边框的颜色,如blue。
hex_number使用颜色的十六进制来设置边框的颜色,如:#101010.
rgb_number使用rgb()函数来设置边框的颜色,如rgb(255,0,0).
transparent默认值,边框为透明。
inherit从父元素里继承对边框颜色的设置。

 示例代码如下所示:

<!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>p {border: solid 3px;width: 150px;border-top-color: blue;border-bottom-color: red;border-left-color: #901f1f;/* border-color: red; */border-right-color: rgb(27, 156, 96);}</style>
</head><body><p>color样式的定义</p>
</body></html>

上述代码运行结果如下所示:可以看到上面被设为紫色,下面为红色,左边为#901f1f使用了十六进制,右边为绿色,使用了rgb来配置三原色。

 

        border 可以一同设置style,color,width三个属性,设置这个三个属性并不需要遵循某些顺序,我们还可以border-方向来设置如下所示:

  • border-bottom  :一起设置下面的宽度,样式和颜色。
  • border- top :一起设置上面的宽度,样式和颜色。
  • border- left :一起设置左边的宽度,样式和颜色。
  • border- right :一起设置右边的宽度,样式和颜色。

示例代码如下所示:

<!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>.test1 {border-top: dashed #c91010 3px;border-bottom: outset #8cd319 5px;border-left: groove rgb(101, 43, 182) 7px;border-right: inset rgb(207, 32, 169) 9px;}.test2 {border: double rgb(32, 168, 27) 6px;}</style>
</head><body><p class="test1">啥都没得1</p><p class="test2">啥都没得2</p>
</body></html>

运行结果如下所示:

外边距(margin):

 前言:

        在HTML很多元素都有边框(margin),外边框就是在边框以外的区域,这片区域不受很多属性的影响,打个比方如:门,其的组成部分有可打开的门就是元素的内容,还有固定门的门框也就是边框,其边框以外的就是外边距。

设置外边距:

        在默认情况下一般元素是没有外边距的,但是也会有些例外,因为浏览器会给HTML元素设置默认值有些HTML元素的就会有一个设置了的外边距。比如<h1>....<h6>元素,我们也可以使用下面属性来给HTML元素设置外边距:

  • margin-top:设置元素上面的外边距。
  • margin-bottom:设置元素下面的外边距。
  • margin-right:设置元素右边的外边距。
  • margin-left:设置元素左边的外边距。
  • margin:也就是上述所有属性的简写,可以同时设置四个方向(上下左右)的外边距。

上述属性可选值如下所示:

说明
auto浏览器自己来计算的外边距尺寸。
length使用数值配合单位px,cm等等来定义元素外边距的尺寸,可以设置负值,默认情况下为0px
%基于父元素的宽度百分比的外边距,可以设置负数。
inherit从父元素中继承对外边距的设置。

使用margin属性时需要注意:

  • 如果你要一次设置四个参数,那么需要按照上,右,下,左的顺序依次设置元素四个方向的外边距。
  • 如果你只提供三个参数,那第一个将会用来设置上面第二个将会被用来设置左,右两个方向最后一个将会被用来设置
  • 如果一次只提供两个参数,那第一个参数会被用来上,下两个方向另外一个参数会被用来设置左,右两个方向
  • 如果你只提供一个参数,那么这个参数将是四个方向的值

上述属性示例代码如下所示:

<!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>.direction {background-color: aqua;width: 400px;height: 200px;border: 2px solid blue;}.mark1 {border: 4px solid red;margin-top: 30px;margin-bottom: 30px;margin-left: 40px;margin-right: 20px;}.margin {background-color: bisque;width: 300px;height: 100px;border: 2px solid blue;}.mark2 {border: 3px solid red;margin: 17px 13px 16px 17px;}</style>
</head><body><div class="direction"><p class="mark1">direction啥都没得的一行</p></div><br> <br><div class="margin"><p class="mark2">margin一个集合体</p></div></body></html>

        上述代码的运行结果如下所示:下面红色的是代码的,绿色的是外边距,可以看到无论是一个个的设置还是用margin全部一起设置,都可以可以的。

补充(折叠):

        外边距折叠指的是两个相邻的元素或者多个元素的外边距会在垂直方向向上发生合并,变成一个外边距,外边距折叠需要注意的是:

  • margin折叠只会发生在块级元素上。
  • 浮动元素的外边距不会跟任何外边距发生折叠。
  • 如果元素设置了overflow属性并且其属性的值不是visible的块级元素,它将不会跟子元素发生外边距折叠。
  • 绝对定位的元素的外边距不会跟任何外边距发生折叠。
  • 根元素(<body>)的外边距不会跟任何外边距发生折叠。

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>.bottom {border: solid 2px red;width: 200px;height: 100px;background-color: aqua;/* margin-bottom: 40px; *//* margin-bottom: -40px; */margin-bottom: -40px;}.top {border: solid 2px red;width: 200px;height: 100px;background-color: rgb(145, 255, 0);/* margin-top: 20px; *//* margin-top: -20px; */margin-top: 20px;}</style>
</head><body><p class="bottom">bottom:40px</p><p class="top">top:20px</p>
</body></html>

代码运行结果如下所示:

2) 在父元素与其子元素之间:

注意:父元素不能定义边框和内边距,且父元素与子元素之间不能有其它元素

  • 如果父元素与子元素外边距的值都为正数,那么折叠后的外边距为两个外边距中较大的那个
  • 如果父元素与子元素外边距的值都为负数,那么折叠后的外边距为两个外边距中较小的那个
  • 如果父元素与子元素外边距的值一个为正数、一个负数,那么折叠后的外边距为两个外边距相加的和

这篇关于CSS盒模型(详讲)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/903143

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js