当前位置: 首页 > news >正文

css整体使用

文章目录

  • html与css
    • html、css与排版
    • 响应式与自适应布局
      • 自适应布局
      • 响应式布局
    • css规则
      • class、id、以及默认的标签名的优先级
    • css书写位置
    • flex
      • 整体逻辑
    • bootstrap
      • 资源

html与css

html负责网页功能,css负责网页美化;浏览器本身有一套默认的css样式;所以有的元素会表现的不一样

html、css与排版

这里说一下对排版的个人理解:
首先整体上,不论是以前的块级元素、行级元素;还是现在的元素类别,一个元素,他都会区分为换行以及不换行的;而这个换行与不换行本质上由css决定,html的元素有些换行,有些不换行,究其原理就是css的不同默认设置。
而当不换行的时候,css就根据盒子模型不断对元素放置,外层元素要完全包含内层元素。因此整体上的表现就是一个个的元素分层次的嵌套一个又一个的元素,最终嵌套了最基本的元素。

响应式与自适应布局

自适应布局

分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。

响应式布局

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应;通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;只需要开发一套界面即可适用于所有尺寸及终端。

css规则

<style>h1, h2 {color: red;background-color: lightblue;text-align: center;}h3 {color: yellow;background-color: lightblue;text-align: center;}
</style>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3><p class="class_p1">p2</p>
<p>p3</p>

css规则 = 选择器 + 声明块

  • 选择器
    用来选中元素,定义选中元素的范围

    • 元素选择器:选中对应标签的元素

      h1 {color: red;background-color: lightblue;text-align: center;
      }
      
      <h1>标题1</h1>
      
    • id选择器:选中对应id的元素

      #id_p1 {color: red;
      }
      
      <p id="id_p1">p1</p>
      
    • 类选择器:选中对应的类型

      .class_p1 {color: lightblue;
      }
      
      <p class="class_p1">p2</p>
      
  • 声明块
    用来定义选择器的属性,出现在大括号中,声明块中包含多种属性,每个属性表达了一种样式规则。

class、id、以及默认的标签名的优先级

<style>.test {background: red;color: red;}#testID{background: blue;}.test2 {background: violet;}.test {background: yellow;}div{background: turquoise;border: 1px black solid;}
</style><div class="test test2" id="testID">
  • 此时相同类型的css定义,如class,如果有重复的,那么后面的属性会覆盖前面的属性(如background),而后面没有的属性并不会影响前面存在的属性(如color);
  • 而不同类型的css定义,他们的优先级为标签名 < class类型 < id类型;同样的如果一个标签同时引用了三种,那么他们的会按照这个优先级顺序覆盖相同的属性,而优先级低存在的属性但是优先级高的不存在的属性则会保留;
  • 如果class或者id引用了多个类型,那么会按照对应style定义的先后顺序生效,而不是引用顺序,如这里的class="test test2"最终生效的是test2的background,因为他定义在test之前。

css书写位置

  1. 内部样式表
    即直接将<style>...</style>写在<head>...</head>中;
    <style>...</style>也可以写在<body>...</body>中,但是由于浏览器是从html文件从上到下进行数据读取,渲染过程中在遇到<style>...</style>时会根据样式表重新进行渲染,可能造成闪烁问题,因此一般放在head部分,保证浏览器一开始就能读取到样式表。

  2. 内联样式表、元素样式表
    即直接在元素位置加style属性:<h1 style="color: red; background: blue;"></h1>

  3. 外部样式表
    将样式书写到独立的css文件中;然后使用link进行引用:

    <link rel="stylesheet" href="css/base.css">
    

推荐使用外部样式表,理由如下:

  1. 外部样式表可以解决多页面样式重复问题,和c++头文件差不多,把重复性的都提取出来成一个外部样式表文件;
  2. 有利于浏览器缓存,提升浏览器响应速度。
  3. 有利于代码分离,更容易阅读和维护。

flex

Flexible – 灵活的
flex – Flexible Box – 弹性布局,用来为盒状模型提供最大的灵活性。

整体逻辑

整体逻辑就是一个container,然后内部容纳多个item,而属性方面有两个层次,一个是container的层次,用于描述整体排版;一个是item的层次,用于描述container存在剩余空间的时候每个item的放大缩小策略,以及一个排版布局的属性。

整体上,针对的更多的是主轴方面,而垂直轴的布局主要由容器负责管理。

