css题库

什么是css？

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。

为什么最好把 CSS 的 link 标签放在 head 标签之间？

把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

css引入方式有几种？有什么区别？link和@import有什么区别？

有内部引入、外部引入、行内引入

  1. 行内式引入，使用style属性在特定的HTML标记内插入CSS代码，语法“<标签名 style="css样式">..</标签名>”；
  2. 嵌入式引入，在文档head部分的style标签对中放入CSS代码，语法“<style>样式</style>”；
  3. 外部引入，将CSS代码放入外部CSS文件中，使用link标签或“@import”规则引入html文档中。

link属于html标签，而@import是css提供的一种方式，link标签不仅可以引入css，还可以做其他事，而@import只能引入css；@import只有在IE5以上才支持；而link标签不存在兼容性问题。

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载

css选择器有几种？选择器的优先级是怎样的？

元素选择器，id 选择器，calss 选择器，后代选择器，子代选择器，伪类选择器，通配符

内联样式  >  id  >  class  >  元素  >  通配符  >  继承样式

浮动的原理什么？浮动有几种？

浮动的框可以左右移动，直到它的外边缘遇到另一个浮动框的边缘。

浮动框不属于文档流，是脱离了文档流。

float：left（左边） right（右边）。

请写出清除浮动有几种方式，分别是什么?

使用空标签清除浮动   clear：both。

使用overflow属性。

使 after 伪对象清除浮动

浮动外部元素，float-in-float。

如何解决浮动引起的高度坍塌？

给父元素加上高度（height）

设置一个空标签，并且给此标签加上clear:both；

清除——两者

行内，块状，行内块元素之间如何进行转换？

行内是display：inline；

块状是display：block；

行内块是display：inline-block；

行内块元素之间为什么会有间隙？怎么去除？

出现空白间隙的原因是，元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

1.去除元素间的空白

2.父元素设置font-size为0，子元素单独再设置字体大小

3.设置margin-right为负值

4.给inline-block元素加float或者flex

5.设置字符间距或单词间距

定位有几种，他们的特点分别是什么？是相对于什么进行定位的？

position：static；默认值

HTML元素的默认值，没有定位，元素出现在正常的文档流中。

position：absolute；绝对定位

特点：脱离文档流 ，

根据最近的有定位方式的父元素进行定位。

position：relative；相对定位

特点：不脱离文档流的布局，

根据自身的位置进行定位 ；一般配合绝对定位使用。

position：fixed；固定定位

特点：脱离文档流。

根据浏览器页面进行定位的 常用于制作导航栏。

position：sticky；粘性定位

粘性定位的元素是依赖于用户的滚动。

相对于用户的滚动位置来定位。

请列举几种隐藏元素的方法 ？

overflow:hidden;   溢出 隐藏

opacity: 0              透明度 隐藏

display: none        显示 全无

visibility:hidden     能见度 隐藏 

如何初始化css样式？为什么要初始化css样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。

margin和padding的区别是什么？

margin是指从自身边框到另一个容器边框之间的距离，即容器外距离，是隔开元素与元素的间距；

而padding是指自身边框到自身内部另一个容器边框之间的距离，即可容器内距离，是盒子边框与盒子内部元素的距离。

display：none；和visibility：hidden；的区别是什么？

display:none它不占据空间，对后面的元素布局没有任何影响，visibility:hidden会占据原本的空间，会影响后面元素的布局。

请描述一下渐进增强与优雅降级是什么？

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

 优雅降级：开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

width: auto 和 width: 100% 的区别？

width: 100%的大小不包括内边距、边框

width: auto包括内边距和边框

100%表示子元素的宽度和父元素的宽度相等，其中并不包括子元素内外边距以及边框的值，为子元素真正的宽度

auto表示子元素的 宽度+内边距+外边距+边框 才等于父元素的宽度

什么是FOUC？你如何来避免FOUC？

FOUC无样式内容闪烁（Flash Of Unstyled Content），是在IE下通过@import导入css文件引起的。

