Vue - CSS基础学习

一、元素及属性

CSS 是为 web 内容添加样式的代码。 style标签

1.语法

1.除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
2.在每个声明里要用冒号（:）将属性与属性值分隔开。
3.在每个规则集里要用分号（;）将各个声明分隔开。
4.选择多个元素,将不同的选择器用逗号分开。

p1,
p2,
p3 {color: red;width: 500px;border: 1px solid black;
}

二、CSS组成

1.外部样式表

使用 HTML 元素来链接外部样式表文件， 元素的 href 属性需要引用你文件系统中的一个文件。

 <head><meta charset="utf-8" /><title>CSS外部样式</title><link rel="stylesheet" href="xxx/xxx/styles.css" /></head>

外部styles.css如下

h1 {color: blue;background-color: yellow;border: 1px solid black;
}p {color: red;
}

2.内部样式表

把 CSS 放置在包含在 HTML 元素中的 

  <head><meta charset="utf-8" /><title>CSS内部样式</title><style>h1 {color: blue;background-color: yellow;border: 1px solid black;}p {color: red;}</style></head>

3.内联样式(不推荐)

内联样式是影响单个 HTML 元素的 CSS 声明，包含在元素的 style 属性中。

    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1><p style="color:red;">>CSS内联样式</p>

二、CSS优先级

  <p>我是什么颜色</p>

p {color: yellow;
}
.test-color {color: red;
}

优先展示 .xxx , 这里文字为红色

  <p>我是什么颜色</p>

p {color: blue;
}
p {color: yellow;
}

优先展示最后申明 , 这里文字为黄色

三、CSS选择器

1.类型选择器（h1/span/p）

类型选择器有时也叫做标签名选择器或者是元素选择器。

2.全局选择器 ( * )

全局选择器，是由一个星号（*）代指的

3.类选择器 ( . )

类选择器以一个句点（.）开头
可继承

  <p class="notebox">我的网页</p><p class="notebox warning">我的网页</p><p class="notebox danger">我的网页</p>

.notebox {width: 100px;border: 4px solid #666;padding: 5px;
}.notebox.warning {border-color: orange;font-weight: bold;
}.notebox.danger {border-color: red;font-weight: bold;
}

在这里插入图片描述

4.ID 选择器 ( # )

ID 选择器开头为#而非句点

  <p id="one">我的网页</p><p id="two">我的网页</p><p id="three">我的网页</p>

#one {color: blue;
}
#two {color: green;
}
#three {color: red;
}

在这里插入图片描述

  <li class>我的网页</li> <li class="one">我的网页</li><li class="two">我的网页</li>

li[class] {color: blue;
}li[class="one"] {color: yellow;
}li[class="two"] {color: red;
}

四、盒子

1.盒子组成

  1. 内容盒子：显示内容的区域；使用 inline-size 和 block-size 或 width 和 height 等属性确定其大小。
  2. 内边距盒子：填充位于内容周围的空白处；使用 padding 和相关属性确定其大小。
  3. 边框盒子：边框盒子包住内容和任何填充；使用 border 和相关属性确定其大小。
  4. 外边距盒子：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用 margin 和相关属性确定其大小。

2.外边距 margin

我们可以使用 margin 属性一次性控制一个元素的所有外边距，或者每边单独使用等价的普通属性控制：

margin-top
margin-right
margin-bottom
margin-left

根据外边距相接触的两个元素是正边距还是负边距，结果会有所不同：

3.外边距折叠

  1. 相邻兄弟元素：当两个块级元素上下相邻，且没有边框、内边距或内容分隔它们时，它们的垂直外边距会发生折叠，合并为一个较大的外边距。
  2. 父元素与子元素：当一个块级元素包含另一个块级元素作为其直接子元素时，如果父元素没有边框、内边距或内容，则父元素的底部外边距和子元素的顶部外边距可能会发生折叠。
  3. 负外边距：当一个元素的外边距是负值时，它会尝试与其他元素重叠。在这种情况下，外边距折叠的结果可能是零或者更小的正值，取决于其他元素的外边距大小。
  4. 清除浮动：使用 clear 属性可以阻止外边距折叠，因为这会在元素周围创建一个新的块格式化上下文。
  5. 表格单元格：表格单元格的外边距不会折叠。
  6. 行内元素：行内元素的外边距不会与其他元素的外边距折叠

4.内边距 padding

每个边框都有样式、宽度和颜色
我们可以使用 padding 简写属性一次性控制元素所有边，或者每边单独使用等价的普通属性：