当所有的项目都以 flex-basis 的值进行排列后,仍有剩余空间,那么这时候 flex-grow 就会发挥作用了。
如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间。(如果有的话)
如果一个项目的 flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍。
当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了,且 flex-wrap:nowrap 时,此时 flex-grow 则不起作用了,这时候就需要接下来的这个属性:
flex-shrink:如果空间不足,该项目将缩小,负值对该属性无效。

bootstrap

一个css库,可以用来美化界面

资源

中文文档:
http://bs4.vx.link/

资源链接:
https://www.bootstrapcdn.com/

相关文章:

css整体使用

文章目录 html与csshtml、css与排版响应式与自适应布局自适应布局响应式布局 css规则class、id、以及默认的标签名的优先级 css书写位置flex整体逻辑 bootstrap资源 html与css html负责网页功能&#xff0c;css负责网页美化&#xff1b;浏览器本身有一套默认的css样式&#xf…...

LeetCode1578. 使绳子变成彩色的最短时间

思路 拆除成本 全部拆除 - 最大的不拆除在统计成本的同时&#xff0c;维持一个成本的最大值 代码 class Solution {public int minCost(String colors, int[] neededTime) {int res 0;int i 0;int len colors.length();while (i < len) {int max -1;int sum 0;char…...

如何在机器学习中实现分类?

机器学习和统计学中的分类是一种监督学习方法,其中计算机程序从给定的数据中学习并进行新的观察或分类。在本文中,我们将详细了解机器学习中的分类。 本博客涵盖以下主题: 目录 什么是机器学习中的分类? 机器学习中的分类术语 分类算法...

华为网络篇 RIP的负载均衡-29

难度2复杂度2 目录 一、实验原理 二、实验拓扑 三、实验步骤 四、实验过程 总结 一、实验原理 RIP是使用跳数&#xff08;经过路由的数量&#xff09;作为metric值的&#xff0c;当网络上存在去往目标的路由有两条以上都是相同metric时&#xff0c;就出现了流量负载均衡。…...

前端面试的性能优化部分(10)每天10个小知识点

目录 系列文章目录前端面试的性能优化部分&#xff08;1&#xff09;每天10个小知识点前端面试的性能优化部分&#xff08;2&#xff09;每天10个小知识点前端面试的性能优化部分&#xff08;3&#xff09;每天10个小知识点前端面试的性能优化部分&#xff08;4&#xff09;每天…...

分类预测 | MATLAB实现S4VM半监督支持向量机二分类预测

分类预测 | MATLAB实现S4VM半监督支持向量机二分类预测 目录 分类预测 | MATLAB实现S4VM半监督支持向量机二分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 分类预测 | MATLAB实现S4VM半监督支持向量机二分类预测 程序设计 完整源码和数据获取方式&#xff1a; …...

maven -pl -am -amd

maven常见命令之 -pl -am -amd 昨天maven的deploy任务需要只选择单个模块并且把它依赖的模块一起打包&#xff0c;第一时间便想到了-pl参数&#xff0c;然后就开始处理&#xff0c;但是因为之前只看了一下命令的介绍&#xff0c;竟然花了近半小时才完全跑通&#xff0c;故记录…...

高效解决Anaconda Prompt报错Did not find VSINSTALLDIR这类问题

文章目录 回忆问题解决问题step1step2 回忆问题 类似于划红线部分然后还有很多行的报错信息&#xff0c;最后一行肯定是红色划线部分 解决问题 step1 找到 D:\Anaconda\envs\pytorch\etc\conda\activate.d在这个文件夹内会有两个文件&#xff0c;删除 vs2017_compiler_v…...

将iPhone备份到移动硬盘

文章目录 将iPhone备份到移动硬盘如何在 MacOS 上查找当前备份如何在 MacOS 上查找当前备份如何将 iPhone 备份移至外部硬盘如何永久更改 Mac系统 保存 iPhone 备份的位置更新 Mac 上的权限更改 iPhone 备份位置如何验证新的 iPhone 备份已经生效?将iPhone备份到移动硬盘 如果…...

找工作 相关资料

1、简历准备 一份近乎完美的计算机简历应该如何写以及如何修改&#xff1f;-知乎 2.1 机械面试可能的问题 2.1.1 技术邻上的 机械专业面试31问 2.1.2 B站上的 B站&#xff1a; “经常作为面试题&#xff0c;50个机械设计基础常识&#xff0c;你掌握了几个&#xff1f;”文…...

