CSS 内容盒子与边框盒子

这篇比较重要，会不断更新❗

文章目录

  • 👇内容盒子
    • 开发者工具的使用
    • border 边框
    • padding 内边距
    • margin 外边距
    • 盒子整体尺寸
    • 元素默认样式与CSS重置
    • 元素分类
      • 块级标记
      • 行级标记
      • 行内块标记
    • display样式
    • 内容溢出
      • 裁剪掉溢出部分
      • 滚动条
    • 圆角边框 border-radius
  • ✌边框盒子

👇内容盒子

提示：这里可以添加本文要记录的大概内容：

每个HTML元素都是一个矩形盒子，由四个部分组成：

宽度、高度：指的是盒子中装的内容尺寸，并不是盒子整体的尺寸
边框：盒子本身有边框（border）
内边距：盒子里面的内容到盒子边框之间的距离即内边距（padding）
外边距：盒子边框外和其他盒子之间，还有外边距（margin）

在这里插入图片描述

开发者工具的使用

下面的内容用到了开发者工具：右键检查或F12显示
方便对前端代码调试

单击想调试的标签，这里以div举例
js用的是控制台，下面图内代码用的的HTML+CSS，选择的是元素
在这里插入图片描述
单击下面的样式
会看到写的样式代码
在这里插入图片描述
往下看图：
蓝色框就是内容框300px*300px
绿色框就是内边距
最外面的一圈是外边距
在这里插入图片描述
把鼠标放在图内，在左侧效果图内会显示对应的位置
在这里插入图片描述

右键检查后如果代码有删除线，说明代码失效，没用到
在这里插入图片描述

border 边框

边框样式主要有以下几种：

  1. 实线边框：使用border-style: solid;

  2. 虚线边框：使用border-style: dashed;

  3. 边框宽度：使用border-width: Npx;

  4. 双线边框：使用border-style: double;

  5. 无边框：使用border-style: none;

  6. 边框颜色（红）：使用border-color: red;

