CSS初级教程(轮廓)【第五天】

news2024/10/5 15:45:00

CSS初级教程【第五天】

  • 【1】CSS 框模型
  • 【2】CSS 轮廓
  • 【3】CSS 轮廓宽度
  • 【4】CSS 轮廓颜色
  • 【5】CSS 轮廓简写
  • 【6】CSS 轮廓偏移
  • 【7】所有 CSS 轮廓属性


CSS上回学习链接
CSS初级教程 颜色【第一天】
CSS初级教程 背景【第二天】
CSS初级教程 边框【第三天】
CSS初级教程 边距、高度、宽度【第四天】


【1】CSS 框模型

【1】CSS 框模型

所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。下图展示了框模型:

在这里插入图片描述

对不同部分的说明:

`内容 `- 框的内容,其中显示文本和图像。
`内边距` - 清除内容周围的区域。内边距是透明的。
`边框` - 围绕内边距和内容的边框。
`外边距` - 清除边界外的区域。外边距是透明的。

框模型允许我们在元素周围添加边框,并定义元素之间的空间。

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。


提示:背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

在 CSS 中, width height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:
在这里插入图片描述

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。

提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。

实例
演示框模型:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;/*背景颜色*/
  width: 300px;/*文本宽度 水平*/
  border: 15px solid green;/*边框大小 上下左右15px  实线 边框颜色*/
  padding: 50px;/*文本缩进 上下左右 50px*/
  margin: 20px;/*外边距 上下左右 20px*/
}
</style>
</head>
<body>

<h1>演示</h1>

<p>CSS 盒模型(框模型)实质上是一个包装每个 HTML 元素的盒子。它包括:边框、内边距(填充)、外边距以及实际的内容。</p>

<div>此文本是盒子里的内容。我们添加了 50px 的内边距,20px 的外边距和 15px 的绿色边框。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。</div>

</body>
</html>

在这里插入图片描述
【2】元素的宽度和高度
为了在所有浏览器中正确设置元素的宽度和高度,您需要了解框模型如何工作。

重要提示:使用 CSS 设置元素的 width height 属性时,只需设置内容区域的宽度和高度。要计算元素的完整大小,还必须把内边距、边框和外边距加起来。

实例
< div> 元素的总宽度将是 350px:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h1>计算总宽度:</h1>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">

<div>上面的图片宽 350 像素。此因素的总宽也是 350 像素。</div>

</body>
</html>

在这里插入图片描述


计算如下:

320px(宽度)
+ 20px(左+右内边距)
+ 10px(左+右边框)
+ 0px(左+右外边距)
= 350px

元素的总宽度应该这样计算:

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算:

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距


【2】CSS 轮廓

在这里插入图片描述
【1】CSS 轮廓
轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素。

CSS 拥有如下轮廓属性:

outline-style
outline-color
outline-width
outline-offset
outline

注意:轮廓与边框不同!不同之处在于:轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。


【2】CSS 轮廓样式
outline-style 属性指定轮廓的样式,并可设置如下值:

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

下例展示了不同的 outline-style 值:

实例
演示不同的轮廓样式:
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h1>outline-style 属性</h1>

<p class="dotted">点状轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓。效果取决于 outline-color 值。</p>
<p class="ridge">凸脊轮廓。效果取决于 outline-color 值。</p>
<p class="inset">凹边轮廓。效果取决于 outline-color 值。</p>
<p class="outset">凸边轮廓。效果取决于 outline-color 值。</p>

</body>
</html>

在这里插入图片描述


注意:除非设置了 outline-style 属性,否则其他轮廓属性(在下一章中将详细介绍)都不会有任何作用!


【3】CSS 轮廓宽度

【1】CSS 轮廓宽度
outline-width 属性指定轮廓的宽度,并可设置如下值之一:

thin(通常为 1px)
medium(通常为 3px)
thick (通常为 5px)
特定尺寸(以 px、pt、cm、em 计)

下例展示了一些不同宽度的轮廓:
实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}
</style>
</head>
<body>

<h1>outline-width 属性</h1>

<p class="ex1">细的轮廓。</p>
<p class="ex2">中等的轮廓。</p>
<p class="ex3">粗的轮廓。</p>
<p class="ex4">4 像素的粗轮廓。</p>