罗勇军 → 《算法竞赛·快冲300题》每日一题:“排列变换” ← 贪心算法

【题目来源】http://oj.ecustacm.cn/problem.php?id1812http://oj.ecustacm.cn/viewnews.php?id1023【题目描述】 给定一个长度为 n 的排列 a&#xff0c;需要将这个排列变成 b。 每次可以选择一个数字往左移若干个位置。 请求出最小需要移动的元素个数。【输入格式】 第一行…...

算法修炼Day51|● 309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费

LeetCode:309.最佳买卖股票时机含冷冻期 309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; 1.思路 初始化dp[i][j]数组&#xff0c;表示第i天的最大利润为dp[i][j]. 精确的定义状态是个难点&#xff0c;可以定义四种状态&#xff1a;持有股票&#…...

LVS-DR模型实例

一、LVS-DR集群介绍 LVS-DR&#xff08;Linux Virtual Server Director Server&#xff09;工作模式&#xff0c;是生产环境中最常用的一 种工作模式。 1、LVS-DR 工作原理 LVS-DR 模式&#xff0c;Director Server 作为群集的访问入口&#xff0c;不作为网关使用&#xff0…...

Vue面试题

1. vue优点 轻量级速度快简单易学低耦合可重用性独立开发文档齐全&#xff0c;且文档为中文文档 2. ## vue中组件间传值 prop/$emit 父子组件传值 ref 和 $parent/$children 父子组件传值 eventBus($emit/$on) 父子&#xff0c;隔代&#xff0c;兄弟组件传值 $attrs/$listeners…...

使用图像处理算法检测金属表面的生锈区域: Python实现及步骤解析

摘要&#xff1a; 本文主要介绍如何使用Python和OpenCV库来实现对金属表面的生锈区域的检测。图像处理在工业领域有着广泛的应用&#xff0c;尤其是对材料的表面缺陷的检测。本文将详细阐述该算法的具体实现步骤&#xff0c;并提供完整的Python代码示例。 1. 引言 金属的锈蚀是…...

通过爬虫抓取上市企业利润表并在睿思BI中展示

睿思BI从v5.3开始支持网络爬虫&#xff0c;可以从指定URL抓取表格数据&#xff0c;本示例实现从网络上抓取上市企业招商银行的利润表数据&#xff0c;并在睿思BI中进行展现。 功能演示URL&#xff1a;https://www.ruisitech.com/rsbi-ultimate/#/dashboard/ShareView?token31…...

填充柄功能

单元格右下角十字符号 顺序式填充 输入1,2&#xff0c;直接拉取即可实现顺序1到10. 复制式填充 CtrlD或者拉取&#xff0c;选择右下角复制单元格。 规律式填充 输入星期一&#xff0c;星期二&#xff0c;下拉一直可以到星期日 自定义填充 选择文件-》选项-》自定义序列 输…...

Python爬虫性能优化:多进程协程提速实践指南

目录 1. 多进程爬虫的实现&#xff1a; 1.1 将爬虫任务划分成多个子任务&#xff1a; 1.2 创建进程池&#xff1a; 1.3 执行任务&#xff1a; 1.4 处理结果&#xff1a; 代码示例 2. 协程爬虫的实现&#xff1a; 2.1 定义异步爬虫函数&#xff1a; 2.2 创建事件循环&a…...

mongodb export(2023新)

之前的mongodb export发现不能用了&#xff0c;T3带ui的版本&#xff0c;试用到期不支持导出。 根据文档&#xff0c;是因为server版本更新后 tool版本没有升级&#xff0c;(refs文档) 按文档下载bin&#xff0c;后解压到更新本地文件夹&#xff0c;替换/usr/local/bin里的文…...

css-flex使用

文章目录 flex弹性容器属性flex-directionflex-wrapflex-flowalign-itemsjustify-contentalign-content主轴和侧轴 弹性元素默认大小属性flex-growflex-shrinkalign-selfflex-basisflexorder 高度坍塌flex布局子元素宽度超出父元素 flex 弹性盒&#xff0c;伸缩盒&#xff0c;…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...

新版NANO下载烧录过程

一、序言 搭建 Jetson 系列产品烧录系统的环境需要在电脑主机上安装 Ubuntu 系统。此处使用 18.04 LTS。 二、环境搭建 1、安装库 $ sudo apt-get install qemu-user-static$ sudo apt-get install python 搭建环境的过程需要这个应用库来将某些 NVIDIA 软件组件安装到 Je…...