CSS的常见难见

1. display:none 与 visibility:hidden 的区别:

        display:none 是不占用空间的,而visbility:hidden是占用空间的。

2.行元素,块元素,行内元素:

         通常:如果要转为这些元素:要使用display:block/inline-block/inline

         区别:

      1. 块元素(Block Elements)

  •  定义:块元素是指在页面中占据一整行的元素。
  • 特征
    • 常见的块元素包括 <div><p><h1> 到 <h6><ul><ol><li> 等。
    • 可以设置宽度和高度。
    • 默认情况下,块元素会在新的一行开始,并且后面的元素会在新的一行显示。

        

        2. 行内元素(Inline Elements)

  • 定义:行内元素是指在页面中不占据整行的元素。
  • 特征
    • 默认情况下,行内元素不会导致换行,它们会在同一行中与其他行内元素并排显示。
    • 不能设置宽度和高度(其宽度和高度由内容决定)。
    • 常见的行内元素包括 <span><a><strong><em><img> 等。

        3. 行内块元素(Inline-Block Elements)

  • 定义:行内块元素结合了行内元素和块元素的特性。
  • 特征
    • 行内块元素可以在同一行中并排显示,但可以设置宽度和高度。
    • 允许上下边距(margin)和内边距(padding)影响布局。
    • 常见的行内块元素包括使用 display: inline-block; 的元素。

3. 选择器的优先级(Specificity)

        什么是 CSS 选择器的优先级? 选择器的优先级是指在多个选择器匹配同一元素时,决定哪个样式生效的规则。优先级越高的选择器,其样式越优先应用。 

  • 如何计算选择器的优先级? 优先级的计算规则如下:

    计算时,将每种选择器的得分加总,得分高的选择器优先级高。

    1. 内联样式(如 style 属性)优先级最高,得分为 1000。
    2. ID 选择器,得分为 100。
    3. 类选择器、伪类和属性选择器,得分为 10。
    4. 元素选择器和伪元素,得分为 1。
  • 在以下情况下,哪个样式会生效?解释原因:

    .class1 { color: red; }
    #id1 { color: blue; }
    div { color: green; }

    答:#id1 的样式会生效,因为它的优先级最高(得分为 100),而 .class1 的得分为 10,div 的得分为 1。

4. 盒模型(Box Model)

  • 什么是 CSS 盒模型? CSS 盒模型是指浏览器将每个元素视为一个矩形盒子,并通过内容区、内边距、边框和外边距来定义元素的大小和位置。

  • 如何使用 box-sizing 属性? box-sizing 属性用于控制盒模型的计算方式。常用的值有:

    • content-box(默认值):宽度和高度只包括内容区域。
    • border-box:宽度和高度包括内容、内边距和边框。
  • 解释标准盒模型和替代盒模型的区别。

    • 标准盒模型(content-box):元素的宽度和高度只包括内容,不包括内边距和边框。
    • 替代盒模型(border-box):元素的宽度和高度包括内容、内边距和边框,便于更容易控制元素的实际大小。

5. 布局(Flexbox 和 Grid)

  • Flexbox 和 Grid 的主要区别是什么?

    • Flexbox 是一维布局(可以是水平或垂直),适合处理单行或单列的布局。
    • Grid 是二维布局,适合处理复杂的行和列布局。
  • 你如何使用 Flexbox 创建一个水平居中的元素? 可以使用以下 CSS:

    .container {display: flex;justify-content: center; /* 水平居中 */
    }
  • 描述 Grid 布局的基本概念,并给出一个简单的示例。 Grid 布局通过定义行和列的网格来布局元素。基本概念包括 grid-template-rows 和 grid-template-columns

.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
}

6. 响应式设计

  • 什么是响应式设计? 响应式设计是一种网页设计方法,旨在使网页在不同设备(如手机、平板、桌面)上都有良好的显示效果和用户体验。

  • 如何使用媒体查询实现响应式布局? 媒体查询通过指定条件(如屏幕宽度)来应用不同的 CSS 样式。例如:

    @media (max-width: 600px) {.container {flex-direction: column; /* 小屏幕时垂直布局 */}
    }

  • 解释视口(viewport)在响应式设计中的重要性。 视口是浏览器中显示网页内容的区域。在响应式设计中,使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 可以确保页面在不同设备上按比例缩放和适配。

7. 过渡和动画

  • CSS 过渡和动画有什么区别?

    • CSS 过渡是指在样式变化时的平滑过渡效果,通常用于简单的状态变化。
    • CSS 动画则是通过关键帧定义的,可以实现更复杂的动画效果。
  • 如何创建一个简单的 CSS 动画? 使用 @keyframes 定义动画,然后在元素上应用。例如:

    @keyframes example {from { background-color: red; }to { background-color: yellow; }
    }
    .animated {animation: example 2s infinite; /* 2秒无限循环 */
    }

  • 解释 transition 和 animation 属性的使用。

    • transition 属性用于定义过渡效果的持续时间、延迟和速度曲线,例如:
      .box {transition: background-color 0.5s ease;
      }
    • animation 属性用于定义动画的名称、持续时间、次数等,例如:

8. 伪类和伪元素

  • 什么是伪类和伪元素?给出示例。

    • 伪类用于选择元素的特定状态,如 :hover:focus
    • 伪元素用于选择元素的一部分,如 ::before::after。 示例:

                

a:hover {color: blue; /* 伪类 */
}
p::before {content: "前缀"; /* 伪元素 */
}
  • :nth-child() 选择器是如何工作的? :nth-child(n) 选择器用于选择父元素下的第 n 个子元素,可以使用数字、关键词(如 odd/even)或公式(如 2n)来选择特定的元素。

  • 你如何使用 ::before 和 ::after 创建内容? 使用 content 属性可以在元素前后插入内容。例如:

    .element::before {content: "开始 - ";
    }
    .element::after {content: " - 结束";
    }

9. 清除浮动

  • 为什么需要清除浮动?

  •  当使用浮动布局时,父元素的高度可能会被子元素的浮动影响,导致父元素高度为 0。清除浮动可以确保父元素正确包裹浮动的子元素。

  • 你如何清除浮动?请提供几种方法。

    • 使用 overflow: auto; 或 overflow: hidden; 属性。
    • 使用 clearfix 方法:
      .clearfix::after {content: "";display: table;clear: both;
      }

    • 在浮动元素后插入一个清除浮动的元素:
      <div style="clear: both;"></div>

10. 性能和最佳实践

  • 如何优化 CSS 文件的加载性能?

    • 合并多个 CSS 文件为一个文件,减少 HTTP 请求。
    • 使用 CSS 预处理器(如 SASS、LESS)来组织代码。
    • 使用压缩工具(如 CSSNano)来减小文件大小。
    • 在 <head> 中加载 CSS 文件,确保样式在渲染之前加载。
  • 你如何组织 CSS 代码以提高可维护性?

    • 使用命名约定(如 BEM)来命名类。
    • 将样式模块化,按功能或组件划分文件。
    • 使用注释和文档来解释复杂的样式。
    • 采用 CSS 预处理器来提高代码的可读性和可维护性。

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

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

相关文章

秋招复习笔记——八股文部分:网络TCP

TCP 三次握手和四次挥手 TCP 基本认识 序列号&#xff1a;在建立连接时由计算机生成的随机数作为其初始值&#xff0c;通过 SYN 包传给接收端主机&#xff0c;每发送一次数据&#xff0c;就「累加」一次该「数据字节数」的大小。用来解决网络包乱序问题。 确认应答号&#xf…

数据隐私保护与区块链技术的结合:新兴趋势分析

在当今数字化时代&#xff0c;数据隐私保护成为了一个备受关注的重要话题。随着个人数据的不断生成和流通&#xff0c;如何有效保护用户的隐私成为了技术创新的一个重要方向。区块链技术作为一种去中心化、安全性高且可追溯的技术手段&#xff0c;正在逐渐成为解决数据隐私保护…

aiohttp 的使用

基本介绍 aiohttp 是一个基于 asyncio 的异步 HTTP 网络模块&#xff0c; 它即提供了服务端&#xff0c; 又提供了客户端。其中&#xff0c;我们用服务端可以搭建一个支持异步处理的服务器&#xff0c;这个服务器就是用来处理请求并返回响应的&#xff0c;类似于 Django , Fla…

Ansible的脚本-----playbook剧本【下】

目录 实战演练六&#xff1a;tags 模块 实战演练七&#xff1a;Templates 模块 实战演练六&#xff1a;tags 模块 可以在一个playbook中为某个或某些任务定义“标签”&#xff0c;在执行此playbook时通过ansible-playbook命令使用--tags选项能实现仅运行指定的tasks。 playboo…

一个注解解决重复提交问题

一、前言 ​ 在应用系统中提交是一个极为常见的功能&#xff0c;倘若不加管控&#xff0c;极易由于用户的误操作或网络延迟致使同一请求被发送多次&#xff0c;从而生成重复的数据记录。针对用户的误操作&#xff0c;前端通常会实现按钮的 loading 状态&#xff0c;以阻…

docker-compose 管理镜像

二进制dockers-compose docker-compose demo version: 3.9services:nginx:image: nginx:latestcontainer_name: nginx_containerports:- "82:80" # 映射宿主机的80端口到容器的80端口volumes:- /docker/compose-1/nginx/conf/nginx.conf:/etc/nginx/nginx.conf # 自…

行业不同怎么选企业管理咨询公司

在选择企业管理咨询公司时&#xff0c;不同行业的企业往往面临着各自独特的挑战和需求。因此&#xff0c;选择一家适合自身行业特点、能够提供专业且有针对性的咨询服务的管理咨询公司至关重要。本文将从行业差异的角度出发&#xff0c;探讨如何根据企业所在行业的不同&#xf…