</body>
</html>

在这里插入图片描述


【4】CSS 轮廓颜色

CSS 轮廓颜色
outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色:

name - 指定颜色名,比如 "red"
HEX - 指定十六进制值,比如 "#ff0000"
RGB - 指定 RGB 值,比如 "rgb(255,0,0)"
HSL - 指定 HSL 值,比如 "hsl(0, 100%, 50%)"
invert - 执行颜色反转(确保轮廓可见,无论是什么颜色背景)

下例展示了一些不同颜色的不同轮廓样式。请注意,这些元素在轮廓内还有黑色细边框:
实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
</style>
</head>
<body>

<h1>outline-color 属性</h1>
<p>outline-color 属性用于设置轮廓的颜色。</p>

<p class="ex1">红色的实线轮廓。</p>
<p class="ex2">蓝色的点状轮廓。</p>
<p class="ex3">灰色的实线轮廓。</p>

</body>
</html>

在这里插入图片描述


HEX 值

您也可以使用十六进制值(HEX)指定轮廓颜色:

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: #0000ff; /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h1>outline-color 属性</h1>
<p>也可以使用十六进制值(HEX)规定轮廓颜色:</p>

<p class="ex1">红色的实线轮廓。</p>
<p class="ex2">蓝色的点状轮廓。</p>
<p class="ex3">灰色的实线轮廓。</p>

</body>
</html>

在这里插入图片描述


RGB 值

或者通过使用 RGB 值:

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: rgb(0, 0, 255); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h1>outline-color 属性</h1>
<p>也可以使用 RGB 值规定轮廓颜色:</p>

<p class="ex1">红色的实线轮廓。</p>
<p class="ex2">蓝色的点状轮廓。</p>
<p class="ex3">灰色的实线轮廓。</p>

</body>
</html>

在这里插入图片描述


HSL 值

您还可以使用 HSL 值:

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: hsl(240, 100%, 50%); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h1>outline-color 属性</h1>
<p>也可以使用 HSL 值规定轮廓颜色:</p>

<p class="ex1">红色的实线轮廓。</p>
<p class="ex2">蓝色的点状轮廓。</p>
<p class="ex3">灰色的实线轮廓。</p>

</body>
</html>

在这里插入图片描述


反转颜色

下例使用 outline-color: invert,执行了颜色反转。这样可以确保无论颜色背景如何,轮廓都是可见的:

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;/*颜色反转 外部变内部*/
}
</style>
</head>
<body>

<h1>使用 outline-color:invert</h1>

<p class="ex1">invert 实线轮廓</p>

</body>
</html>

在这里插入图片描述


【5】CSS 轮廓简写

CSS Outline - 简写属性

outline 属性是用于设置以下各个轮廓属性的简写属性:

outline-width
outline-style(必需)
outline-color

从上面的列表中,outline 属性可指定一个、两个或三个值。值的顺序无关紧要。

下例展示了用简写的 outline 属性指定的一些轮廓:
实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>

<h1>outline 属性</h1>

<p class="ex1">点状轮廓。</p>
<p class="ex2">红色的点状轮廓。</p>
<p class="ex3">5 像素的黄色实线轮廓。</p>
<p class="ex4">粗的粉色凸脊轮廓。</p>

</body>
</html>

在这里插入图片描述


【6】CSS 轮廓偏移

CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

下例指定边框边缘外 25px 的轮廓:

实例

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h1>outline-offset 属性</h1>

<p>本段落在边框边缘外 15 像素处有一条轮廓线。</p>

</body>
</html>

在这里插入图片描述


下例显示元素与其轮廓之间的空间是透明的:

本段在边框边缘外的轮廓为 25px。

实例

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h1>outline-offset 属性</h1>

<p>本段落在边框边缘外 15 像素处有一条轮廓线。</p>

</body>
</html>

在这里插入图片描述


【7】所有 CSS 轮廓属性

属性描述
outline简写属性,在一条声明中设置 outline-width、outline-style 以及 outline-color
outline-color设置轮廓的颜色。
outline-offset指定轮廓与元素的边缘或边框之间的空间。
outline-style设置轮廓的样式。
outline-width设置轮廓的宽度。

