Vue - CSS基础学习

已于 2024-07-30 10:11:43 修改
阅读量238 收藏 11
点赞数 7
分类专栏： 前端 文章标签： vue.js css 学习
于 2024-07-30 10:11:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Leixiansheng/article/details/140268865
版权

一、元素及属性

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; /*将溢出隐藏，以便可以看到阴影*/
}

在这里插入图片描述

Mr_Leixiansheng
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习使用vue-cropper初始化记录-vue3.2
qq_32067561的博客
03-13 1876
开发时的一些问题记录，解决image跨域问题 进入正题，vue开发 一个优雅的图片裁剪插件 开发版本："vue": "3.2.25" 插件版本："vue-cropper": "1.0.2"
vue系列 —— vue-route详细使用方法
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 3687
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
vue-cli基础入门教程
weixin_50216991的博客
10-30 3308
vue-cli的基本使用什么是vue-cli一.安装和使用1.安装2.使用 什么是vue-cli vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化项目的过程。 中文官网：https://cli.vuejs.org/zh/ 一.安装和使用 1.安装 vue-cli是npm上的一个全局包，使用npm install 命令 ，即可方便地把它安装到电脑上。 在cmd上运行如下命令来安装vue-cli： npm install -g @vue/cli 可以用下面这个命令来检查其
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
景天科技苑
03-22 4041
vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用 整个网站都是通过一个html文件搞定的。 我们只需要开发组件，页面中有什么组件，就开发什么组件。这些事情都是前端来做的，跟后端没有一点关系。 vue-cli 能创建vue项目，把目录创建好了，哪个地方放组件，哪个地方放css样式等都划分好目录了。类似于我们通过pycharm创建django项目。 而且能vue-cli把整个项目通过socket跑起来。
VUE全家桶 （Vue-cli、Vue-route、Vuex）学习笔记
大雾起了清晨
11-19 3633
6. v-model 修饰符 v-model.number //因为v-model将得到的值自动转换为string 所以加一个修饰符的话就可以将这个字符串转化为number类型。⑥npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev //安装关于.vue文件的脚手架。5. v-model修饰符 v-model.lazy //当input标签失去焦点的时候才会改变这个 v-model值。
vue-vue3学习笔记
weixin_44164945的博客
08-30 3145
vue-vue3学习笔记
vue-flow绘制流程图
m0_50666077的博客
07-16 1201
vue-flow绘制流程图
vue-cli 3学习之vue-cli-service插件开发（注册自定义命令）
dengdongxia的博客
02-25 1万+
前言 提到 vue-cli，官方文档对其的介绍如下： A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。 说白了，vue-cli 其实就是一个基于webpack构建，可以让用户快速初始化一个项目的工具。 基本原理: vue-cli并非从无到有地凭空生成一个项目，而是通过下载/拉取(通过download-git...
vue-element-admin-tinymce本地化文件
06-04
在"vue-element-admin-tinymce"项目中，Element UI 被用作基础UI框架，提供了一套统一的界面风格和交互体验。 **TinyMCE 编辑器** TinyMCE 是一款功能强大的富文本编辑器，支持多种语言，包括中文。它可以轻松嵌入...
vue的vue-admin-demo模板
03-11
在Vue-admin-demo中，你可以学习到以下关键知识点： 1. **Vue实例和组件**：Vue.js的核心是组件系统。Vue-admin-demo中包含许多自定义组件，如表单、表格、图表等，这些都是通过`Vue.component()`方法定义的。每个...
vue-admin-template-master_vue-admin-master_
10-01
Vue Admin Template Master 是一个完整的后台管理系统的基础模板，它集成了Vue.js的核心特性，如组件化、虚拟DOM、响应式数据绑定等，并且通常包括路由管理（vue-router）、状态管理（Vuex）、API调用处理、权限控制...
vue-admin-template-master.zip
02-21
总的来说，"vue-admin-template-master" 是一个完整的 Vue.js 开发环境，包含了使用 Vue.js、Element-UI 和其他辅助工具进行后台管理应用开发的基础框架，适合初学者学习和快速启动项目。通过这个模板，开发者可以...
vue-demovue-demovue-demo
10-25
1. **Vue.js基础概念**： - **虚拟DOM**：Vue.js使用虚拟DOM来提高应用性能，减少对实际DOM的操作。 - **数据绑定**：Vue采用双括号`{{ }}`实现数据绑定，使得视图与模型之间保持同步。 - **指令系统**：如`v-if`...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 644
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
L_C_sunny的博客
07-24 289
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
vue3 reactive原理（二）-代理Set和Map及ref原理
最新发布
KEEP CODING
07-25 1172
Set和Map类型的数据也属于异质对象，它们有特定的属性和方法用来操作自身。因此创建代理时，针对特殊的方法需要特殊的对待。 Vue 的ref 是基于reactive函数实现的，它在其基础上，增加了基本类型的响应性、解决reactive在解构时丢失响应性的问题及在模版字面量中自动脱落Ref.
common-intellisense：助力TinyVue 组件书写体验更丝滑
OpenTiny的博客
07-24 1120
本文由体验技术团队Kagol原创~前两天，common-intellisense 开源项目的作者 Simon-He95 在 VueConf 2024 群里发了一个重磅消息：common-intellisense 支持 TinyVue 组件库啦！common-intellisense 插件能够提供超级强大的智能提示功能，包含属性(props)、事件(events)、插槽(slots)以及对应的注释和类型，实例上的方法(methods)等等，支持多个UI库，让你的开发效率更上一层楼。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值