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>

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

元素分类

块级标记

块级标记有：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：显示成行级

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

内容溢出

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>

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

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

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

相关文章

Redis进阶 - Redis分片集群

Redis进阶 - Redis分片集群

原文首更地址&#xff0c;阅读效果更佳&#xff01; Redis进阶 - Redis分片集群 | CoderMast编程桅杆https://www.codermast.com/database/redis/redis-advance-sharded-cluster.html 搭建分片集群 主从和哨兵可以解决高可用、高并发读的问题。但是依然有两个问题没有解决&a…
阅读更多...
探索视频文本特征加速检索解决方案——倒排索引

探索视频文本特征加速检索解决方案——倒排索引

前言 随着视频内容的不断增加&#xff0c;如何快速准确地检索到所需的视频成为了一个重要的问题。而视频文本特征加速检索解决方案——倒排索引&#xff0c;成为了解决这一问题的有效手段。该技术可以加速文本和视频片段特征匹配、相似度排序过程&#xff01; 定义——何为“…
阅读更多...
c++读取文件之---yaml-cpp使用

c++读取文件之---yaml-cpp使用

实际项目总会遇到有很多超参数的情况&#xff0c;用常规的结构体等无法有效的涵盖所有&#xff0c;为了方便用户进行配置使用&#xff0c;因此使用yaml的方式进行编辑配置&#xff0c;因此去调研使用了yaml-cpp的使用方法。 1、yaml-cpp下载和编译 下载方式很简单&#xff0c…
阅读更多...
Web安全——DIV CSS基础

Web安全——DIV CSS基础

DIV CSS基础 一、DIV和CSS样式二、样式表类型2.1 嵌入样式表2.2 外部样式2.3 内联样式 三、注释四、样式选择器组合选择器 五、背景六、边框七、文字属性八、文本属性九、列表十、超链接十一、盒子模型十二、Border 边框margin padding 十三、float 脱离文档流浮动十四、块级元…
阅读更多...
nvm安装nodejs-2023年6月29日

nvm安装nodejs-2023年6月29日

nvm安装nodejs-2023年6月29日 cmd命令行&#xff0c;执行如下代码&#xff0c;表示安装最新稳定版本的node,这里默认是国外的node节点服务器 nvm install lts报错的话&#xff0c;找到安装目录&#xff0c;打开settings.txt&#xff0c;添加如下代码 更换node的国内淘宝镜像节…
阅读更多...
Selenium教程__使用Select类对象处理下拉框（15）

Selenium教程__使用Select类对象处理下拉框（15）

select标签的下拉框可以使用selenium的 Select模拟下拉框选择操作。 Select需要导入才能使用&#xff0c;导入路径如下 from selenium.webdriver.support.ui import Select 下面以hao123(https://www.hao123.com) 演示下拉框操作 演示代码如下 import time from selenium i…
阅读更多...
knife4j 4.1.0（OpenAPI3）实现spring security或shiro权限注解内容显示

knife4j 4.1.0（OpenAPI3）实现spring security或shiro权限注解内容显示

前两天写了个knife4j&#xff08;swagger2&#xff09;实现spring security或shiro权限注解内容显示&#xff0c;主要是使用knife4j 2.0.5来实现权限注解内容显示的扩展。 在Spring Boot 3 中只支持OpenAPI3规范&#xff0c;集成knife4j的stater&#xff1a;knife4j-openapi3-…
阅读更多...
若隐若现的芯片

若隐若现的芯片

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>若隐若现的芯片</title><script src"https://unpkg.co/gsap3/dist/gsap.min.js">…
阅读更多...
前端excel文件处理，vue2 、file-saver、xlsx, excel文件生成与excel文件链接数据导出

前端excel文件处理，vue2 、file-saver、xlsx, excel文件生成与excel文件链接数据导出

1、前端excel文件生成 安装插件 npm install file-saver --save如使用TS开发&#xff0c;可安装file-saver的TypeScript类型定义 npm install types/file-saver --save-dev下载文件流 import { saveAs } from file-saver /**** param {*} fileStream // 文件流* param {*} …
阅读更多...
No CMAKE_Swift_COMPILER could be found问题解决

No CMAKE_Swift_COMPILER could be found问题解决

编译OpenCV的IOS平台包,出错: CMake Error at CMakeLists.txt:20 (enable_language): No CMAKE_Swift_COMPILER could be found. 出错定位,原因是启用Swift语言时没有找到CMAKE_Swift_COMPILER变量 CMAKE官方文档说明启用Swift语言方法 cmake 3.15开始支持swift 查找swift …
阅读更多...
数据库监控与调优【十三】—— LIMIT语句优化

数据库监控与调优【十三】—— LIMIT语句优化

LIMIT语句优化 LIMIT语句使用规则 limit<offset>, <size> offset&#xff1a;返回结果第一行的偏移量&#xff08;想要跳过多少行&#xff09;size&#xff1a;指定返回多少条 举例说明 -- 查询第1页时&#xff0c;花费92ms SELECT * FROM employees LIMIT 0,…
阅读更多...
【容灾系统搭建】网络杂谈（1）之容灾系统如何搭建？

【容灾系统搭建】网络杂谈（1）之容灾系统如何搭建？

涉及知识点 什么是容灾&#xff0c;容灾系统的建设&#xff0c;容灾系统的结构模型&#xff0c;容灾平台。深入了解容灾技术。 原创于&#xff1a;CSDN博主-《拄杖盲学轻声码》&#xff0c;更多内容可去其主页关注下哈&#xff0c;不胜感激 文章目录 涉及知识点前言1.容灾系统…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023