在这里插入图片描述

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

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

相关文章

数据压缩算法PCA使用指南

来源&#xff1a;投稿 作者&#xff1a;小灰灰 编辑&#xff1a;学姐 PCA主成分分析算法 PCA的使用范围 PCA(principal Component Analysis)&#xff0c;即主成分分析方法&#xff0c;是一种使用最广泛的数据压缩算法。 在PCA中&#xff0c;数据从原来的坐标系转换到新的坐标…

【2023.01.03】定时执行专家 V6.5 更新日志 - TimingExecutor V6.5 Change Log

目录 ◆ 最新版下载链接 ◆ 软件更新日志 – TimingExecutor Full Change Log ▼ 2023-01-03 V6.5 ▼ 2022-12-25 V6.4 ▼ 2022-11-15 V6.3 ▼ 2022-10-01 V6.2 ▼ 2022-07-30 V6.1&#xff08;Build 769.30072022&#xff09; ▼ 2022-06-30 V6.0 ▼ 2022-…

《学术规范与论文写作》总结

文章目录一、写作规范二、写作准备三、论文架构3.1 标题3.2 摘要3.3 关键词&#xff08;可省&#xff09;3.4 引言3.5 相关工作&#xff08;研究背景&#xff09;3.6 实现细节3.7 实验部分3.8 结论四、写作技巧五、其他技巧5.1 算法伪代码5.2 图片5.3 写作语言一、写作规范 写…

短视频剪辑素材在哪里找?

视频剪辑没素材&#xff0c;推荐5个网站帮你解决&#xff0c;免费可商用&#xff0c;建议收藏&#xff01; 1、菜鸟图库 https://www.sucai999.com/video.html?vNTYwNDUx 网站有超多视频素材&#xff0c;全部都是高清无水印&#xff0c;各种类型都有&#xff0c;像自然、城市…

【Linux】文件操作|文件描述符|重定向

文章目录1.文件操作系统调用的几个基本接口openwritereadlseekwrite read close lseek ,对比C文件相关接口2.如何理解文件操作&#xff1f;3.文件描述符fd文件描述符的分配规则重定向使用 dup2 系统调用进行重定向4.在自己的shell中添加重定向功能&#xff1a;1.文件操作系统调…

唯品会api_sign分析

本次分析的案例是唯品会app,版本号:7.45.6 抓个包,请求头中有个api_sign,该字段就是本次分析的对象。 1.jadx 静态分析 直接搜索关键词:api_sign= 跟进去,来到这里。 这里用到了VCSPSecurityBasicService.apiSign()方法,双击两下,找到函数的定义地方。 这里引用到的方…

【机器学习实战】四、实现线性回归模型案例

线性回归案例 一、初始化方法 1.对数据进行预处理模块&#xff0c;调用prepare_for_training方法&#xff0c;得到返回值data_processed, features_mean, features_deviation 2.得到所有的特征个数&#xff0c;即data的特征维数的列(行shape[0]&#xff0c;列shape[1]) 3.初始…

怎么获取level2行情接口数据?

怎么获取level2行情接口数据比较方便呢&#xff1f;其实level2行情接口可以实时计算沪深所有股票数据&#xff0c;主要是可以让交易者方便引用和计算公式再进入股票池&#xff0c;就比如说一个分笔数据含有10-20个分笔数据&#xff0c;用分笔数据计算的资金流入数据不准确&…

< Linux > 进程控制

目录 1、进程创建 fork函数 fork函数返回值 写时拷贝 fork常规用法 fork调用失败的原因 2、进程终止 2.1、进程退出常见场景 2.2、进程退出码 2.3、进程常见退出方法 _exit函数 exit函数 return退出 2.4、关于终止&#xff0c;内核做了什么 3、进程等待 3.1、进程等待必要性…

解决VS2019+Qt5+Vcpkg工程无法调试但Release正常运行的问题

前言——这个问题可能比较小众&#xff0c;但是因为解决了我自己的问题&#xff0c;所以特此把解决方法分享出来&#xff0c;以给特定的人提供必要的帮助。 项目原因&#xff0c;一直使用VS2019Qt5Vcpkg&#xff0c;无奈程序一直无法进行调试&#xff0c;Release模式倒是正常运…

