
发布时间:2022-12-22 作者:亚博全站APP官网登录 点击量:
1、谈谈你对CSS结构的明白常见的结构方式:牢固结构、流式结构、弹性结构、浮动结构、定位结构、margin和padding2、请枚举几个清除浮动的方法(1)使用clear属性
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样式?外部样式表,使用 标签引入一个外部CSS样式内部样式表,将CSS代码放在