【示例代码】：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title><style>.d1{width: 300px;height: 300px;/* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 *//* border 边框样式 solid实线框，dashed-虚线框 */border: red 1px solid;/* 右边框单独设置粗细 */border-right-width: 5px;/* 上边框单独设置颜色 */border-top-color: #000;/* 下边框单独设置样式（虚线） */border-bottom-style: dashed;}</style>
</head>
<body><div class="d1">内容</div>
</body>
</html>

输出效果
在这里插入图片描述

padding 内边距

padding：内边框，指的是边框和内容的距离，四个方向

padding-left：设置左内边距

【示例代码】：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title><style>.d1{width: 300px;height: 300px;/* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 *//* border 边框样式 solid实线框，dashed-虚线框 */border: red 1px solid;/* `padding`：内边框，指的是边框和内容的距离，四个方向 */padding-left: 100px;}</style>
</head>
<body><div class="d1">内容</div>
</body>
</html>

输出效果及解释：
在这里插入图片描述

padding-top：设置上内边距

【示例代码】：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title><style>.d1{width: 300px;height: 300px;/* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 *//* border 边框样式 solid实线框，dashed-虚线框 */border: red 1px solid;/* padding：内边框，指的是边框和内容的距离，四个方向 */padding-top: 30px;}</style>
</head>
<body><div class="d1">内容</div>
</body>
</html>

输出效果及解释：
在这里插入图片描述

padding-right：设置右内边距

【示例代码】：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title><style>.d1{width: 300px;height: 300px;/* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 *//* border 边框样式 solid实线框，dashed-虚线框 */border: red 1px solid;/* padding：内边框，指的是边框和内容的距离，四个方向 */padding-right: 10px;}</style>
</head>
<body><div class="d1">内容</div>
</body>
</html>

输出效果及解释：
在这里插入图片描述

padding-bottom：设置下内边距，与上方例子类似，最好四个方法放在一起试

padding: 10px; 意思是：设置上下左右内边距都是10px
padding: 10px 20px; 意思是：设置上下内边距都是10px，左右内边距是20px
padding: 10px 20px 30px 40px; 意思是：设置上内边距是10px，右内边距是20px，下内边距是30px，左内边距是40px，按顺时针方向走，上右下左

margin 外边距

margin：外边距（上右下左）

margin：外边距，盒子与其他盒子边框之间的距离，有四个方向

margin-top：盒子与其他盒子之间上侧距离
margin-right：盒子与其他盒子之间右侧距离
margin-bottom：盒子与其他盒子之间下侧距离
margin-left：盒子与其他盒子之间左侧距离

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title><style>.d1{width: 300px;height: 300px;/* width和height指的是盒子内容的尺寸，并不是盒子整体尺寸 *//* border 边框样式 solid实线框，dashed-虚线框 */border: red 1px solid;/* margin：外边距，盒子与其他盒子边框之间的距离，有四个方向 */margin-left: 50px;margin-top: 100px;margin-right: 40px;margin-bottom: 10px;}</style>
</head>
<body><div class="d1">内容</div>
</body>
</html>

输出效果：
在这里插入图片描述
当然也可以四合一：
margin: 10px;：代表四个方向的盒子与其他盒子之间的距离都是10px

margin: 10px 5px;：代表两个盒子之间距离上下是10px，左右是5px

margin: 10px 5px 7px 15px;：代表两个盒子之间距离上是10px，右是5px，下是7px，左是15px。顺时针方向

margin: 0 auto 在父标记中水平居中

margin: 0 auto;

这里的0是上下边距（margin-top 和 margin-bottom）的值
auto是左右边距（margin-left 和 margin-right）的值

使用这个代码，左右的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>.d1{box-sizing: border-box;width: 300px;height: 300px;/* width和height指的是盒子内容的尺寸，并不是盒子整体的尺寸 *//* border: 边框样式 solid实线框  dashed虚线框*/border: red 1px solid;}.d2{/* width和height指的是盒子内容的尺寸，并不是盒子整体的尺寸 */width: 100px;height: 100px;/* 三个值：颜色、粗细、样式（三个值之间顺序无所谓） */border: solid 2px blue;/* 在父标记中水平居中 */margin: 0 auto;}</style>
</head>
<body><div class="d1">内容<div class="d2"></div></div></body>
</html>

输出效果
在这里插入图片描述
注意：该元素的宽度必须小于父元素的宽度才能实现水平居中。

盒子整体尺寸

盒子总尺寸=border（两个边框宽度）+padding（两个内边距宽度）+内容宽度（width）

盒子模型占用空间=margin（两个外边距宽度）+盒子模型总尺寸

元素默认样式与CSS重置

常用元素默认样式：

  1. 标签的margin为8px
  2. p标签的上下外边距为16px
  3. h1标签的上下外边距为21.440px
  4. ul标签的上下外边距也为16px，左内边距也为40px

CSS重置：在实际开发中，不同的浏览器有着不同的默认样式，这导致了在样式设置时可能会出现兼容性问题。为了解决这个问题，开发者可以使用一些 CSS 重置工具，通过覆盖浏览器的默认样式来统一不同浏览器的表现。这样开发者就可以更加方便地设置自己想要的样式，同时提高网站或应用的兼容性。

重置样式表通常包括以下内容：

/* 重置所有元素的边框、内边距、外边距为零 */
* {margin: 0;padding: 0;border: 0;
}/* 标题样式重置 */
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;
}/* 链接样式重置 */
a {color: inherit;text-decoration: none;
}/* 列表样式重置 */
ul, ol {list-style: none;
}/* 表单元素样式重置 */
input, textarea, select {font-size: inherit;font-family: inherit;border-radius: 0;
}/* 其他元素样式重置 */
img, video {max-width:100%; height:auto;
}

重置样式表不是解决所有CSS问题的，而是一种起点。
通过重置样式并自己定义样式，可以确保在所有浏览器中呈现一致的外观和行为。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/* 内外边距清0 */body,h1,p,ul{padding: 0;margin: 0;}a{/* 超链接默认下划线去掉 */text-decoration: none;}</style>
</head>
<body>内容<h1>一级标题</h1><p>段落</p><ul><li>123</li><li>321</li></ul><a href="#">失控</a></body>
</html>

输出效果：
在这里插入图片描述

元素分类

要生成的效果：
在这里插入图片描述
html代码：

        <div class="recommend"><div class="line"></div><p>推荐商家</p><div class="line"></div></div>