SQL-REGEX-常见正则表达式的使用

SQL-REGEX-常见正则表达式的使用 在SQL中&#xff0c;正则表达式&#xff08;Regex&#xff09;的使用可以帮助进行更灵活和精确的模式匹配和数据筛选。不同的数据库管理系统对于正则表达式的支持略有差异&#xff0c;但大体都是相似的。 Tips&#xff1a; 模式描述匹配内容…

【python】PyQt5中QCommandLinkButton的详细教程与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

android SpannableStringBuilder span 设置点击事件

在 Android 开发中&#xff0c;你可以使用 SpannableStringBuilder 来创建可点击的文本。以下是一个使用 SpannableStringBuilder 和 ClickableSpan 设置点击事件的完整代码示例&#xff1a; 示例代码 1. 在布局文件中添加一个 TextView 首先&#xff0c;在你的布局文件&…

【Linux】socket 套接字 / 序列化与反序列化

目录 一. TCP 网络程序简易计算器1. 核心功能2. 程序结构3. 服务器初始化4. 服务器启动5. 业务处理6. 客户端初始化7. 客户端启动 二. 序列化与反序列化1. 协议2. 序列化与反序列化 一. TCP 网络程序 简易计算器 1. 核心功能 客户端向服务器发送数据, 服务器进行计算并返回结…

墨烯的C语言技术栈-C语言基础-018

char c; //1byte字节 8bit比特位 int main() { int a 10; //向内存申请四个字节,存储10 &a; //取地址操作符 return 0; } 每个字节都有地址 而a的地址就是它第一个字节的地址 要先开始调试才可以查看监控和查看内存 左边是地址 中间是内存中的数据 最后面的是…

Jenkins - apt 安装软件包 404 Not Found

Jenkins - apt 安装软件包 404 Not Found 引言关于 apt解决 apt 安装软件包 404 问题问题分析解决方案 引言 日常 Jenkins job 运行&#xff0c;有段时间会遇到 apt 安装软件包 404 的情况&#xff0c;这种情况不是每次都发生的&#xff0c;但是会导致 Jenkins 失败&#xff0…

MySQL 备忘清单

本备忘单旨在快速理解 MySQL 所涉及的主要概念&#xff0c;提供了最常用的SQL语句&#xff0c;供您参考。 来源&#xff1a;https://dev.bi/docs/mysql.html 入门 介绍 MySQL 为关系型数据库(Relational Database Management System)&#xff0c;一个关系型数据库由一个或数…

【HTML — 构建网络】HTML 入门

在本文中,我们将介绍 HTML 的绝对基础知识。为了帮助您入门,本文定义了元素、属性以及您可能听说过的所有其他重要术语。它还解释了这些在 HTML 中的位置。您将学习 HTML 元素的结构、典型的 HTML 页面的结构以及其他重要的基本语言功能。在此过程中,也将有机会玩转 HTML! …

上传项目到GitHub

上传项目到GitHub 前期工作&#xff1a;创建GitHub仓库 1.使用git命令初始化文件夹 git init2.将文件夹里面所有的文件添加到本地仓库&#xff0c;如果想添加单个文件&#xff0c;将.换成文件名就好。 git add .3.给文件备注&#xff0c;双引号里面是文件备注的内容 git c…

大揭秘:百度云提供支持的智能审核机制是什么?

在论坛、社媒等公共空间里&#xff0c;用户不仅能自主上传信息&#xff0c;还可以通过评论、群聊等方式进行互动。 如果不对信息进行审核&#xff0c;平台可能会涌现大量包含暴力、仇恨、淫秽或其他不当内容的帖子。用人工方式一条条审核信息&#xff0c;不仅成本高、效率低、…

C 观察者模式 Demo

目录 一、基础描述 二、Demo 最近需要接触到 MySQL 半同步插件&#xff0c;发现其中用到了观察者模式&#xff0c;之前没在 C 中用过&#xff0c;遂好奇心驱使下找了找资料&#xff0c;并写了个 Demo。 一、基础描述 观察者设计模式&#xff08;Observer Pattern&#xff0…

vue2文章添加多个标签思路代码及效果展示

效果展示 思路 data数据结构 第一个数组&#xff0c;用来存放标签库&#xff0c;供创建文章时选择 第二个数组&#xff0c;用来存放从标签库选中后的标签&#xff0c; 且选中后需在可选的标签库里删除&#xff0c;否则出现同一个标签被多次添加 js代码 点击输入框&#xf…

智能APK动态防护系统:自动重命名与签名,实现安全分发

本智能APK动态防护系统通过集成先进的自动化处理技术&#xff0c;实现了对APK文件的深度定制化与安全性强化。系统核心功能包括自动反编译APK、随机生成包名与签名、代码混淆等&#xff0c;最终回编译生成独一无二的APK安装包。这一过程每5分钟&#xff08;时间间隔可自定义&am…