padding-top
padding-right
padding-bottom
padding-left

5.边框 border

可以使用 border 属性一次性设置所有四个边框的宽度、颜色和样式。

欲分别设置每边的属性，可以使用：

border-top
border-right
border-bottom
border-left

欲设置所有边的宽度、样式或颜色，可以使用：

border-width
border-style
border-color

欲设置单条边的宽度、样式或颜色，可以使用最细粒度的普通属性之一：

border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color

6.背景与边框

1.背景颜色

background-color: #567895;
background-color: black;
background-color: rgb(255 255 255 / 50%);

2.背景图片

  1. background-image: url(1.jpg);

  2. background-repeat 属性用于控制图像的平铺行为。可用的值是：

no-repeat——阻止背景重复平铺。
repeat-x——仅水平方向上重复平铺。
repeat-y——仅垂直方向上重复平铺。
repeat——默认值，在水平和垂直两个方向重复平铺。

使用 background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
cover：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。
contain：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。

  1. background-position 属性允许你选择背景图片出现在它所应用的盒子上的位置。
 background-position: top center;background-position: 20px 10%;background-position: 20px top;background-position: top 20px right 10px;

3.多个背景图像

background-image: url(1.png), url(2.png);

4.边框

.box {border-width: 1px;border-style: solid;border-color: black;
}

简写

.box {border: 1px solid black;
}

.box {border-top-width: 1px;border-top-style: solid;border-top-color: black;
}

5.圆角

 .box {border-radius: 10px;
}

7.display 属性（布局）

在 css 中实现页面布局的主要方法是设定display属性的值。

display:block
display:inline
display: flex 
display: grid

1.横向布局（默认）

  <div><p class="border">box1</p><p class="border">box2</p><p class="border">box3</p></div>

.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}

在这里插入图片描述

2.竖向布局 display: flex

  <div class="wrapper"><p class="border">box1</p><p class="border">box2</p><p class="border">box3</p></div>

.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}.wrapper {display: flex;
}

在这里插入图片描述

3. 填充容器 flex: 1

们可以在我们的所有子元素上添加flex 属性，并赋值为1，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。

  <div class="wrapper"><div class="border">box1</div><div class="border">box2</div><div class="border">box3</div></div>

.wrapper > div {flex: 1;
}
.wrapper {display: flex;width: 800px;
}

在这里插入图片描述

4. 网格布局 Grid

  <div class="wrapper"><div class="border">box1</div><div class="border">box2</div><div class="border">box3</div><div class="border">box4</div><div class="border">box5</div><div class="border">box5</div><div class="border">box5</div><div class="border">box5</div></div>

.wrapper {display: grid;grid-template-columns: 1fr 1fr 1fr; /*1fr等于自由空间的一份*/grid-template-rows: 50px 50px; /*指定每行的高度，这个设置的行数是2*/grid-gap: 10px; /*网格单元之间的间隙大小*/
}

在这里插入图片描述

  <div class="wrapper"><div class="border box1">box1</div><div class="border box2">box2</div><div class="border box3">box3</div></div>

.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}
.border.box1 {grid-column: 2 / 4;grid-row: 1;
}
.border.box2 {grid-column: 1;grid-row: 1 / 3;
}
.border.box3 {grid-row: 2;grid-column: 3;
}

在这里插入图片描述

5. 浮动 float

这一元素会浮动到左侧或右侧
在这里插入图片描述

  <div class="box">Float</div><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

.box {float: left;width: 200px;height: 200px;margin: 10px;background-color: #e99;overflow: auto; /*将溢出隐藏，以便可以看到阴影*/
}

在这里插入图片描述

.box {float: right;width: 200px;height: 200px;margin: 10px;background-color: #e99;overflow: auto; /*将溢出隐藏，以便可以看到阴影*/
}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

Android Studio运行报错:module java.base dose not “opens java.io“ to unnamed module

Android Studio运行报错:module java.base dose not “opens java.io“ to unnamed module

今天第一次使用Android Studio运行一个安卓工程&#xff0c;报如图错误,应该是环境问题。 解决&#xff1a; 右上角的设置图标->settings->Buid,Execution,Deployment->Build Tools->Gradle->Gradle JDK->选择本地环境的java_home jdk&#xff08;怎么安装…
阅读更多...
SEQ 4. 转录本蛋白编码能力预测软件(CPAT)

SEQ 4. 转录本蛋白编码能力预测软件(CPAT)