IE会首先加载整个HTML文档的DOM，然后再导入外部的css文件。

因此，在页面DOM加载完成到css导入完成之间，有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系。

解决方法：使用link标签将样式表放在文档head中

说一下你对 box-sizing 属性的了解?

box-sizing属性是css3中新增的属性，允许你以某种方式定义某些元素，以适应指定区域

box-sizing的值有content-box、border-box、inherit。

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框，此为默认值。

border-box：元素设定的宽度和高度决定了元素的边框盒。元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit：表示继承父元素的box-sizing属性。

弹性布局的布局原理是什么？什么场景下使用弹性布局？

它的原理是设置两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

弹性布局一般经常用在移动端中，在设置一些元素的排列时用弹性布局会比较简单

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

  • 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
  • 基本原理是通过Css3媒体查询检测不同的设备屏幕尺寸做处理。

rgba、十六进制颜色是什么？如何这两个表达白色、红色、黑色、蓝色、绿色？

16进制模式：用三到四位16进制数表示颜色

rgba模式：用0-255分别表示rgb三个通道的数值

rgba的前几位分别代表红/绿/蓝，最后一位a（alpha）一般用作不透明参数。范围是0到1，其他三位的范围是0-255。

通过一个以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。

1. #FFFFFF RGB(255,255,255) 即白色。 

2. #000000 RGB(0,0,0) 即黑色。 

3. #0000FF RGB（0,0,255）即蓝色。

4. #00FF00 RGB（0,255,0)即绿色。

5. #FF0000 RGB（255,0,0)即红色。

rgba()和opacity的透明效果有什么不同？

不同的是 opacity 作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。

伪类，伪元素有哪些？区别是什么?                                                

伪类是操作文档中已有的元素，而伪元素则是创建了一个不在文档树中的元素，并为其添加样式。

 1.伪类是通过在元素选择器上加入伪类改变元素状态。

  2.伪元素通过对元素的操作进行对元素的改变。

常用伪类有：

:active 选择正在被激活的元素（匹配指定状态）

:hover 选择被鼠标悬浮着的元素（匹配指定状态）

:link 选择未被访问的元素 （匹配指定状态）

:visited 选择已被访问的元素（匹配指定状态）

:disable 选择每个已禁止的元素

:checked 选择每个被选中的元素

:target 选择当前的锚点元素

常用伪元素

::first-letter 选择指定元素的第一个单词

::first-line 选择指定元素的第一行

::after 在指定元素的内容前面插入内容

::before 在指定元素的内容后面插入内容

::selection 选择指定元素中被用户选中的内容

css性能优化的方法，至少说出五种

1.异步加载CSS

2.文件压缩、

3.有选择地使用选择器

4.优化重排与重绘

5.减少使用昂贵的属性

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

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

相关文章

Docker 的基本概念和优势，在应用程序开发中的实际应用。

Docker 的基本概念和优势，在应用程序开发中的实际应用。

Docker是一个开源的容器化平台&#xff0c;让开发者能够轻松地打包、运输和运行应用程序。其基本概念包括&#xff1a; 镜像(Image)&#xff1a;一个镜像是一个只读的软件包&#xff0c;它包含了运行应用所需的所有代码、库文件、环境变量和配置文件等。 容器(Container)&…
阅读更多...
Nginx转发请求到后端服务报400 Bad Request

Nginx转发请求到后端服务报400 Bad Request

问题描述 系统部署好后&#xff0c;进行测试时发现有部分接口出错&#xff0c;项目采用Nginx作为后端代理服务器&#xff0c;有Nginx统一将请求转发到后端的网关服务&#xff0c;再由网关服务路由到具体的服务上&#xff0c;发布好后&#xff0c;大部分接口都是正常的&#xff…
阅读更多...
Linux 线程并发运行

Linux 线程并发运行

一、并发与并行 并行&#xff1a;两个线程在同一时刻同时执行&#xff0c;需要有两个处理器。 并发&#xff1a;两个线程在同一时刻交替执行&#xff0c;只有一个处理器。 并行是一种特殊的并发。 二、线程并发运行 代码如下&#xff1a; 代码分析&#xff1a; 主函数中第…
阅读更多...
第 111 场LeetCode 双周赛题解