css代码：

.line{/* 两条线 */width: 6vw;height: 0.2vw;background-color: #888;
}

块级标记

块级标记有：h1-h6、p、table、form、header、div、ul、ol、dl，等标签都是块级元素

块级标记，独占一行显示

【示例代码】：

<!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>/* 块级标记 独占一行显示 */</style>
</head>
<body><div>块级标记</div><span>范围标记</span>
</body>
</html>

输出效果：
在这里插入图片描述

块级标记宽度不设置的话默认会撑满父标记，高度不设置的话默认由实际内容撑开

【示例代码】：

<!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: aqua;}</style>
</head>
<body><div>块级标记<br>二哈喇子</div><span>范围标记</span>
</body>
</html>

输出效果：
在这里插入图片描述

块级标记支持设置所有的盒子样式属性

行级标记

  1. 行级标记可以和其他的行标记共处一行，从左向右显示
  2. 行级标记的宽度高度默认都是由实际内容
  3. 行级标记不支持设置宽度和高度，边框可以、内边距可以、左右外边距可以
  4. 常见行标记：span范围、a超链接、strong加粗、i字体图标

span标签就是典型的行级标记

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>span{background-color: skyblue; /* 行级标记不支持设置宽度和高度 */width: 500px;height: 600px;border: 2px solid green;padding: 5px;margin-right: 200px;/* 行级标记不支持设置上下外边距 */margin-top: 200px;}</style>
</head>
<body><span>张三</span><span>李四</span>
</body>
</html>

输出效果：
在这里插入图片描述

行内块标记

它既可以像行内元素一样在文本行内显示，也可以像块级元素一样设置宽高等属性。

  1. 行内块标记：可以和其他的行级标记和行内块标记从左向右共处一行显示
  2. 行内块标记的宽度、高度默认是由实际内容决定
  3. 行内块标记支持设置所有的盒子样式属性
  4. 常见的行内块标记：img、input、select、button、textarea

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>button{width: 200px;height: 50px;border: none;       /* 按钮边框去掉 */margin-top: 50px;   /* 上外边距 */}</style>
</head>
<body><span>范围</span><button>这是一个行内块元素的按钮</button><input type="text">
</body>
</html>

输出效果：
在这里插入图片描述

display样式

none：隐藏显示

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>span{display: none;}</style>
</head>
<body><span>爱上你</span><span>算我失控</span>
</body>
</html>

输出显示什么都没有，只是隐藏了，并不是什么都没有

输出效果：
在这里插入图片描述

inline-block：显示成行内块

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>span{display: inline-block;width: 200px;height: 200px;border: 3px solid skyblue;}</style>
</head>
<body><span>爱上你</span><span>算我失控</span>
</body>
</html>

行内块显示
在这里插入图片描述
block：显示成块级标记
把inline-block换成block，则会在一行显示
在这里插入图片描述

inline：显示成行级

宽高失效
在这里插入图片描述

内容溢出

    /* 宽度大小匹配内容 */width: fit-content;

overflow：溢出样式，默认是展示溢出的部分
hidden：裁剪掉溢出的部分
auto：出现滚动条

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;border: 1px red solid;}</style>
</head>
<body><div>wwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>
</body>
</html>

输出效果： 数据溢出（设计的尺寸装不下实际内容）
在这里插入图片描述

裁剪掉溢出部分

在div{}内加上： overflow: hidden;

把不显示的内容裁掉
在这里插入图片描述

滚动条

在div{}内加上： overflow: auto;

出现滚动条，把溢出部分显示出来
在这里插入图片描述

圆角边框 border-radius

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 300px;height: 300px;border: 3px solid greenyellow;}</style>
</head>
<body><div>爱上你算我失控</div>
</body>
</html>

默认的角是直角
在这里插入图片描述
现在角度是直角，如果将区域设置成圆形，要求：宽高一致，边框半径二分之一宽高

另外加上水平居中：text-align: center;与垂直居中：line-height: 300px;

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 300px;height: 300px;border: 3px solid greenyellow;/* border-radius 边框半径 *//* 越大弧度越明显 */border-radius: 150px;   /* 水平居中 */text-align: center;/* 垂直居中 */line-height: 300px; }</style>
</head>
<body><div>爱上你算我失控</div>
</body>
</html>