简 介 深度转录组测序能够检测数千个新的转录本。这一发现大而“隐藏”的转录组重新激活了对能够快速区分编码和非编码 RNA 的方法的需求。在这里提出了一种新的无比对方法&#xff0c;编码潜在评估工具( CPAT) &#xff0c;可以快速识别来自大量候选转录本的编码和非编码转…
阅读更多...
公司里的IT是什么？

公司里的IT是什么？

公司里的IT是什么&#xff1f; 文章目录 公司里的IT是什么&#xff1f;1、公司里的IT2、IT技术3、IT行业4、IT行业常见证书 如果对你有帮助&#xff0c;就点赞收藏把&#xff01;(&#xff61;&#xff65;ω&#xff65;&#xff61;)&#xff89;♡ 前段时间&#xff0c;在公…
阅读更多...
【C语言】指针基础知识理解【续】

【C语言】指针基础知识理解【续】

1. ⼆级指针 指针变量也是变量&#xff0c;是变量就有地址&#xff0c;那指针变量的地址存放在哪⾥&#xff1f;这就是 ⼆级指针 。 1.1 引入二级指针 由于一级指针已经很熟悉&#xff0c;这里就不再赘述&#xff0c;这里我们重点探讨二级指针 下面先简单使用一个二级指针看…
阅读更多...
TPAMI 2024 | 全新框架！深度学习可解释度量学习！

TPAMI 2024 | 全新框架！深度学习可解释度量学习！

TPAMI 2024 | 全新框架&#xff01;深度学习可解释度量学习&#xff01; DIML: Deep Interpretable Metric Learning via Structural Matching 题目&#xff1a;DIML: 通过结构匹配的深度可解释度量学习 作者&#xff1a;Wenliang Zhao, Yongming Rao, Jie Zhou , and Jiwen…
阅读更多...
C++笔试强训10

C++笔试强训10

文章目录 一、选择题1-5题6-10题 二、编程题题目一题目二 一、选择题 1-5题 前面做过很多次了&#xff0c;记住就好&#xff0c;不在赘述&#xff0c;选C。 内联函数经常使用的场景包括&#xff1a; 小型函数&#xff1a;当函数体非常小&#xff0c;只包含几条语句时&#xf…
阅读更多...
【C++】模板的特化

【C++】模板的特化

文章目录 概念函数模板特化类模板特化全特化偏特化 概念 通常情况下&#xff0c;使用模板可以实现一些与类型无关的代码&#xff0c;但是有一些类型需要特殊处理&#xff0c;否则可能会得到一些错误的结果。 比如&#xff0c;在比较两个数的大小时&#xff0c;如果传入两个变量…
阅读更多...
手动上电电路（电路收藏）

手动上电电路（电路收藏）

SW1按下 V1栅极对地 V1通 Vout给Mcu工作 GPIO2 高电平 V2通 SW1松开 V1栅极依然通过V2对地 维持V1通 Vout。再次按下SW1 GPIO1 对地 使Mcu收到中断 将GPIO2 输出低电平 V2关 松开SW1 V1栅极悬空 V1断开 Vout被截断
阅读更多...
产品思维之什么是好的设计？

产品思维之什么是好的设计？

点击下方“JavaEdge”&#xff0c;选择“设为星标” 第一时间关注技术干货&#xff01; 免责声明~ 任何文章不要过度深思&#xff01; 万事万物都经不起审视&#xff0c;因为世上没有同样的成长环境&#xff0c;也没有同样的认知水平&#xff0c;更「没有适用于所有人的解决方案…
阅读更多...
原生微信小程序wxml2canvas生成海报并包保存至本地

原生微信小程序wxml2canvas生成海报并包保存至本地

Wxml2Canvas是什么&#xff1f; Wxml2Canvas 是一个用于微信小程序开发的工具库&#xff0c;主要用途是将小程序页面的内容绘制成图片&#xff0c;以便生成海报或保存分享图片到相册等功能。具体用途包括&#xff1a; ①海报生成功能&#xff1a;允许开发者将当前页面的特定部…
阅读更多...
【机器学习】决策边界的基本概念以及如何在逻辑回归中找到决策边界

【机器学习】决策边界的基本概念以及如何在逻辑回归中找到决策边界

引言 在机器学习中&#xff0c;决策边界是分类算法用来区分不同类别数据点的线、面或超平面。这些边界通常是模型的预测规则&#xff0c;用于将特征空间中的点分配到不同的类别。决策边界可以是线性的&#xff0c;也可以是非线性的&#xff0c;取决于数据的分布和所使用的分类算…
阅读更多...
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇

鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇

一、概述 云数据库是一款基于对象模型的数据库&#xff0c;采用存储区、对象类型和对象三级结构。 数据模型 存储区 存储区是一个独立的数据存储区域&#xff0c;多个数据存储区之间相互独立&#xff0c;每个存储区拥有完全相同的对象类型定义 --类似于关系型数据库中的da…
阅读更多...
ECMA6Script学习笔记(五)

ECMA6Script学习笔记(五)

【摘要】 本文是对自己学习ES6的学习笔记回顾,后面是概要: 本文介绍了ES6中的对象创建和拷贝方法。对象创建方面&#xff0c;ES6通过class关键字支持了面向对象的语法糖&#xff0c;包括属性设置、getter和setter方法、构造器、静态方法以及私有属性的定义。同时&#xff0c;展…
阅读更多...
专业做护眼灯的有哪些品牌？五款市面主流护眼灯专业测评

专业做护眼灯的有哪些品牌？五款市面主流护眼灯专业测评

专业做护眼灯的有哪些品牌&#xff1f;市面上出现的品牌毫不夸张的说&#xff0c;真的算得上是琳琅满目&#xff0c;而且每一个品牌都在说自己的产品才是最值得的&#xff0c;这种情况下来&#xff0c;很多人一时之间根本就不知道要选择哪一款比较好。而且还有一些还会买到低劣…
阅读更多...
vue基础知识总结（2）--- axios的使用

vue基础知识总结（2）--- axios的使用

一.下载Vue3&#xff1a; 选择自己想要下载的项目文件夹&#xff0c;cmd回车打开命令栏&#xff0c;执行 &#xff1a; cnpm init vuelatest 然后等待一会就可以创建一个项目&#xff0c;并更改项目名&#xff1a; √ 请输入项目名称&#xff1a; ... vue-project 之后按照…
阅读更多...
华为仓颉语言测试申请

华为仓颉语言测试申请

1. 申请网址 HarmonyOS NEXT仓颉语言开发者预览版 Beta招募- 华为开发者联盟 点击立即报名登录华为账号 勾选选项 , 点击同意 按要求填写信息即可 2. 申请通过后官方会通过邮件的方式发送相关下载途径 , 根据文档进行下载即可 package Cangmain(): Int64 {println("你…
阅读更多...
AI技术修复奥运珍贵历史影像，《永不失色的她》再现百年奥运女性光彩

AI技术修复奥运珍贵历史影像，《永不失色的她》再现百年奥运女性光彩

Greatness of HER &#xff01; AI致敬 , 了不起的「她」。 7月25日&#xff0c;在国际奥委会和各方力量的支持下&#xff0c;阿里云以AI技术修复奥运珍贵历史影像&#xff0c;让百年奥运女性的伟大光彩被看见&#xff0c;并在巴黎推出《永不失色的她》全球首映礼。 国际奥委会…
阅读更多...
Graph Contrastive Learning via Interventional View Generation

Graph Contrastive Learning via Interventional View Generation

发表于:WWW24 推荐指数: #paper/⭐⭐ 框架与动机: 整体框架 动机: 如上四个: b.HLCL 生成随机增强视图,并分别用高通过滤器和低通过滤器过滤 c.生成同配异配视图,都用低通过滤器 d.生成同配视图异配视图,同配视图用低通过滤器,异配视图用高通过滤器 通过图d,我们可以得出:d&g…
阅读更多...
基于Material studio拉伸-断裂过程的Perl脚本

基于Material studio拉伸-断裂过程的Perl脚本

在材料科学的研究中&#xff0c;拉伸-断裂过程一直是科学家们探索的焦点。这一过程涉及复杂的力学行为和材料内部微观结构的变化&#xff0c;对于理解材料的性能至关重要。然而&#xff0c;传统的实验方法不仅耗时耗力&#xff0c;而且难以捕捉到微观尺度上的所有细节。 为了满…
阅读更多...
网站如何实现HTTPS访问

网站如何实现HTTPS访问

要实现网站通过HTTPS协议访问&#xff0c;主要依赖于为网站部署SSL/TLS证书。 SSL&#xff08;Secure Sockets Layer&#xff09;是用于在互联网上加密数据传输的安全协议。部署了SSL证书之后&#xff0c;网站就可以通过HTTPS&#xff08;超文本传输安全协议&#xff09;来提供…
阅读更多...
最新文章

Copyright @ 2022~2023