搜索
首页web前端html教程前端面试集锦--CSS篇_html/css_WEB-ITnose

三、CSS篇

3.1、谈谈你对CSS布局的理解

 

3.2、请列举几种可以清除浮动的方法(至少两种)

浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷)。

a. 添加额外标签,例如

b. 使用br标签和其自身的html属性,例如

c. 父元素设置 overflow:hidden;在IE6中还需要触发hasLayout,例如zoom:1;

d. 父元素设置 overflow:auto 属性;同样IE6需要触发hasLayout

e. 父元素也设置浮动

f. 父元素设置display:table

g. 使用:after 伪元素;由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

在CSS2.1里面有一个很重要的概念,那就是 Block formatting contexts (块级格式化上下文),简称 BFC。

创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,同时BFC仍然属于文档中的普通流。

IE6-7的显示引擎使用的是一个称为布局(layout)的内部概念。

参考《那些年我们一起清除过的浮动》

 

3.3、请列举几种隐藏元素的方法

a. visibility: hidden;这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。

b. opacity: 0;一个CSS3属性,设置0可以使一个元素完全透明,制作出和visibility一样的效果。与visibility相比,它可以被transition和animate

c. position: absolute;使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。

d. display: none;元素会变得不可见,并且不会再占用文档的空间。

e. transform: scale(0);将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。

f. HTML5 hidden attribute;hidden属性的效果和display:none;相同,这个属性用于记录一个元素的状态

g. height: 0; overflow: hidden;将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。

h. filter: blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。

参考《使用CSS隐藏HTML元素的4种常用方法》《通过HTML和CSS隐藏和显示元素的4种方法》

 

3.4、如何让一段文本中的所有英文单词的首字母大写

text-transform:

none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )

 

3.5、请简述CSS样式表继承

CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下:参考《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

 

3.6、请简述CSS的选择器

元素选择器:* 、E、 E#id、 E.class

关系选择器:E、F、E>F、E+F、E~F

属性选择器:E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]

伪类选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等

伪对象选择器:E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

参考《选择符列表》

 

3.7、CSS伪类与CSS伪对象的区别

CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西

根本区别在于:它们是否创造了新的元素(抽象)

伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类

伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中

参考《CSS伪类与CSS伪元素的区别及由来》

 

3.8、请简述CSS的权重规则

一个行内样式+1000,一个id+100,一个属性选择器/class类/伪类选择器+10,一个元素名/伪对象选择器+1。

关系选择器将拆分为两个选择器再计算。参考《CSS权重》

 

3.9、请写出多种等高布局

a. 假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像

b. 给容器div使用单独的背景色(固定布局)(流体布局):用

元素中的最大高度撑大其他的
容器高度

c. 创建带边框的两列等高布局:用border-left来做,只能使用两列。

d. 使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,设置overflow:hiden把溢出背景切掉

e. 使用边框和定位模拟列等高:但不能使用在多列

f. 模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行

 

3.10、在CSS样式中常使用px、em,各有什么优劣,在表现上有什么区别?

px是相对长度单位,相对于显示器屏幕分辨率而言的。

em是相对长度单位,相对于当前对象内文本的字体尺寸。

px定义的字体,无法用浏览器字体放大功能。

em的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。

 

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 可以控制

 

3.12、position的absolute与fixed共同点与不同点

相同:

a. 改变行内元素的呈现方式,display被置为block

b. 让元素脱离普通流,不占据空间

c. 默认会覆盖到非定位元素上

区别:

absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。

当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

 

3.13、position的值, relative和absolute分别是相对于谁进行定位的?

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。 (IE6不支持)

relative:生成相对定位的元素,相对于其在普通流中的位置进行定位

static:默认值。没有定位,元素出现在正常的流中

 

3.14、CSS3有哪些新特性?

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

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

参考《CSS3中的动画效果记录》、《CSS3中border-radius、box-shadow与gradient那点事儿》

 

3.15、为什么要初始化CSS样式?

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

 

3.16、解释下 CSS sprites原理,优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,

再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,

background-position可以用数字精确的定位出背景图片的位置。

优点:

a. 减少网页的http请求

b. 减少图片的字节

c. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名

d. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。

缺点:

a. 在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂

b. CSS Sprites在开发的时候,要通过photoshop或其他工具测量计算每一个背景单元的精确位置

c. 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片

 

3.17、解释下浮动和它的工作原理?

a. 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)

b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。

 

3.18、浮动元素引起的问题

a. 父元素的高度无法被撑开,影响与父元素同级的元素

b. 与浮动元素同级的非浮动元素会跟随其后

c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

 

3.19、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:

以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

解决方法:使用LINK标签将样式表放在文档HEAD中。

 

3.20、line-height三种赋值方式有何区别?(带单位、纯数字、百分比)

带单位:px不用计算,em则会使元素以其父元素font-size值为参考来计算自己的行高

纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px

百分比:将计算后的值传递给后代

参考《line-height的理解》、《浅析line-height和vertical》,查看在线源码。

 

L-V-H-A,l(link)ov(visited)e h(hover)a(active)te,即用喜欢和讨厌两个词来概括

 

3.22、经常遇到的浏览器兼容性有哪些?如何解决?

a. 浏览器默认的margin和padding不同

b. IE6双边距bug

c. 在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的

d. min-height在IE6下不起作用

e. 透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用 opacity:0.6

f. input边框问题,去掉input边框一般用border:none;就可以,但由于IE6在解析input样式时的BUG(优先级问题),在IE6下无效

 

3.23、有哪项方式可以对一个DOM设置它的CSS样式?

a. 外部样式表:通过标签引入一个外部css文件

b. 内部样式表:将css代码放在

c. 内联样式:将css样式直接定义在 HTML 元素内部

 

3.24、什么是外边距重叠?重叠的结果是什么?

外边距重叠就是margin-collapse。

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则:

a. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

b. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

c. 两个外边距一正一负时,折叠结果是两者的相加的和。

 

3.25、rgba()和opacity的透明效果有什么不同?

a. opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色。

b. 设置rgba透明的元素的子元素不会继承透明效果!

 

3.26、css属性content有什么作用?有什么应用?

css的content属性专门应用在 before/after 伪元素上,用于来插入生成内容。

可以配合自定义字体显示特殊符号。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境