本文摘要：​1、谈谈你对CSS结构的明白常见的结构方式：牢固结构、流式结构、弹性结构、浮动结构、定位结构、margin和padding2、请枚举几个清除浮动的方法（1）使用clear属性divstyle=clear:both/div（2）使用br标签和其自身的HTML属性brclear=all/（3）通过设置父元素的样式，实现清除浮动，例如：父元素设置 overflow:hidden父元素设置 overflow:auto父元素设置 display:table父元素也设置浮动样式（4）

​1、谈谈你对CSS结构的明白常见的结构方式：牢固结构、流式结构、弹性结构、浮动结构、定位结构、margin和padding2、请枚举几个清除浮动的方法（1）使用clear属性<divstyle="clear:both"></div>（2）使用br标签和其自身的HTML属性<brclear="all"/>（3）通过设置父元素的样式，实现清除浮动，例如：父元素设置 overflow:hidden父元素设置 overflow:auto父元素设置 display:table父元素也设置浮动样式（4）使用 :after 伪元素3、请枚举几种隐藏元素的方法visibility:hidden，这个属性只是简朴的隐藏某个元素，可是元素占用的空间任然存在；opacity:0，是CSS3的属性，设置元素为完全透明，和 visibility 的效果类似，可是该属性修饰的元素可以使用 transition 和 animate 设置动画效果；display:none，设置元素为不行见，不会占用文档的空间；hidden属性，该属性是HTML5中新增的属性，效果和 display 相同；4、如何让一段文本中的所有英文单词的首字母大写text-transform: none | capitalize（将每个单词的第一个字母转为大写） | uppercase（将每个单词都转为大写）| lowercase（将每个单词都转为小写）5、请简述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；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::selection7、CSS伪类与CSS伪工具的区别CSS引入伪类和伪元素的观点是为了形貌一些现有CSS无法形貌的工具，基础区别在于：它们是否缔造了新的抽象元素；伪类：形貌了所有逻辑上存在但在文档树中无须标识的分类；伪工具：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中；8、请简述CSS的权重规则行内样式 > ID > 属性选择器/class类/伪类选择器 > 元素名/伪工具选择器；关系选择器将拆分为两个选择器再盘算权重。

9、请写出多种等高结构假等高结构：使用配景图片，在列的父元素上使用这个配景图举行Y轴的铺放，从而实现一种等高列的假象给容器div使用单独的配景色（牢固结构、流体结构）：用元素中的最大高度撑大其他的容器高度建立带边框的两列等高结构：用border-left来做，只能使用两列使用正padding和负margin对冲实现多列结构方法：在所有列中使用正的上下padding和负的上下margin，并在所有列外面加上一个容器，设置overflow:hidden把溢出配景切掉使用边框和定位模拟列等高：但不能使用在多列模拟表格结构等高效果：兼容性欠好，在IE6/7无法正常运行10、在CSS样式中使用px、em，各有什么优势，在体现上有什么区别？px是相对长度单元，相对于显示器屏幕分辨率而言的；em是相对长度单元，相对于当前工具内文本的字体尺寸；px界说的字体，无法用浏览器字体放大功效；em的值并不是牢固，会继续父级元素的字体巨细，1 ÷ 父元素的font-size × 需要转换的像素值 = em值11、CSS中link和@import 的区别是什么？link属于HTML标签，而 @import 是CSS提供的，只能加载CSS；页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；@import只能在IE5以上才气识别，而link是HTML标签，无兼容问题；link方式的样式权重高于@import的权重；当使用javascript控制DOM去改变样式的时候，只能使用link方式，因为@import只有CSS才气识别，DOM无法控制；12、position的absolute与fixed配合点与差别点？相同：改变行内元素的出现方式，display被置为block让元素脱离普通流，不占据空间默认会笼罩到非定位元素上区别：absolute的”根元素“是可以设置的，而fixed的”根元素“牢固为浏览器窗口。当你转动网页，fixed元素与浏览器窗口之间的距离是稳定的。13、position的值，relative 和 absolute 划分是相对于谁举行定位的？absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素举行定位fixed：生成绝对定位的元素，相对于浏览器窗口举行定位。