第 111 场LeetCode 双周赛题解

A 统计和小于目标的下标对数目 数据量小&#xff0c;直接枚举数对 class Solution { public:int countPairs(vector<int> &nums, int target) {int n nums.size();int res 0;for (int i 0; i < n; i)for (int j 0; j < i; j)if (nums[i] nums[j] < tar…
阅读更多...
[Go版]算法通关村第十二关青铜——不简单的字符串转换问题

[Go版]算法通关村第十二关青铜——不简单的字符串转换问题

目录 题目&#xff1a;转换成小写字母思路分析&#xff1a;大写字母ASCII码 32 小写字母ASCII码Go代码Go代码-优化: 大写字母ASCII码 | 32 小写字母ASCII码 题目&#xff1a;字符串转换整数&#xff08;atoi&#xff09;思路分析&#xff1a;去除首部空格 明确正负 读取数…
阅读更多...
【Spring Boot】详解条件注解以及条件拓展注解@Conditional与@ConditionOnXxx

【Spring Boot】详解条件注解以及条件拓展注解@Conditional与@ConditionOnXxx

Spring Conditional Spring 4.0提供的注解。作用是给需要装载的Bean增加一个条件判断。只有满足条件才会装在到IoC容器中。而这个条件可以由自己去完成的&#xff0c;可以通过重写Condition接口重写matches()方法去实现自定义的逻辑。所以说这个注解增加了对Bean装载的灵活性。…
阅读更多...
STM32 CubeMX （第四步Freertos内存管理和CPU使用率）

STM32 CubeMX （第四步Freertos内存管理和CPU使用率）

STM32 CubeMX STM32 CubeMX &#xff08;第四步Freertos内存管理和CPU使用率&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fr…
阅读更多...
通过安全日志读取WFP防火墙放行日志

通过安全日志读取WFP防火墙放行日志

前言 之前的文档中&#xff0c;描写了如何对WFP防火墙进行操作以及如何在防火墙日志中读取被防火墙拦截网络通讯的日志。这边文档&#xff0c;着重描述如何读取操作系统中所有被放行的网络通信行为。 读取系统中放行的网络通信行为日志&#xff0c;在win10之后的操作系统上&am…
阅读更多...
高阶数据结构-图

高阶数据结构-图

高阶数据结构-图 图的表示 图由顶点和边构成&#xff0c;可分为有向图和无向图 邻接表法 图的表示方法有邻接表法和邻接矩阵法&#xff0c;以上图中的有向图为例&#xff0c;邻接表法可以表示为 A->[(B,5),(C,10)] B->[(D,100)] C->[(B,3)] D->[(E,7)] E->[…
阅读更多...
FPGA原理与结构——ROM IP的使用与测试

FPGA原理与结构——ROM IP的使用与测试

一、前言 本文介绍Block Memory Generator v8.4 IP核 实现ROM&#xff0c;在学习一个IP核的使用之前&#xff0c;首先需要对于IP核的具体参数和原理有一个基本的了解&#xff0c;具体可以参考&#xff1a; FPGA原理与结构——块RAM&#xff08;Block RAM,BRAM&#xff09;http…
阅读更多...
供应链安全和第三方风险管理：讨论如何应对供应链中的安全风险，以及评估和管理第三方合作伙伴可能带来的威胁

供应链安全和第三方风险管理：讨论如何应对供应链中的安全风险，以及评估和管理第三方合作伙伴可能带来的威胁

第一章&#xff1a;引言 在当今数字化时代&#xff0c;供应链的安全性越来越受到重视。企业的成功不仅仅依赖于产品和服务的质量&#xff0c;还取决于供应链中的安全性。然而&#xff0c;随着供应链越来越复杂&#xff0c;第三方合作伙伴的参与也带来了一系列安全风险。本文将…
阅读更多...
C#中的委托

C#中的委托