输出效果：
在这里插入图片描述

✌边框盒子

提示：这里可以添加本文要记录的大概内容：

默认的盒子类型是内容盒子：content-box

    /* 变成边框盒子 */box-sizing: border-box;

在内容盒子中，width和height是内容尺寸
盒子整体的尺寸=内容的尺寸+两个边框+两个内边距

css3引入了新的盒子类型，边框盒子：border-box
width和height是盒子的整体尺寸

盒子类型的样式：box-sizing

提示：以下是本篇文章正文内容，下面案例可供参考

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;width: 200px;height: 300px;
/* 颜色 宽度 虚实线 */border: red 2px solid;/* 四个方向的边距都是5px */padding: 5px;/* 200+10+1=214 */}</style>
</head>
<body><div>内容</div>
</body>
</html>

输出效果
在这里插入图片描述
右键检查能打开开发者工具会看到：
在这里插入图片描述

下面结合html+css详解
HTML：

<div class="box"><h2>这是一个边框盒子</h2><p>这是边框盒子的内容。</p>
</div>

CSS：

.box {border: 1px solid black;padding: 10px;width: 300px;height: 200px;
}

上述代码实现了一个简单的边框盒子，其中属性解释如下：

  • border：设置边框，包括边框宽度、样式和颜色。
  • padding：设置盒子内边距，即内容与边框之间的距离。
  • width：设置盒子宽度。
  • height：设置盒子高度。

通过上述代码，我们创建了一个宽度为300px，高度为200px的边框盒子，并设置了1px的黑色实线边框和10px的内边距。在盒子内部，我们加入了一个标题和一段文字。

边框盒子常用来作为容器，将其他元素放在其内部，以便于布局和样式设置。除了上述常用属性外，还可以设置边框圆角、阴影、透明度等效果。

边框盒子是HTML中最基本的盒子之一，它是由内容区域、内边距、边框和外边距组成的矩形区域。在CSS中，我们可以使用以下属性来控制边框盒子的各个部分：

  1. width和height属性用于控制内容区域的大小。例如：
div {width: 200px;height: 100px;
}
  1. padding属性用于控制内边距的大小。例如：
div {padding: 10px;
}
  1. border属性用于控制边框的样式、宽度和颜色。例如：
div {border: 1px solid #000;
}
  1. margin属性用于控制外边距的大小。例如：
div {margin: 10px;
}

在实际应用中，我们还可以使用其他属性来进一步定制边框盒子的样式，例如：

  1. border-radius属性用于控制边框的圆角半径。例如：
div {border-radius: 10px;
}
  1. box-shadow属性用于向边框盒子添加阴影效果。例如：
