前端基础面试题·第二篇——CSS(其二)

2024-09-06 20:44

本文主要是介绍前端基础面试题·第二篇——CSS(其二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.CSS选择器的优先性:

  1. !important - 强制生效样式 - 有即生效
  2. 行内样式 - 有即生效 权重: 1000
  3. id选择器 权重:100
  4. 类选择器,伪类,属性选择器 权重: 10
  5. 元素选择器,伪元素选择器,权重: 1
  6. 通配符,兄弟,后代,子代 ,权重: 0

2.CSS继承性

1.继承属性:
1 .字体系列属性
font, font-family, font-weight, font-size, font-style, font-variant等
2 .文本系列属性:
text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, direction等
3 .可见性属性:
visibility
4 .表格布局属性:
border-collapse, border-spacing, caption-side, empty-cells, table-layout等
5. 列表布局属性:
list-style, list-style-type, list-style-image, list-style-position等
6. 光标属性:
cursor
7. 页面样式属性:
page, page-break-inside, page-break-after, page-break-before等
8. 声音样式属性:
speak, speak-header, speak-numeral, speak-punctuation等

2.非继承属性:
1.display
2.文本属性:
vertical-align, white-space, text-decoration, text-shadow, unicode-bidi等
3.盒子模型的属性:
width, height, margin, border, padding, background等
4.背景和定位属性:
background, background-color, background-image, background-repeat, background-attachment, background-position等
5.轮廓属性:
outline, outline-color, outline-style, outline-width等
6.页面样式属性:
size, max-width, min-width等
7.生成内容属性:
content, counter-reset, counter-increment等

3.css影藏元素方式

  1. display: none
  2. visibility: hidden;
  3. opacity: 0;
  4. position: absolute;
  5. z-index: -100;
  6. transform: translate(-9999px, -9999px)
  7. clip-path:circle(0)

4.display: none 与visibility: hidden属性的区别

1.display: none,这个属性会在渲染树中去除元素,因此元素在渲染时不会占据任何空间,不可继承,修改回引发重排
2.visibility: hidden,这是个属性只会导致元素在页面上不可见,但其占据空间其实还在,只是内容不可见,可继承,修改会引发重绘

5.文本溢出隐藏

1. 单行文本溢出:

    white-space:nowrap; /* 文本禁止换行 */overflow: hidden; /* 文本溢出隐藏 */text-overflow: ellipsis; /* 文本溢出部分显示符号 */

2. 多行文本溢出:

    display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */-webkit-box-orient: vertical; /* 设置文字溢出排列方向 从上到下排列 */-webkit-line-clamp: 3; /* 设置行数 */overflow: hidden; /* 文本溢出隐藏 */

6.client, offset,scroll

1.client:
主要与可视区域有关,指元素内容及其边距所占空间大小

    element.clientWidth // 元素可视区域的宽度element.clientHeight // 元素可视区域的高度element.clientLeft // 元素左边框宽度element.clientTop // 元素顶部边框宽度// 鼠标移入事件e.clientX, e.clientY // 鼠标据可视区域左侧和顶部距离

2.offset:
主要与元素位置和大小有关,指元素边框外侧与视窗(viewport)的距离

    element.offsetWidth === content.width + padding + borderelement.offsetHeight === content.height + padding + borderelement.offsetLeft // 元素左边框外侧与视窗(距离最近的定位元素)的距离element.offsetTop // 元素顶部边框外侧与视窗(距离最近的定位元素)的距离

3.scroll:
主要与滚动位置有关,指元素内容超出其可视区域部分所占空间大小

    element.scrollWidth // 元素内容宽度element.scrollHeight // 元素内容高度element.scrollLeft // 元素内容左侧与视窗(距离最近的定位元素) 距离element.scrollTop // 元素内容顶部与视窗(距离最近的定位元素)的距离// 将元素的scrollTop设置为0可以实现滚动到顶部

三者都是返回数值,不带单位,同时均是只读属性,不可复制更改

7.CSS3新属性

1.新增选择器

  • p:nth-child(n)
    2.新增布局模式
  • 弹性布局: flex;
  • 网格布局: grid
    3.新增渐变效果
  • linear-gradient(direction, color-stop1, color-stop2, …);
  • radial-gradient(shape size at position, start-color, …, last-color);
    4.新增边框属性
  • border-radius: 10px; // 圆角
  • box-shadow: 10px 10px 5px #888888; // 阴影
  • border-image: url(border.png) 30 30 round; // 边框图片
    5.阴影属性
  • text-shadow: 5px 5px 5px #FF0000; // 文字阴影
  • box-shadow: 10px 10px 5px #888888; // 阴影
    6.新增背景属性
  • background-size: 100px 100px; // 背景图片大小
  • background-origin: padding-box | border-box | content-box; // 背景图片的定位区域
  • background-clip: padding-box | border-box | content-box; // 背景图片的绘制区域
    7.新增文本属性
  • word-wrap: break-word; // 文本换行
  • word-break: keep-all | break-all; // 文本换行
  • text-overflow: ellipsis; // 文本溢出
    8.转换属性
  • transform: rotate(30deg); // 旋转
  • transform: scale(2, 2); // 缩放
  • transform: skew(30deg, 30deg); // 倾斜
  • transform: translate(50px, 50px); // 平移
    9.过渡属性
  • transition: property duration timing-function delay; // 过渡效果
    10.动画属性
  • @keyframes 动画名称 { // 定义动画}
  • animation: 动画名称 动画时间 动画速度曲线 延迟时间 播放次数 是否反向播放 动画结束状态; // 调用动画
  • animation-name: 动画名称;
  • animation-duration: 动画时间;
  • animation-timing-function: 动画速度曲线;
  • animation-delay: 延迟时间;
  • animation-iteration-count: 播放次数;
  • animation-direction: 是否反向播放;
  • animation-paly-state: 动画结束状态;
  • animation-fill-mode: 动画填充模式
    11.新增用户界面属性
  • resize: both; // 是否允许用户调整元素大小
  • box-sizing: border-box; // 盒模型
  • outline: 2px solid red; // 轮廓
  • outline-offset: 10px; // 轮廓偏移
  • scroll-behavior: smooth; // 滚动行为
  • cursor: pointer; // 鼠标样式
  • user-select: none; // 用户选择
  • appearance: none; // 外观

12.多列布局

  • column-count: 3; // 列数
  • column-gap: 20px; // 列间距
  • column-rule: 2px solid red; // 列边框
  • column-width: 200px; // 列宽
  • column-rule-color: red; // 列边框颜色
  • column-rule-style: solid; // 列边框样式

13.媒体查询

  • @media 媒体类型 and (媒体特性) { // 定义媒体查询}
  • @media screen and (max-width: 768px) { // 移动端适配}
  • @media print { // 打印机适配}
  • @media screen and (min-width: 769px) { // 桌面端适配}
  • @media screen and (min-width: 769px) and (max-width: 1200px) { // 平板端适配}
  • @media screen and (min-width: 1201px) and (max-width: 1920px) { // 笔记本端适配}

8.弹性布局(flex)

1.定义
一种可以简便完整,响应式实现的灵活性布局解决方案
2.容器属性
父元素:

display: flex; // 定义为弹性布局
flex-direction: [row /* 横向-默认*/row-reverse /* 横向-反向 */column /* 纵向-默认 */column-reverse;/* 纵向-反向 */
]; // 定义主轴方向
flex-wrap: [nowrap /* 不换行-默认 */wrap /* 换行 */wrap-reverse /* 反向换行 */
] // 定义是否换行
flex-flow: row nowrap// 定义主轴方向和是否换行(是flex-direction与flex-wrap简写)justify-content: [flex-start /* 主轴起点对齐-默认 */flex-end /* 主轴终点对齐 */center /* 主轴居中对齐 */space-between /* 主轴两端对齐 */space-around /* 主轴两端对齐,项目之间的间隔相等 */
]
// 定义项目在主轴上的对齐方式align-items: [flex-start /* 交叉轴起点对齐-默认 */flex-end /* 交叉轴终点对齐 */center /* 交叉轴居中对齐 */baseline /* 项目的第一行文字的基线对齐 */stretch /* 交叉轴的起点和终点对齐,项目的高度平分父元素的高度 */] // 定义项目在交叉轴上的对齐方式align-content: [flex-start /* 交叉轴起点对齐-默认 */flex-end /* 交叉轴终点对齐 */center /* 交叉轴居中对齐 */space-between /* 交叉轴两端对齐 */space-around /* 交叉轴两端对齐,项目之间的间隔相等 */stretch /* 交叉轴的起点和终点对齐,项目的高度平分父元素的高度 */] // 定义多根轴线的对齐方式

子元素:

order: 1; // 定义项目的排列顺序,数值越小,排列越靠前,默认为0
flex-grow: 1; // 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink: 1; // 定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis: auto; // 定义在分配多余空间之前,项目占据的主轴空间(main size)
flex: none //前三者简写/* default: 0 1 auto */ align-self: [flex-start /* 交叉轴起点对齐-默认 */flex-end /* 交叉轴终点对齐 */   center /* 交叉轴居中对齐 */baseline /* 项目的第一行文字的基线对齐 */stretch /* 交叉轴的起点和终点对齐,项目的高度平分父元素的高度 */
]

9.网格布局(gird)

1.定义:
一种二维的布局方式,将容器划分成“行”和“列”,产生单元格,然后指定“项目所在”的单元格,可以看作的二维的flex布局。
2.基本属性

    display: grid; // 定义为网格布局grid-template-columns: 100px 100px 100px; // 定义三列,每列宽度为100px grid-template-rows: 100px 100px 100px; // 定义三行,每行高度为100px以上两个属性还可以使用fr作为单位,表示比例关系。grid-template-columns: 1fr 1fr 1fr; // 定义三列,每列宽度比例为1:1:1grid-template-rows: 1fr 1fr 1fr; // 定义三行,每行高度比例为1:1:1还可以使用repeat()函数简化重复的值。grid-template-columns: repeat(3, 33.33%); // 定义三列,每列宽度比例为33.33%:33.33%:33.33%grid-template-rows: repeat(3, 33.33%); // 定义三行,每行高度比例为33.33%:33.33%:33.33%grid-column: 1 / 3; // 指定项目的位置,从第一根水平线到第三根水平线grid-row: 1 / 3; // 指定项目的位置,从第一根垂直线到第三根垂直线grid-area: <row-start> / <column-start> / <row-end> / <column-end>; // 指定项目的位置,从某一行开始到某一行结束,从某一列开始到某一列结束grid-area: header; // 指定项目的位置,从某一行开始到某一行结束,从某一列开始到某一列结束grid-area: 1 / 1 / 3 / 3; // 指定项目的位置,从某一行开始到某一行结束,从某一列开始到某一列结束grid-auto-flow: row | column | row dense | column dense; // 指定项目的排列顺序。grid-gap: <grid-row-gap> <grid-column-gap>; // 指定网格线之间的间隔,一行一行地添加间隔。justify-items: start | end | center | stretch; // 设置单元格内容的水平位置(左中右),跟justify-content属性值一样。align-items: start | end | center | stretch; // 设置单元格内容的垂直位置(上中下),跟align-content属性值一样。justify-content: start | end | center | stretch | space-around | space-between | space-evenly; // 设置整个内容区域的水平位置(左中右),跟justify-items属性值一样。align-content: start | end | center | stretch | space-around | space-between | space-evenly; // 设置整个内容区域的垂直位置(上中下),跟align-items属性值一样。

10.垂直居中

1. 绝对定位 + 负margin.div {position: absolute;top: 50%;margin-top: -100px; /* 高度的一半 */left: 50%;margin-left: -100px; /* 宽度的一半 */}2. 绝对定位 + transform.div {position: absolute;top: 50%;left: 50%;transform: translateY(-50% -50%);}
3. flex布局.parent {display: flex;justify-content: center;align-items: center;}
4. grid布局.parent {display: grid;place-items: center;}
5. table-cell布局.parent {display: table-cell;vertical-align: middle;text-align: center;           }

11.使chrome浏览器支持小于12px的字体

由于谷歌浏览器内部默认最小字体为12px,小于12px的字体默认以12px显示,但可以设置为0;
解决方案:
1.zoom变焦

    body {font-size: 10px;zoom: 0.5; // 0.5倍}

2.使用transform缩放

    body {font-size: 10px;transform: scale(0.5);}

32.sass

1.定义:
一种CSS预处理器,可以方便地复用css代码。
2.特性

  • 嵌套:
    body{background-color: $baseColor;$color2: yellow;div{background-color:$color2;color: $color1;}div2{background-color:$color2;color: $color1;}}
  • 变量:
    $color: red;$width: 100px;div{background-color: $color;width: $width;}
  • 混合:
    @mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;}div {@include border-radius(10px);}
  • 继承:
    .button {border: none;padding: 10px 20px;cursor: pointer;}.button-primary {@extend .button;background-color: blue;color: white;}.button-secondary {@extend .button;background-color: gray;color: white;}
  • 导入:
    @import 'styles.css';
  • 条件判断:
    @if $type == danger {background-color: red;} @else if $type == warning {background-color: yellow;} @else {background-color: white;}
  • 循环:
    @for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }}

这篇关于前端基础面试题·第二篇——CSS(其二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1143075

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

荣耀嵌入式面试题及参考答案

在项目中是否有使用过实时操作系统? 在我参与的项目中,有使用过实时操作系统。实时操作系统(RTOS)在对时间要求严格的应用场景中具有重要作用。我曾参与的一个工业自动化控制项目就采用了实时操作系统。在这个项目中,需要对多个传感器的数据进行实时采集和处理,并根据采集到的数据及时控制执行机构的动作。实时操作系统能够提供确定性的响应时间,确保关键任务在规定的时间内完成。 使用实时操作系统的

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态,生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案,则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时,算法停止。 — Choose k successors randomly, biased towards good ones — Close