分别对应四种伪类:link、:visited、:hover、:active;
当链接未访问过时:
- 当鼠标滑过 a 链接时,满足 :link 和 :hover 两种状态,要改变a标签的颜色,就必须将 :hover 伪类在 :link 伪类后面声明;
- 当鼠标点击激活a链接时,同时满足 :link、:hover、:active 三种状态,要显示a标签激活时的样式(:active),必须将 :active 声明放到 :link 和 :hover 之后。因此得出LVHA这个顺序。
当链接访问过时,情况基本同上,只不过需要将 :link 换成 :visited。
这个顺序能不能变?可以,但也只有 :link 和 :visited 可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。
8. CSS3 新增伪类有那些?
- elem:nth-child(n) 选中父元素下的第n个子元素,并且这个子元素的标签名为elem,n可以接受具体的数值,也可以接受函数。
- elem:nth-last-child(n) 作用同上,不过是从后开始查找。
- elem:last-child 选中最后一个子元素。
- elem:only-child 如果elem是父元素下唯一的子元素,则选中之。
- elem:nth-of-type(n) 选中父元素下第n个elem类型元素,n可以接受具体的数值,也可以接受函数。
- elem:first-of-type 选中父元素下第一个elem类型元素。
- elem:last-of-type 选中父元素下最后一个elem类型元素。
- elem:only-of-type 如果父元素下的子元素只有一个elem类型元素,则选中该元素。
- elem:empty 选中不包含子元素和内容的elem类型元素。
- elem:target 选择当前活动的elem元素。
- :not(elem) 选择非elem元素的每个元素。
- :enabled 控制表单控件的禁用状态。
- :disabled 控制表单控件的禁用状态。
- :checked 单选框或复选框被选中。
9. 如何居中 div?
- **水平居中:**给 div 设置一个宽度,然后添加 margin:0 auto 属性
div {
width: 200px;
margin: 0 auto;
}
- **水平居中:**利用 text-align:center 实现
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
- 让绝对定位的 div 居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /方便看效果/
}
- 水平垂直居中一
/确定容器的宽高宽500高300的层设置层的外边距/
div{
position: absolute;/绝对定位/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px00-250px;/外边距为自身宽高的一半/
background-color: pink;/方便看效果/
}
- 水平垂直居中二
/未知容器的宽高,利用transform
属性/
div {
position: absolute; /相对定位或绝对定位均可/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /方便看效果/
}
- 水平垂直居中三
/利用flex布局实际使用时应考虑兼容性/
.container {
display: flex;
align-items: center; /垂直居中/
justify-content: center; /水平居中/
}
.containerdiv {
width: 100px;
height: 100px;
background-color: pink; /方便看效果/
}
- 水平垂直居中四
/利用text-align:center和vertical-align:middle属性/
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container::after {
content: ‘’;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
white-space: normal;
vertical-align: middle;
}
10. display 有哪些值?说明他们的作用。
- block 块类型,默认宽度为父元素宽度,可设置宽高,换行显示。
- none 元素不显示,并从文档流中移除。
- inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。
- inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。
- list-item 像块类型元素一样显示,并添加样式列表标记。
- table 此元素会作为块级表格来显示。
- inherit 规定应该从父元素继承display属性的值。
11. position 的值 relative 和 absolute 定位原点是?
相关知识点:
- absolute
生成绝对定位的元素,相对于值不为static的第一个父元素的padding box进行定位,也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。 - fixed(老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。 - relative
生成相对定位的元素,相对于其元素本身所在正常位置进行定位。 - static
默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right,z-index声明)。 - inherit
规定从父元素继承position属性的值。
12. CSS3 有哪些新特性?(根据项目回答)
- 新增各种CSS选择器 (:not(.input):所有class不是“input”的节点)
- 圆角 (border-radius:8px)
- 多列布局 (multi-column layout)
- 阴影和反射 (Shadow\Reflect)
- 文字特效 (text-shadow)
- 文字渲染 (Text-decoration)
- 线性渐变 (gradient)
- 旋转 (transform)
- 缩放,定位,倾斜,动画,多背景
13. 请解释一下 CSS3 的 Flex box(弹性盒布局模型),以及适用场景?
相关知识点:
Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),项目默认沿主轴排列。
以下6个属性设置在容器上:
- flex-direction属性决定主轴的方向(即项目的排列方向)。
- flex-wrap属性定义,如果一条轴线排不下,如何换行。
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
- justify-content属性定义了项目在主轴上的对齐方式。
- align-items属性定义项目在交叉轴上如何对齐。
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
以下6个属性设置在项目上:
- order属性 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
- flex-grow属性 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
- flex-shrink属性 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- flex-basis属性 定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
- flex属性 是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。
- align-self属性 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items 属性,如果没有父元素,则等同于stretch。
14. 用纯 CSS 创建一个三角形的原理是什么?
采用的是相邻边框连接处的均分原理。将元素的宽高设为0,只设置 border,把任意三条边隐藏掉(颜色设为transparent),剩下的就是一个三角形。
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
篇幅有限,只有题目和部分答案,需要资料可以加入裙【953352883】领取100道CSS面试题,JavaScript基础面试题文档(包含题目和答案)
- 一个满屏品字布局如何设计?
- CSS 多列等高如何实现?
- 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用 hack 的技巧?
- li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
- 为什么要初始化 CSS 样式?
- 什么是包含块,对于包含块的理解?
- CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的?在不同浏览器下以后什么区别?
- width:auto 和 width:100%的区别
- 绝对定位元素与非绝对定位元素的百分比计算的区别
- 简单介绍使用图片 base64 编码的优点和缺点。
- ‘dsplay’、'position’和’float’的相互关系?
- margin 重叠问题的理解。
- 对 BFC 规范(块级格式化上下文:block formatting context)的理解?
- IFC 是什么?
- 请解释一下为什么需要清除浮动?清除浮动的方式
- 使用 clear 属性清除浮动的原理?
- zoom:1 的清除浮动原理?
- 移动端的布局用过媒体查询吗?
- 使用 CSS 预处理器吗?喜欢哪个?
- CSS 优化、提高性能的方法有哪些?
- 浏览器是怎样解析 CSS 选择器的?
- 在网页中应该使用奇数还是偶数的字体?为什么呢?
- margin 和 padding 分别适合什么场景使用?
- 抽离样式模块怎么写,说出思路,有无实践经验?
- 简单说一下 css3 的 all 属性。
- 为什么不建议使用统配符初始化 css 样式。
- absolute 的 containingblock(包含块)计算方式跟正常流有什么不同?
- 对于 hasLayout 的理解?
- 元素竖向的百分比设定是相对于容器的高度吗?
- 全屏滚动的原理是什么?用到了 CSS 的哪些属性?
- 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
- 视差滚动效果,如何给每页做不同的动画?
- 如何修改 chrome 记住密码后自动填充表单的黄色背景?
- 怎么让 Chrome 支持小于 12px 的文字?
- 让页面里的字体变清晰,变细用 CSS 怎么做?
- font-style 属性中 italic 和 oblique 的区别?
- 设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别?
- layout viewport、visual viewport 和 ideal viewport 的区别?
- position:fixed; 在 android 下无效怎么处理?
- 如果需要手动写动画,你认为最小时间间隔是多久,为什么?
- 如何让去除 inline-block 元素间间距?
- 有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度。
- png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
- 浏览器如何判断是否支持 webp 格式图片
- 什么是 Cookie 隔离?
- style 标签写在 body 后与 body 前有什么区别?
- 什么是 CSS 预处理器/后处理器?
- 阐述一下 CSSSprites
- 使用 rem 布局的优缺点?
- 画一条 0.5px 的线
- transition 和 animation 的区别
- 什么是首选最小宽度?
- 为什么 height:100%会无效?
- min-width/max-width 和 min-height/max-height 属性间的覆盖规则?
- 内联盒模型基本概念
- 什么是替换元素?
- 替换元素的计算规则?
- content 与替换元素的关系?
- margin:auto 的填充规则?
- margin 无效的情形
- border 的特殊性?
- 什么是基线和 x-height?
- line-height 的特殊性?
- vertical-align 的特殊性?
- overflow 的特殊性?
- 无依赖绝对定位是什么?
- absolute 与 overflow 的关系?
- clip 裁剪是什么?
- relative 的特殊性?
- 什么是层叠上下文?
- 什么是层叠水平?
- 元素的层叠顺序?
- 层叠准则?
- font-weight 的特殊性?
- text-indent 的特殊性?
- letter-spacing 与字符间距?
- word-spacing 与单词间距?
- white-space 与换行和空格的控制?
- 隐藏元素的 background-image 到底加不加载?
- 如何实现单行/多行文本溢出的省略(…)?
- 常见的元素隐藏方式?
- css 实现上下固定中间自适应布局?
- css 两栏布局的实现?
- css 三栏布局的实现?
- 实现一个宽高自适应的正方形
- 实现一个三角形
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
17830)]
[外链图片转存中…(img-8DlJyvLT-1714808717831)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!