div {box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
  1. background属性用于控制内容区域的背景色或背景图像。例如：
div {background: #f00;
}

最终，我们可以将上述属性组合起来，创建各种不同样式的边框盒子。例如，下面的代码会创建一个宽度为300px、内边距为20px、边框为2px实线边框、圆角半径为10px、阴影效果和灰色背景的边框盒子：

div {width: 300px;padding: 20px;border: 2px solid #000;border-radius: 10px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);background: #ccc;
}

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

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

相关文章

学无止境·MySQL③

学无止境·MySQL③

单表查询 题一创建表并插入数据薪水修改为5000将姓名为张三的员工薪水修改为3000元将姓名为李四的员工薪水修改为4000元&#xff0c;gener改为女 题一 1.创建表&#xff1a; 创建员工表employee&#xff0c;字段如下&#xff1a; id&#xff08;员工编号&#xff09;&#xff…
阅读更多...
Day976.如何安全、快速地接入OAuth 2.0？ -OAuth 2.0

Day976.如何安全、快速地接入OAuth 2.0？ -OAuth 2.0

如何安全、快速地接入OAuth 2.0&#xff1f; Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于如何安全、快速地接入OAuth 2.0&#xff1f;的内容。 授权服务将 OAuth 2.0 的复杂性都揽在了自己身上&#xff0c;这也是授权服务为什么是 OAuth 2.0 体系的核心的原因之…
阅读更多...
c++读取字符串字符时出错

c++读取字符串字符时出错

这是我做的一个c爬虫程序但是在抓取网页的时候string类型传递出现了问题 以下是图片代码 url的值是 "http://desk.zol.com.cn/" 我不知道为什么数据传递会出问题 请大佬指教 后面重新启动一遍编译器查一查断点有突然没问题了 &#xff0c;真是个玄学的问题。我还以…
阅读更多...
mysql 大数据量从“.log“文件插入方法

mysql 大数据量从“.log“文件插入方法

要被插入的数据文件以及内容 表结构 插入成功&#xff0c;插入时如果有主键唯一索引&#xff0c;则按照唯一索引的大小顺序插入&#xff0c;速度会快很多
阅读更多...
Linux——内核概念

Linux——内核概念

一、内核 什么是内核&#xff1f; 计算机是由各种外部硬件设备组成的&#xff0c;如内存、cpu、硬盘等。如果每个应用都要和这些硬件对接通信协议&#xff0c;就太麻烦了&#xff0c;所以这个工作就由内核来负责。内核作为软件连接硬件设备的桥梁&#xff0c;使应用开发者只需…
阅读更多...
（ARM）7/5

（ARM）7/5

1.串口发送单个字符 2.串口发送字符串 uart4.h #ifndef __UART4_H__ #define __UART4_H__#include "stm32mp1xx_uart.h" #include "stm32mp1xx_rcc.h" #include "stm32mp1xx_gpio.h"//初始化相关操作 void hal_uart4_init();//发送一个字符 v…
阅读更多...
云计算——虚拟化层架构

云计算——虚拟化层架构

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 前言 本章将会讲解云计算的虚拟化层架构&#xff0c;了解云计算虚拟化层都有哪些架构模式…
阅读更多...
Java POI excel单元格背景色(填充)、字体颜色(对齐)、边框(颜色)、行高、列宽设置

Java POI excel单元格背景色(填充)、字体颜色(对齐)、边框(颜色)、行高、列宽设置

文章目录 1、Excel Cell单元格背景色颜色名称对照关系2、Excel Cell单元格背景填充样式颜色填充对照关系3、Excel Cell字体样式设置对照图4、Excel 行高、列宽设置5、Excel单元格边框设置边框类型图片对比附一&#xff1a;一些问题1、关于列宽使用磅*20的计算方式2、关于行高使…
阅读更多...
开发抖音短视频账号矩阵系统技术实现能解决一机一号实名认证问题？

开发抖音短视频账号矩阵系统技术实现能解决一机一号实名认证问题？

一、短视频账号矩阵系统解决一机一号实名认证问题&#xff1f; 目前站在开发者角度来看问的比较多&#xff0c;做开发技术类矩阵saas工具&#xff0c;需要的多账号怎么解决&#xff0c;这需要从两个方面来做开发解决。 第一、从开发角度来看技术开发首先解决代理ip分发问题&a…
阅读更多...
DAY38：贪心算法（五）K次取反后最大数组和+加油站

DAY38：贪心算法（五）K次取反后最大数组和+加油站

文章目录 1005.K次取反后最大化的数组和思路直接升序排序的写法最开始的写法&#xff1a;逻辑错误修改版时间复杂度 自定义sort对绝对值排序的写法sort的自定义比较函数cmp必须声明为static的原因std::sort升降序的问题&#xff08;默认升序&#xff09;时间复杂度 总结 134.加…
阅读更多...
N天爆肝数据库——MySQL（1）

N天爆肝数据库——MySQL（1）

数据库概念理解 数据库 DB 存储数据的仓库 数据库管理系统 DBMS 操纵和管理数据库的大型软件 SQL 操作关系型数据库的编程语言&#xff0c;定义了用一套操作关系型数据库同意标准 学习 SQL 的作用 SQL 是一门 ANSI 的标准计算机语言&#xff0c;用来访问和操作数据库系统。S…
阅读更多...
前端优化的一些方向

前端优化的一些方向

对于浏览器来说&#xff0c;加载网页的过程可以分为两部分&#xff0c;下载文档并响应&#xff08;5%左右&#xff09;&#xff0c;下载各种组件&#xff08;95%左右&#xff09;。 而对比大部分优秀网页来说下载文档&#xff08;10%~ 20%&#xff09;&#xff0c;下载组件&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023