前端面试题集锦(二)之CSS部分
1、CSS中的选择器都有哪些?权限情况如何?
解答:
(1)类选择器 .className
(2) ID选择器 #id
(3) 元素选择器 div 可以多个,以逗号隔开
(4)父子选择器 以空格隔开 div p ,表示所有div 下的p元素
(5)父子组合选择器 div>p , 表示所有父级元素是div的p元素
(6)相邻选择器 div+p , 表示所有紧接着div之后的p元素
(7)属性选择器 [target] , 表示所有带有target属性的元素
(8)属性筛选选择器 [arrt= ] [arrt-= ] [arrt|=] ,分别表示某项属性等于 ,某项属性包含,某项属性以某字符开头的元素
(9)伪类选择器 :link , :visited, :hover, :active, :first-child, 等等
选择器权限: 行内样式 > id > class > element > * 通配符
2、CSS常用的伪类和伪元素
解答:
(1)常用的伪类有:
:hover -表示鼠标经过改变颜色;
:nth-child(even)-表示父元素的第偶数个子元素, 常用来生成斑马纹效果
:nth-child(odd)-表示父元素的第奇数个子元素,常用来生成斑马纹效果
:disabled - 表示选择所有禁用的表单元素
:checked - 表示所有选中的表单元素
(2)常用的伪元素
:after 向指定的元素后增加内容
:before 向指定的元素前增加内容
:first-letter 表示要选中的文本的第一个字母的样式
:first-line 表示要选中的文本的第一行文字的样式
3、CSS中的盒模型,有哪几种盒模型
解答:
CSS中的定位属性:分为几种
(1)static : 默认定位, 无定位
(2)relative: 相对定位,相对于自身位置进行偏移
(3)absolute: 绝对行为, 相对于最近的非 static 定位祖先元素的偏移,绝对定位的元素可以设置外边距(margin),且不会与其他边距合并
(4) fixed : 固定定位,相对于屏幕视口(viewport)的位置
(5)sticky: 粘性定位,盒位置根据正常流计算(这称为正常流动中的位置),
然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。
在所有情况下(即便被定位元素为 table时),该元素定位均不对后续元素造成影响。
当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。
position: sticky对 table元素的效果与 position: relative 相同。
4、CSS中的盒模型,分为哪几种?
解答:
(1)盒模型的概念:
盒模型的组成由里向外content,padding,border,margin.
标准盒模型:盒模型的宽高只是内从content的宽高
IE盒模型: IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
(2)CSS3 的属性 box-sizing
可以设置盒模型为content-box 或 border-box
5、CSS中的float属性的理解,如何清除浮动,如何解决浮动元素撑不开高度的问题
解答:
CSS中的float属性
浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次
(1)浮动的本质是用来文字环绕的,像分栏布局和列表排列都可用其它属性实现。
(2)浮动是一个带有方位的display:inline-block;所以设置浮动,就会有默认的display:inline-block;这个属性。
不需要再写display了;设置display:inline-block带来的各种效果,比如高宽自适应而不是继承父元素宽。
可以设置高和宽。他的前后不会像块级元素默认换行(但是它没有高度)。
(3)浮动会破坏inline-box,产生两个结果。①(无inlinebox->无line-box->无高度)。
②图片与文字无法同行显示。这两个结果恰恰是文字环绕的所必需的
float和position的相互影响
如果在float上设置position:absolute的话,会覆盖float的属性。就不是浮动了。float失效
在float上设置position:relative的话,如果设置left/top/right/bottom等属性,则元素会先浮动到相应位置,
然后再根据top/left/bottom/right所设置的距离发生偏移,在float上设置margin属性也是有效的。
清除浮动的方法:设置clear:both,clear:left,clear:right属性,
解决浮动元素撑不开父元素高度的问题:
1、使用空的块级元素撑开高度
2、对父元素使用:after伪元素
3、对父元素添加over-flow:hidden属性
6、CSS中外边距重合问题的描述,如何解决,CSS中bfc的理解block fomatting context
解答:
(1)在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),
以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。
(2)创建BFC的条件
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,
块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
作用: 利用BFC避免外边距折叠,解决容器高度不会被浮动元素撑开的问题,避免文字环绕,可以避免多列布局中的样式问题,
7、CSS3中新增的常用属性,
解答:
(1)边框圆角 border-radius, 边框图片
(2) 文字阴影,盒阴影,文字溢出省略
(3)背景图片(多个),背景尺寸剪切,颜色渐变
(4)2D 与 3D转换, transform ,translate, rotate, scale,skew, rotateX, roteteY
(5) 过渡 transition , 动画 animation
(6) 多列布局,弹性盒模型flex
(7)多媒体查询
8、CSS响应式设计的方法
解答:
(1)设置Viewport,
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
(2)设置多媒体查询,CSS3 @media 查询,@media 可以针对不同的屏幕尺寸设置不同的样式
(3)使用CSS 栅格视图,
(4)设置响应式的图片和视频
(5)使用响应式设计的样式框架
9、如何在网页中添加一个三角形或指定的其他图形?解决思路有几种?
解答:
(1)利用高度为0的块及元素的边框设置,css设置
(2)利用HTML转义字符串设置
(3) 利用:after伪元素设置
(4)利用字体图标或背景图片设置
转载于:https://www.cnblogs.com/liquanjiang/p/10596525.html
前端面试题集锦(二)之CSS部分相关推荐
- 前端面试题集锦——JavaScript
前端面试题集锦--JavaScript 1.请你谈谈 Cookie 的优缺点 cookie是存储于访问者计算机中的变量 cookie是浏览器提供的一种机制 可以由JavaScript对其进行控制(设置 ...
- Web前端面试题集锦
Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...
- 2021-2022 最新最全的前端面试题集锦(2022 持续更新中...敬请关注)
写在最前 想起上一次的面试经历,不免细思极恐. 工作以来,感觉自己接触到的东西还是挺多的,但是当我面试的时候,就会发现各种问题,很多知识点都是模棱两可,答得不全面.究其原因,还是没有吃透这些内容.所以 ...
- css前端面试题(二)
目录 一.如何解决跨域问题 1.1JSONP 1.2CORS 1.3通过修改docunment.damain来跨子域 1.4使用window.name来进行跨域 二.前端如何优化网站性能? 2.1减少 ...
- 前端面试题(二)(CSS篇)建议收藏,持续更新中...
如何给段落首行缩进? 一看题目居然没想起text-indent
- 大前端面试题总结(html+css+js)
先从我们最熟悉的html+css开始 1.请简述css盒子模型 一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容) ...
- web前端面试题集锦三
1.HTML语义化的理解? 答案:HTML语义化就是让页面的内容结构化,便于对浏览器.搜索引擎解析:在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的:搜索引擎的爬虫依赖于标记来确定上下文 ...
- 前端面试题(二)框架篇
MVVM MVVM 由以下三个内容组成 View:界面 Model:数据模型 ViewModel:作为桥梁负责沟通 View 和 Model 在 JQuery 时期,如果需要刷新 UI 时,需要先取到 ...
- 前端面试题集锦(一)之HTML部分
前端的发展日新月异,前端开发也早已从原来的切图套页面,变成了现在的非常复杂的技术体系,近期由于找工作,面试了很多家单位,也总结了一部分前端面试中经常会遇到的面试类型,并一一解答. 主要分为HTML.C ...
最新文章
- 关系的三类完整性约束的描述
- python爬虫设置下拉框的值_python爬虫:BeautifulSoup 使用select方法的使用
- [HNOI2015]亚瑟王
- 大数据集群问题排查:时间不同步导致hbase regionserver只启动了部分节点的进程
- python制作中秋贺卡_中秋节到了,送你一个Python做的Crossin牌“月饼”
- JavaScript 高级——详谈面向对象
- mysql连接指定时区_MySQL创建JDBC连接时区问题
- 通过mvn dependency:tree 查看依赖树,解决依赖jar冲突问题
- 获取某一列_Excel VBA 8.2 获取多列唯一值,不用肉眼,VBA帮你快速搞定
- 2020网上答题拿证书的竞赛_参赛答题拿证书—全国大学生知识竞赛
- Qt —— QWebEngineView加载谷歌离线地图(包含离线地图瓦片下载制作)
- ie浏览器自动清理缓存简单设置方法
- python提取图片中的文字并生成word文档
- 计算机未连接到网络,电脑未连接到一个互联网的问题,解决网络问题方法
- shchangenotifyregister 监视子文件夹文件改变_真假文件夹?FakeFolder病毒再次捣乱企业内网...
- 【6.21更新】coursera视频打不开的解决方法
- Human Brain Mapping:多项目工作记忆的时空和波谱动态特性—基于MEG的研究
- 详解红黑树之左旋右旋
- gview java_Android:控件GridView的使用
- 利用 Python 爬取了 13966 条运维招聘信息,我得出了哪些结论?