前端面试题--CSS系列(一)
CSS系列--持续更新中
- 1.CSS预处理器有哪些类型,有什么区别
- 2.盒模型是什么,有哪两种类型
- 3.css选择器有哪些,优先级是怎样的,哪些属性可以继承
- 4. 说说em/px/rem/vh/vw的区别
- 5.元素实现水平垂直居中的方法有哪些,如果元素不定宽高呢?
- 6.说说flex,以及适用的场景
1.CSS预处理器有哪些类型,有什么区别
CSS是一门标记性语言,不利于复用,很难写出易于阅读且易于维护的代码。
于是就出现了CSS预处理器,增加了变量,函数,混入等功能,让CSS更易于维护。
类型:
- sass:最早且最成熟的CSS预处理器,后缀名为.sass,scss.严格按照缩进形式省去大括号和分号。
- less:基于sass,书写格式更像css,易上手,易兼容,但编程功能不够。
- stylus:基于node.js社区,主要用于node项目进行预处理,stylus是新型语言,后缀名为.styl。
区别:
- 变量,less使用@开头,中间使用:隔开,sass使用$开头,中间使用:隔开,stylus开头前两种都可,但中间必须使用“=”隔开。
//less
@red: #c00;strong {color: @red;
}//sass
$red: #c00
strong{color: $red
}//stylus
red = #c00
strongcolor: red
- 作用域:sass在全局作用域,最好不要重名,less和stylus会先找局部作用域,没有的话会一层一层网上找。
- 嵌套:三者都一致,引用父级选择器使用&,但sass和stylus不使用大括号
- 混入:将一部分样式抽出,作为一个单独定义模块,可以供多个选择器复用sass申明需要@mixin,stylus可以不要符号,但默认要“=”。
- 模块化:将代码分成一个个模块。
2.盒模型是什么,有哪两种类型
盒模型:在对一个文档进行布局时,浏览器引擎会根据css的基础盒模型标准,将每一个元素变为一个矩形盒子,盒子由四部分组成:content,padding,border,margin。
- 标准盒模型:width+ height代表的是content
- IE盒模型: width + height代表的是content + padding + border
可以通过box-sizing来改变盒模型,content-box为标准盒模型,border-box为IE盒模型
3.css选择器有哪些,优先级是怎样的,哪些属性可以继承
CSS选择器:
- id选择器 (#myid)
- 类选择器 (.class)
- 标签选择器(div,p)
- 后代选择器(h1 p)
- 子选择器(ul > li)
- 兄弟选择器(li~a)
- 相邻兄弟选择器(li+a)
- 属性选择器(a[rel = “external”])
- 伪类选择器(a:hover)
- 伪元素选择器(::before, ::after)
- 通配符选择器(*)
优先级:
内联 > ID选择器 > 类选择器 > 标签选择器
(1)内联样式选择器x,0,0,0(行内样式)
(2)ID选择器0,x,0,0
(3)class选择器/属性选择器/伪类选择器 0,0,x,0
(4)元素和伪元素选择器0,0,0,x
继承属性:
在css中,继承是指的是给父元素设置一些属性,后代元素会自动拥有这些属性
关于继承属性,可以分成:
字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体 文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白
letter-spacing:增加或减少字符间的空白
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
元素可见性
visibility
表格布局属性
caption-side:定位表格标题位置
border-collapse:合并表格边框
border-spacing:设置相邻单元格的边框间的距离
empty-cells:单元格的边框的出现与消失
table-layout:表格的宽度由什么决定
列表属性
list-style-type:文字前面的小点点样式
list-style-position:小点点位置
list-style:以上的属性可通过这属性集合
引用
quotes:设置嵌套引用的引号类型
光标属性
cursor:箭头可以变成需要的形状
继承中比较特殊的几点:
a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的
无继承的属性
display
文本属性:vertical-align、text-decoration
盒子模型的属性:宽度、高度、内外边距、边框等
背景属性:背景图片、颜色、位置等
定位属性:浮动、清除浮动、定位position等
生成内容属性:content、counter-reset、counter-increment
轮廓样式属性:outline-style、outline-width、outline-color、outline
页面样式属性:size、page-break-before、page-break-after
4. 说说em/px/rem/vh/vw的区别
- px:像素,即显示在页面上的一个小点,每个像素都是大小相同的, px大小与其他元素无关。绝对长度单位,页面按照精确像素进行展示。
- em:相对长度单位。相当于当前对象的文本字体尺寸,默认字体尺寸1em = 16px,em值不固定,em会继承父节点的字体大小,使用级联方式计算尺寸。
- rem:相对长度单位,相对的是html根元素font-size的值。rem集相对大小与绝对大小优点于一身。
- vh,vw:vh表示窗口高度,vw表示窗口宽度,主要用于页面视图布局
5.元素实现水平垂直居中的方法有哪些,如果元素不定宽高呢?
- 使用绝对定位(absolute):让left、right、top、bottom都为0,然后让margin:auto即可实现水平垂直居中。
- 子绝父相:水平居中left:50%,margin-left:(盒子宽度一半),垂直居中:top:50%,margin-top:(盒子高度一半)‘
- flex布局:给父盒子一个弹性布局,并在父容器中写入justify-content:center,盒align-items:center表示水平居中盒垂直居中,即可。
6.说说flex,以及适用的场景
flexible为弹性布局,容器默认有两条轴,主轴与交叉轴,通过flex-direction来决定主轴方向。每根轴都有起点和终点。
使用场景:用于实现水平方向上的元素水平垂直居中,可使用于二栏、三栏自适应布局中。
相关文章:
前端面试题--CSS系列(一)
CSS系列--持续更新中 1.CSS预处理器有哪些类型,有什么区别2.盒模型是什么,有哪两种类型3.css选择器有哪些,优先级是怎样的,哪些属性可以继承4. 说说em/px/rem/vh/vw的区别5.元素实现水平垂直居中的方法有哪些,如果元素…...
VSCode好用插件
由于现在还是使用vue2,所以本文只记录vue2开发中好用的插件。 美化类插件不介绍了,那些貌似对生产力起不到什么大的帮助,纯粹的“唯心主义”罢了,但是如果你有兴趣的话可以查看上一篇博客:VSCode美化 1. vuter 简介&…...
Vue3:对ref、reactive的一个性能优化API
一、情景说明 我们知道,在Vue3中,想要创建响应式的变量,就要用到ref、reactive来包裹一下数据即可。 但是,这里有个损耗性能的地方 就是,被它包裹的数据,都会构建成响应式的,无论多少层次&…...
Python 用pygame简简单单实现一个打砖块
# -*- coding: utf-8 -*- # # # Copyright (C) 2024 , Inc. All Rights Reserved # # # Time : 2024/3/30 14:34 # Author : 赫凯 # Email : hekaiiii163.com # File : ballgame.py # Software: PyCharm import math import randomimport pygame import sys#…...
软考113-上午题-【计算机网络】-IPv6、无线网络、Windows命令
一、IPv6 IPv6 具有长达 128 位的地址空间,可以彻底解决 IPv4 地址不足的问题。由于 IPv4 地址是32 位二进制,所能表示的IP 地址个数为 2^32 4 294 967 29640 亿,因而在因特网上约有 40亿个P 地址。 由 32 位的IPv4 升级至 128 位的IPv6&am…...
深入浅出 -- 系统架构之负载均衡Nginx资源压缩
一、Nginx资源压缩 建立在动静分离的基础之上,如果一个静态资源的Size越小,那么自然传输速度会更快,同时也会更节省带宽,因此我们在部署项目时,也可以通过Nginx对于静态资源实现压缩传输,一方面可以节省带宽…...
基于jsp+Spring boot+mybatis的图书管理系统设计和实现
基于jspSpring bootmybatis的图书管理系统设计和实现 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获…...
Pytorch转onnx
pytorch 转 onnx 模型需要函数 torch.onnx.export。 def export(model: Union[torch.nn.Module, torch.jit.ScriptModule, torch.jit.ScriptFunction],args: Union[Tuple[Any, ...], torch.Tensor],f: Union[str, io.BytesIO],export_params: bool True,verbose: bool False…...
苍穹外卖——项目搭建
一、项目介绍以及环境搭建 1.苍穹外卖项目介绍 1.1项目介绍 本项目(苍穹外卖)是专门为餐饮企业(餐厅、饭店)定制的一款软件产品,包括 系统管理后台 和 小程序端应用 两部分。其中系统管理后台主要提供给餐饮企业内部员…...
云原生架构(微服务、容器云、DevOps、不可变基础设施、声明式API、Serverless、Service Mesh)
前言 读完本文,你将对云原生下的核心概念微服务、容器云、DevOps、Immutable Infrastructure、Declarative-API、Serverless、Service Mesh 等有一个相对详细的了解,帮助你快速掌握云原生的核心和要点。 因题主资源有限, 这里会选用部分云服务商的组件进…...
基于重写ribbon负载实现灰度发布
项目结构如下 代码如下: pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocat…...
无端科技一面(生死狙击项目组 战斗客户端 40min)
自我介绍 实习经历询问 项目询问 TCP和UDP的区别 什么情况会用到UDP 大小端 寻路算法了解多少 A*算法 场景题:扫雷如何随机分地雷,怎么安排数字显示 怎么判断一个物体在三角锥内 动作游戏中打击效果怎么处理穿模问题 八叉树了解过吗 骨骼动画…...
idea开发 java web 高校学籍管理系统bootstrap框架web结构java编程计算机网页
一、源码特点 java 高校学籍管理系统是一套完善的完整信息系统,结合java web开发和bootstrap UI框架完成本系统 ,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 前段主要技术 css jq…...
linux之文件系统、inode和动静态库制作和发布
一、背景 1.没有被打开的文件都在磁盘上 --- 磁盘级文件 2.对磁盘级别的文件,我们的侧重点 单个文件角度 -- 这个文件在哪里,有多大,其他属性是什么? 站在系统角度 -- 一共有多少文件?各自属性在哪里?…...
C++IO类,输入输出缓冲区,流状态
我们的程序已经使用了很多IO库设施: istream(输入流)类型,提供输入操作。ostream(输出流)类型,提供输出操作。cin,一个istream对象,从标准输入读取数据。写入到标准错误。cout,一个ostream对象,…...
机器学习笔记 - 文字转语音技术路线简述以及相关工具不完全清单
一、TTS技术简述 今天的文本到语音转换技术(TTS)的目标已经不仅仅是让机器说话,而是让它们听起来像不同年龄和性别的人类。通常,TTS 系统合成器的质量是从不同方面进行评估的,包括合成语音的清晰度、自然度和偏好,以及人类感知因素,例如可理解性。 1、技术路线 (1)基…...
阿里云4核8G服务器ECS通用算力型u1实例优惠价格
阿里云4核8G服务器优惠价格955元一年,配置为ECS通用算力型u1实例(ecs.u1-c1m2.xlarge)4核8G配置、1M到3M带宽可选、ESSD Entry系统盘20G到40G可选,CPU采用Intel(R) Xeon(R) Platinum处理器,阿里云活动链接 aliyunfuwuq…...
Jetson nano部署Yolov8 安装Archiconda3+创建pytorch环境(详细教程+错误解决)
由于jetson nano 是aarch64架构,Anaconda官方不支持aarch64架构,所以有了一个叫“Archiconda”,其目的就是将conda移植到aarch64平台上 一. 下载地址Releases Archiconda/build-tools GitHub 然后安装archiconda bash Archiconda3-0.2.3…...
Node.JS多线程PromisePool之promise-pool库实现
什么是Promise Pool Map-like, concurrent promise processing for Node.js. Promise-Pool是一个用于管理并发请求的JavaScript库,它可以限制同时进行的请求数量,以避免过多的请求导致服务器压力过大。使用Promise-Pool可以方便地实现对多个异步操作的并…...
【C++】红黑树讲解及实现
前言: AVL树与红黑树相似,都是一种平衡二叉搜索树,但是AVL树的平衡要求太严格,如果要对AVL树做一些结构修改的操作性能会非常低下,比如:插入时要维护其绝对平衡,旋转的次数比较多,更…...
security如何不拦截websocket
只要添加一个关键配置就行 //忽略websocket拦截Overridepublic void configure(WebSecurity webSecurity){webSecurity.ignoring().antMatchers("/**");} 全部代码我放着了 package com.oddfar.campus.framework.config;import com.oddfar.campus.framework.secur…...
Unity类银河恶魔城学习记录12-3 p125 Limit Inventory Slots源代码
Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Inventory.cs using Newtonsoft.Json.Linq; using System.Collections; us…...
【智能排班系统】雪花算法生成分布式ID
文章目录 雪花算法介绍起源与命名基本原理与结构优势与特点应用场景 代码实现代码结构自定义机器标识RandomWorkIdChooseLocalRedisWorkIdChooselua脚本 实体类SnowflakeIdInfoWorkCenterInfo 雪花算法类配置类雪花算法工具类 说明 雪花算法介绍 在复杂而庞大的分布式系统中&a…...
sass中的导入与部分导入
文章目录 sass中的导入与部分导入1. import:传统的导入方式2. use:现代化的模块化导入 sass中的导入与部分导入 在大型前端项目中,CSS代码量往往十分庞大,为了保持其可读性、可维护性以及便于团队协作,模块化开发成为…...
工业组态 物联网组态 组态编辑器 web组态 组态插件 编辑器
体验地址:by组态[web组态插件] BY组态是一款非常优秀的纯前端的【web组态插件工具】,可无缝嵌入到vue项目,react项目等,由于是原生js开发,对于前端的集成没有框架的限制。同时由于BY组态只是一个插件,不能独…...
git可视化工具
Gitkraken GitKraken 是一款专门用于管理和协作Git仓库的图形化界面工具。它拥有友好直观的界面,使得Git的操作变得更加简单易用,尤其适合那些不熟悉Git命令行的开发者。GitKraken提供了丰富的功能,如代码审查、分支管理、仓库克隆、提交、推…...
基于单片机电子密码锁系统设计
**单片机设计介绍,基于单片机电子密码锁系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机电子密码锁系统设计概要主要包括以下几个方面: 一、系统概述 基于单片机电子密码锁系统是一个…...
点云从入门到精通技术详解100篇-基于点云与图像纹理的 道路识别(续)
目录 3.1.2 图像滤波去噪 3.2 道路纹理特征提取 3.3 基于超像素分割的图像特征表达...
《机器学习在量化投资中的应用研究》目录
机器学习在量化投资中的应用研究 获取链接:机器学习在量化投资中的应用研究_汤凌冰著_北京:电子工业出版社 更多技术书籍:技术书籍分享,前端、后端、大数据、AI、人工智能... 内容简介 《机器学习在量化投资中的应用研究…...
Spring拓展点之SmartLifecycle如何感知容器启动和关闭
Spring为我们提供了拓展点感知容器的启动与关闭,从而使我们可以在容器启动或者关闭之时进行定制的操作。Spring提供了Lifecycle上层接口,这个接口只有两个方法start和stop两个方法,但是这个接口并不是直接提供给开发者做拓展点,而…...
苏州建材装修网站建设/宁波关键词排名优化
在PHP中,数组函数 array_replace () 使用传递的数组替换第一个数组的元素。 函数语法: array_replace ( array $array1 [, array $array2, array $array3,... ] ) : array 函数参数说明: 参数描述array1必需。指定一个数组。array2可选。指…...
wordpress 刷评论数量/网络推广公司收费标准
http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html转载于:https://www.cnblogs.com/cjy1993/p/3927140.html...
博罗网站建设哪家好/惠州seo计费
在android studio的Terminal中输入命令: git config –global user.name “xxx” 即可修改git commit的作者名字...
网站建设襄阳/网站怎么才能被百度收录
本篇博文来自博主Imageshop,打赏或想要查阅更多内容可以移步至Imageshop。 转载自:https://www.cnblogs.com/Imageshop/p/4709710.html 侵删 在几年前写的一篇关于BEEP的文章时,我曾经说过Beep的去噪作用可以用于磨皮,并且给出…...
工装设计效果图网站/百度搜图片功能
Current Run...
广东深圳疫情风险等级/优化营商环境指什么
一次应用提供的服务化接口收到报警大量超时,报404.赶忙着手处理: 1)查看监控报表的cpu load ,jvm gc情况,jvm内存,io都正常,如果没有做监控可以手工到服务器上命令查看 2)检查网络包括http响应及tcp网络响应请求情况均正常 3)登陆服务器…...