前端基础面试题·第二篇——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

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

mysql的基础语句和外键查询及其语句详解(推荐)

《mysql的基础语句和外键查询及其语句详解(推荐)》:本文主要介绍mysql的基础语句和外键查询及其语句详解(推荐),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录一、mysql 基础语句1. 数据库操作 创建数据库2. 表操作 创建表3. CRUD 操作二、外键