（IE6不支持）relative：生成相对定位的元素，相对于其在普通流中的位置举行定位static：默认值。没有定位，元素泛起在正常的流中14、CSS3有哪些新特性？新增特性有：圆角（border-radius）、阴影（box-shadow）、对文字加特效（text-shadow）、线性渐变（gradient）、变形（transform）；增加了更多的CSS选择器，媒体查询，多栏结构，多配景rgba，引入伪元素::selection。15、为什么要初始化CSS样式因为浏览器的兼容问题，差别浏览器对有些标签的默认值是差别的，如果没有初始化CSS，往往会泛起浏览器之间的页面显示差异；CSS样式初始化之后会对SEO有一定的影响。

16、解释下 CSS sprites 原理，及优缺点？CSS sprites 其实就是把网页中的一些配景图片整合到一张图片文件中，在使用CSS的 background-image，background-repeat，background-position的组合举行配景定位，background-position可以用数字准确的定位出配景图片的位置。优点：淘汰网页的http请求淘汰图片的字节解决网页设计师在图片命名上的困扰，只需要对一张荟萃的图片上命名就可以了，不需要对每一个小元素举行命名更换气势派头利便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的气势派头就可以改变了缺点：在宽屏，高分辨率的屏幕下的自适应页面，如果配景图不够宽，很容易泛起配景断裂CSS sprites 在开发的时候，需要通过Photoshop或其他工具丈量盘算每一个配景单元的准确位置在维护的时候比力贫苦，如果页面配景有少许改动，一般就要修改这张合并的图片17、解释一下浮动及其事情原理？浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）；浮动元素遇到包罗它的边框或者浮动元素的边框停留。18、浮动元素引起的问题父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素会追随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构19、什么是FOUC（无样式内容闪烁）？你如何来制止FOUC？如果使用@import方式对CSS举行导入，会导致某些页面在windows下的IE泛起一些奇怪的现象：以无样式显示页面内容的瞬间闪烁，这种现象被称为文档样式短暂失效，简称FOUC原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。

此样式表被下载息争析后，将重新渲染页面，也就泛起了短暂的花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中。20、line-height 三种赋值方式有何区别？（带单元、纯数字、百分比）带单元：px不用盘算，em则会使元素以其父元素font-size值为参考来盘算自己的行高；纯数字：把比例通报给子女，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px；百分比：将盘算后的值通报给子女；21、:link、:visited、:hover、:active 的执行顺序是怎么样的？:link > :visited > :hover > :active22、经常遇到的浏览器兼容性有哪些？如何解决？浏览器默认的 margin 和 padding 差别IE6双边距bug在IE6、IE7中元素高度超出自己设置高度，原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的min-height 在IE6下不起作用透明性IE用filter.Alpha(opcity=60)，而其他主浏览器用opacity:0.6input边框问题，去掉input边框一般用 border:none 就可以了，由于IE6在剖析input样式时的bug（优先级问题），在IE6下无效23、有哪些方式可以对一个DOM设置它的CSS样式？外部样式表，使用 <link>标签引入一个外部CSS样式内部样式表，将CSS代码放在 <style> 标签内部内联样式，将CSS样式直接界说在HTML元素内部24、什么是外边距重叠？重叠的效果是什么？外边距重叠就是margin-collapse；在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以联合成一个单独的外边距。

这种合并外边距的方式称为折叠，而且因而所联合成的外边距称为折叠外边距；折叠效果盘算规则：两个相邻的外边距都是正数时，折叠效果是他们两者之间较大的值；两个相邻的外边距都是负数时，折叠效果是两者绝对值的较大值；两个外边距一正一负时，折叠效果是两者的相加的和25、rgba() 和 opacity 的透明效果有什么差别？opacity 作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其配景色设置rgba透明的元素的子元素不会继续透明效果26、CSS属性content有什么作用？有什么应用？css的content属性专门应用在 after/before 伪元素上，用于插入生成内容，可以配合自界说字体显示特殊符号。

本文关键词：【,前端,澳门新葡萄棋牌官方网站,面试,】,CSS,常晤面,常,晤面,试题,​

本文来源：澳门新葡萄棋牌官方网站-www.0513yf.com