目录 概述&#xff1a; 举例&#xff1a;​ 总结: 概述&#xff1a; 中文的角度来说:指的是把事情托付给别人或别的机构(办理)&#xff0c;造个句子&#xff1a;别人委托的事情&#xff0c;我们一定要尽力而为&#xff0c;不遗余力的去办成。 在C#中&#xff0c;委托是一种…
阅读更多...
回归预测 | MATLAB实现GA-RBF遗传算法优化径向基函数神经网络多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现GA-RBF遗传算法优化径向基函数神经网络多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现GA-RBF遗传算法优化径向基函数神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GA-RBF遗传算法优化径向基函数神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果…
阅读更多...
CoordAtt注意力网络结构

CoordAtt注意力网络结构

源码&#xff1a; import torch import torch.nn as nn import math import torch.nn.functional as Fclass h_sigmoid(nn.Module):def __init__(self, inplaceTrue):super(h_sigmoid, self).__init__()self.relu nn.ReLU6(inplaceinplace)def forward(self, x):return self.…
阅读更多...
VSCode\PyCharm23.2+PyQGIS插件开发配置相关要点

VSCode\PyCharm23.2+PyQGIS插件开发配置相关要点

近期利用VSCode\PyCharmPyQGIS进行插件开发&#xff0c;现将要点总结一下&#xff1a; 一、VSCode&#xff0c;我没有配置成功&#xff0c;主要是最后一个阶段调试的时候老是不成功。以后会持续关注。但是有几个要点&#xff1a; 1、VSCodePyQIS开发&#xff0c;智能提示的设…
阅读更多...
Apache Doris 2.0.0 特性分析

Apache Doris 2.0.0 特性分析

1、存算分离 所谓存算分离是指查询外表时&#xff0c;使用一种专门做计算的BE节点&#xff0c;但对于存储在BE上的内部表&#xff0c;目前还不能做到存储分离。 doris可以查询外部表&#xff0c;包括&#xff1a; Hive、Iceberg、Hudi、Elasticsearch、JDBC、Paimon 早期版本中…
阅读更多...
jmeter模拟多用户并发

jmeter模拟多用户并发

一、100个真实的用户 1、一个账号模拟100虚拟用户同时登录和100账号同时登录 区别 &#xff08;1&#xff09;1个账号100个人用&#xff0c;同时登录&#xff1b; &#xff08;2&#xff09;100个人100个账号&#xff0c;同时登录。 相同 &#xff08;1&#xff09;两个都…
阅读更多...
机器学习之概率论

机器学习之概率论

最近&#xff0c;在了解机器学习相关的数学知识&#xff0c;包括线性代数和概率论的知识&#xff0c;今天&#xff0c;回顾了概率论的知识&#xff0c;贴上几张其他博客的关于概率论的图片&#xff0c;记录学习过程。
阅读更多...
SSH远程直连--------------Docker容器

SSH远程直连--------------Docker容器

文章目录 1. 下载docker镜像2. 安装ssh服务3. 本地局域网测试4. 安装cpolar5. 配置公网访问地址6. SSH公网远程连接测试7.固定连接公网地址8. SSH固定地址连接测试 在某些特殊需求下,我们想ssh直接远程连接docker 容器,下面我们介绍结合cpolar工具实现ssh远程直接连接docker容器…
阅读更多...
线性代数的学习和整理6：向量和矩阵详细，什么是矩阵？（草稿-----未完成）

线性代数的学习和整理6：向量和矩阵详细，什么是矩阵？（草稿-----未完成）

43 矩阵 4.1 矩阵 4 整理网上总结一些 关于直击线性代数本质的 观点 矩阵的本质是旋转和缩放 矩阵里的数字0矩阵里的数字1&#xff0c;表示不进行缩放矩阵里的数字2等&#xff0c;表示缩放矩阵里的数字-3 表示缩放-3倍&#xff0c;并且反向矩阵里的数字的位置矩阵拆分为列向量…
阅读更多...
最新文章

Copyright @ 2022~2023