计算机图形学 Ray Trace 学习笔记

屏幕上的一个像素&#xff0c;是通过各种反射、折射而共同组成的&#xff0c;每个反射折射的点&#xff0c;都会考虑光源是否有直接照射到反射折射的点上&#xff0c;反射与折射之间会存在能量衰减&#xff0c;最终汇总在屏幕的像素上。 计算是哪一个三角形被射线打中&#xff…

Hive SQL 每日SQL

1、查询订单明细表&#xff08;order_detail&#xff09;中销量&#xff08;下单件数&#xff09;排名第二的商品id&#xff0c;如果不存在返回null&#xff0c;如果存在多个排名第二的商品则需要全部返回。 需要用到的表&#xff1a; 订单明细表&#xff1a;order_detail 代码…

【谷粒商城基础篇】仓储服务:仓库维护

谷粒商城笔记合集 分布式基础篇分布式高级篇高可用集群篇简介&环境搭建项目简介与分布式概念&#xff08;第一、二章&#xff09;基础环境搭建&#xff08;第三章&#xff09;整合SpringCloud整合SpringCloud、SpringCloud alibaba&#xff08;第四、五章&#xff09;前端知…

android 创建aar包

1. 背景 由于新入职公司在做硬件接入的项目&#xff0c;需要接入多款硬件&#xff0c;而且&#xff0c;几个app的功能不太一样。于是&#xff0c;需要模块化开发&#xff0c;并且许多东西都是可以复用的&#xff08;像网络框架、log、shareprefrence、权限申请等&#xff09;。…

嵌入式HLS 案例开发步骤分享——Zynq-7010/20工业开发板(1)

目 录 前 言 3 1 HLS 开发流程说明 5 1.1 HLS 工程导入 5 1.2 编译与仿真 6 1.3 综合 8 1.4 IP 核封装 10 1.5 IP 核测试 14 前 言 本文主要介绍 HLS 案例的使用说明,适用开发环境: Windows 7/10 64bit、Xilinx Vivado 2017.4 、Xilinx Vivado HLS 2017.4 、Xilinx…

数据结构|排序算法详解

​​​​​​​目录 一.插入类 1.直接插入排序 2.希尔排序 二.选择类&#xff0c;排一次选出一个最值 1.选择排序 2.堆排序 三.交换类&#xff0c;通过一直交换一次确定数字的位置 1.冒泡排序 2.快速排序 2.1 hoare版本 2.2挖坑法 2.3前后指针法 四.归并类 1.归并…

Go第 5 章:程序流程控制

第五章程序流程控制 5.1程序流程控制介绍 在程序中&#xff0c;程序运行的流程控制决定程序是如何执行的&#xff0c;是我们必须掌握的&#xff0c;主要有三大流程控 制语句。 1)顺序控制 2)分支控制 3)循环控制 5.2 顺序控制 程序从上到下逐行地执行&#xff0c;中间没有任…

C++标准库的智能指针:shared_ptr、weak_ptr和unique_ptr

文章目录智能指针shared_ptr模版类week_ptr模版类unique_ptrC中是没有内存回收机制的&#xff0c;我在之前的一篇文章中提到使用指针的一些基本方法。C在std标准库中也提供了三种封装过的指针模版类&#xff0c;称作为智能指针&#xff1a;shared_ptrunique_ptrweek_ptr 我这里…

JVM性能调优详解

前面我们学习了整个JVM系列&#xff0c;最终目标的不仅仅是了解JVM的基础知识&#xff0c;也是为了进行JVM性能调优做准备。这篇文章带领大家学习JVM性能调优的知识。 性能调优 性能调优包含多个层次&#xff0c;比如&#xff1a;架构调优、代码调优、JVM调优、数据库调优、操…

最优二叉树(哈夫曼树)

一、最优二叉树 1、定义 官方定义&#xff1a;在权值为w1&#xff0c;w2&#xff0c;…&#xff0c;wn的 n个叶子所构成的所有二叉树中&#xff0c;带权路径长度最小(即代价最小)的二叉树称为最优二叉树或哈夫曼树。 通俗来讲&#xff0c;就是给定N个权值作为N个叶子结点&…