0

0

CSS常见面试题

coldplay.xixi

coldplay.xixi

发布时间:2020-08-03 15:22:50

|

2712人浏览过

|

来源于CSDN

转载

CSS常见面试题

CSS引入
一、行内式,二、内部样式表,三、外部样式表

网人b2b电子商务门户系统
网人b2b电子商务门户系统

经过对v6.0为期一个月的调整,WRMPS v6.1 正式和大家见面,此版本在原6.0的基础上除修正旧版本所有问题外,还增加了很多人性化的功 能。 特别是在推广易功能上,做了很大提升,其包含的品牌店铺、竞价广告等服务内容将极大的提高站长的收益,而且快捷方便的服务购买支付 流程,将非常有效的推动客户在您的网站上进行消费。

下载

link @import
a. link属于HTML标签,而@import是CSS提供的,且只能加载 CSS

b. 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载

c. import只在IE5以上才能识别,而link是HTML标签,无兼容问题

立即学习前端免费学习笔记(深入)”;

d. link方式的样式的权重 高于@import的权重

e. 当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制

CSS基础选择器:
1.标签选择器 element
2.类选择器(多类名选择器).
3.id选择器四 #
4.通配符选择器 *

专题推荐:2020年CSS面试题汇总(最新)

CSS复合选择器:
后代选择器  E>F
子元素选择器
交集选择器
并集选择器 ,
链接伪类选择器 lvha
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素

    111

    222
  • 1
  • 2
  • 3

li:nth-of-type(2):表示ul下的第二个li元素
li:nth-child(2):表示既是li元素又是在ul下的第二个元素(找不到)。
建议一般使用nth-of-type,不容易出问题。
css三大特性:CSS层叠性、CSS继承性、CSS优先级
谈谈你对CSS布局的理解

盒子模型

清楚浮动的方式:
一、额外标签法,

二、父级添加overflow属性方法
三、使用after伪元素清除浮动

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

四、使用双伪元素清除浮动

定位模式与边偏移:

元素的显示与隐藏:
display:none;
overflow:hidden

鼠标样式cursor
default小白  默认,pointer小手,move移动,text文本,not-allowed禁止
vertical-align 垂直对齐

溢出的文字省略号显示
1.white-space:nowrap强制文本在一行上显示
2.overflow: hidden超出部分隐藏
3.text-overflow:ellipsis当对象内文本溢出时显示省略标记

常见的布局方式:
固定布局、
流式(%)布局、
弹性(flex)布局、
rem布局
浮动布局、清除浮动
定位布局、
margin和padding

块级元素垂直居中
如何让一个p 上下左右居中
1.
left:50%;   top:50%
transform: translate(-50%,-50%)
2.
left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto
3.px
CSS三大特性:层叠 继承 优先级
可以继承的属性
文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color

列表相关:list-style-image,list-style-position,list-style-type, list-style

CSS3新特性
实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)

增加了更多的CSS选择器 多背景 rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局

CSS引入
一、行内式,二、内部样式表,三、外部样式表

link @import
a. link属于HTML标签,而@import是CSS提供的,且只能加载 CSS

b. 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载

c. import只在IE5以上才能识别,而link是HTML标签,无兼容问题

立即学习前端免费学习笔记(深入)”;

d. link方式的样式的权重 高于@import的权重

e. 当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制

CSS基础选择器:
1.标签选择器 element
2.类选择器(多类名选择器).
3.id选择器四 #
4.通配符选择器 *

CSS复合选择器:
后代选择器  E>F
子元素选择器
交集选择器
并集选择器 ,
链接伪类选择器 lvha
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素

    111

    222
  • 1
  • 2
  • 3

li:nth-of-type(2):表示ul下的第二个li元素
li:nth-child(2):表示既是li元素又是在ul下的第二个元素(找不到)。
建议一般使用nth-of-type,不容易出问题。
css三大特性:CSS层叠性、CSS继承性、CSS优先级
谈谈你对CSS布局的理解

盒子模型

清楚浮动的方式:
一、额外标签法,

二、父级添加overflow属性方法
三、使用after伪元素清除浮动

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

四、使用双伪元素清除浮动

定位模式与边偏移:

元素的显示与隐藏:
display:none;
overflow:hidden

鼠标样式cursor
default小白  默认,pointer小手,move移动,text文本,not-allowed禁止
vertical-align 垂直对齐

溢出的文字省略号显示
1.white-space:nowrap强制文本在一行上显示
2.overflow: hidden超出部分隐藏
3.text-overflow:ellipsis当对象内文本溢出时显示省略标记

常见的布局方式:
固定布局、
流式(%)布局、
弹性(flex)布局、
rem布局
浮动布局、清除浮动
定位布局、
margin和padding

块级元素垂直居中
如何让一个p 上下左右居中
1.
left:50%;   top:50%
transform: translate(-50%,-50%)
2.
left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto
3.px
CSS三大特性:层叠 继承 优先级
可以继承的属性
文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color

列表相关:list-style-image,list-style-position,list-style-type, list-style

CSS3新特性
实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)

增加了更多的CSS选择器 多背景 rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局

相关教程推荐:CSS视频教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

php-src源码分析探索
php-src源码分析探索

共6课时 | 0.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号