1、介绍一下标准的CSS盒模型?低版本IE的盒子模型有何不同?(1)有IE盒子模型和W3C盒子模型两种;(2)盒子模型:content、padding、margin、border;(3)区别:IE的content部分的border和padding是计算出来的;2.什么是CSS选择器?哪些属性可以继承?*1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul>li)6.后代选择器(lia)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)*可继承样式:font-sizefont-familycolor,ULLIDLDLDDDT;*不可继承的样式:borderpaddingmarginwidthheight;3、CSS优先级算法是如何计算的?*优先就近原则,权重相同的样式定义最接近;*加载样式以最后一次加载的位置为准;优先级是:!important>id>class>tagimportant比inline优先级高4,CSS3新的伪类是什么?示例:p:first-of-type选择作为其父元素的第一个
元素的每个
元素。p:last-of-type选择作为其父元素的最后一个
元素的每个
元素。p:only-of-type选择作为其父元素唯一的
元素的每个
元素。p:only-child选择每个
元素,该元素是其父元素的唯一子元素。p:nth-child(2)选择作为其父元素的第二个子元素的每个
元素。:after在元素前添加内容,也可用于清除浮动。:before在元素后添加内容:enabled:disabled控制表单控件的禁用状态。:checked单选或复选框被选中。5.如何让div居中?如何使浮动元素居中?如何居中绝对定位的div?为div设置一个宽度,然后添加margin:0auto属性div{width:200px;margin:0auto;}居中一个浮动元素,确定容器的宽高层宽500,高300,设置层的外边距.div{width:500px;height:300px;//可以设置高度,不留边距:-150px00-250px;职位:相对;//相对定位background-color:pink;//很容易看出效果left:50%;顶部:50%;}让绝对定位的div居中div{position:absolute;宽度:1200px;背景:无;保证金:0自动;顶部:0;左:0;底部:0;right:0;}6、display的值有哪些?解释他们的作用。块显示为块类型元素。无默认值。显示为内联元素类型。inline-block显示为内联元素,但其内容显示为块型元素。list-item显示为块类型元素,添加了样式列表标记。table该元素将显示为块级表。Inherit规定display属性的值要从父元素继承7.positionrelative和absolute的取值是什么?absolute生成一个绝对定位的元素,相对于其值不是静态的第一个父元素定位。fixed(旧IE不支持)生成绝对定位的元素,相对于浏览器窗口定位。relative生成??相对定位的元素,相对于其正常位置定位。静态默认。没有定位,元素出现在正常流中(顶部、底部、左侧、右侧z-index声明被忽略)。inherit指定从父元素继承位置属性的值。8、CSS3有哪些新特性?添加各种CSS选择器(:not(.input):类不是“输入”的所有节点)圆角(border-radius:8px)多列布局(multi-columnlayout)阴影和反射(Shadow\Reflect)文本effects(text-shadow,)文字渲染(Text-decoration),线性渐变(gradient),旋转(transform)添加旋转,缩放,定位,倾斜,动画,多背景变换:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:9、纯CSS创建三角形的原理是什么?隐藏顶部、左侧和右侧边缘(设置颜色为透明)demo{width:0;高度:0;边框宽度:20px;边框样式:实心;border-color:transparenttransparentredtransparent;}10、如何设计全屏字符布局?简单的方法:最上面的div是100%宽,最下面的两个div分别是50%宽,然后用float或者inline让它不换行。11、li和li之间有区别什么可能导致缺少空格?解决办法是什么?行框的排列会受到中间空白(回车\空格)等的影响,因为空格也是字符,这些空白也会被样式化占用空间,所以会出现空隙。如果字符大小设置为0,则不会有空格。向上。12、为什么要初始化CSS样式。-由于浏览器兼容性问题,不同浏览器对部分标签的默认值不同。如果不对CSS进行初始化,浏览器之间的页面显示往往会存在差异。-当然,初始化样式会对SEO产生一定的影响,但鱼和熊掌不可兼得,而是尽量以影响最小的方式进行初始化。最简单的初始化方法:*{padding:0;margin:0;}(强烈不推荐)淘宝样式初始化代码:body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;填充:0;}body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}h1,h2,h3,h4,h5,h6{字体大小:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:couriernew,courier,monospace;}small{字体大小:12px;}ul,ol{列表样式:无;}a{文本装饰:无;}a:hover{文字装饰:下划线;}sup{垂直对齐:文本顶部;}sub{垂直对齐:文本底部;}图例{颜色:#000;}fieldset,img{border:0;}按钮,输入,选择,文本区域{字体大小:100%;}表{边框折叠:折叠;边界间距:0;}13.绝对包含块(containerblock)计算和普通流有什么区别?不管属于哪种类型,都需要在其祖先元素中找到最近的position值不为static的元素,然后判断:1.如果这个元素是行内元素,那么包含块最先生成elementthatcancontainthiselement最后一个内联框的p添加框的最小矩形(边距和边框以外的区域);2.否则由本祖先元素的paddingbox组成。如果没有找到,则它是初始包含块。补充:1.static(默认)/relative:简单的说就是其父元素的内容框(即去掉padding部分)2.absolute:查找最近的元素定位为absolute/relative向上3.fixed:其包含块始终是根元素(html/body),根元素也是初始包含块14。你对BFC规范(blockformattingcontext:块格式化上下文)的理解是什么?(W3CCSS2.1规范中的一个概念。它是一个独立的容器,决定了一个元素如何定位其内容,以及它与其他元素的关系和交互。)一个页面由许多Box组成,元素的类型和display属性决定了Box的类型。不同类型的Boxes会参与不同的FormattingContexts(决定如何渲染文档的容器),因此Box内部的元素会以不同的方式呈现,这意味着BFC内外的元素不会相互影响。创建规则:根元素浮动元素(float不是none)绝对定位元素(position值为absolute或fixed)显示值为inline-block、table-cell、table-caption、flex、inline-flex元素overflow之一的函数不可见的元素:浮动元素可以包含,不被浮动元素覆盖,防止父子元素边距折叠15、css定义的权重以下是权重规则:标签的权重为1,标签的权重class为10,id的weight为100,下面的例子演示各种定义的weight值:/*weight为1*/div{}/*weight为10*/.class1{}/*weight是100*/#id1{}/*权重是100+1=101*/#id1div{}/*权重是10+1=11*/.class1div{}/*权重是10+10+1=21*/.class1.class2div{}如果权重相同,那么最后定义的样式就可以了,但是应该避免这种情况。16.移动端的布局你用过媒体查询吗?css的媒体查询允许浏览器通过@media标签为特定的媒体设置样式,包含很多过滤器,功能强大。17.你使用CSS预处理器吗?像那样?SASS(SASS和LESS没有本质区别,只是因为团队前端用的是SASS)18、CSS优化和性能提升的方法有哪些?把样式表放在页面顶部,不要用CSS表达式,不要用@import,不要用IE的Filter19,网页应该用奇数字体还是偶数字体?为什么?它应该是偶数。原因:一些比较流行的浏览器,比如谷歌,一般都有默认的最小字体,奇数字体的渲染不是很好看。20、元素设置的垂直百分比是相对于容器的高度?是的,一个元素的百分比设置一般是根据父元素的宽高来决定的。如果父元素没有宽高百分比,就不行