当前位置: 首页 > Web前端 > CSS

前端面试的css文章

时间:2023-03-31 01:51:34 CSS

@import"style.css";1.CSS属性区分大小写吗?答:不区分。HTML和CSS都是不区分大小写的,但是为了更好的可读性和团队合作,它们通常都是小写的,而元素名称和属性在XHTML中必须小写。2.设置margin-top和margin-bottom对行内元素有效吗?padding-top和padding-bottom会增加它的高度吗?答:内联元素又分为可替换元素(replacedelement)和不可替换元素(non-replacedelement)。替换元素:指用作其他内容占位符的元素。如:img、input等工作;非替换元素:内容包含在文档中的元素,如:span等不起作用;3.设置p的font-size:10rem,当用户重置或者拖动浏览器窗口时,文字大小是否也发生变化时答:rem是一个相对的计量单位,根据html根目录中font-size的大小元素,文本的大小不会随着窗口的大小而变化。4.translate()方法可以移动元素在z轴上的位置吗?答:不能。translate()方法只能改变x轴和y轴上的位移。5.唯一选择器是做什么的?@mediaonlyscreenand(max-width:1024px){margin:0;}A:阻止旧浏览器解析选择器的其余部分。only用于指定特定的媒体类型,可以用来排除不支持媒体查询的浏览器。实际上,only常用于对不支持MediaQuery但支持MediaType的设备隐藏样式表。主要包括:对于支持MediaQueries的设备,正常调用该样式,此时只视作不存在;对于不支持MediaQueries但支持MediaType的设备,这将不读取样式,因为它只读取而不是屏幕;另外,不支持MediaQqueries的浏览器,无论是否支持only,该样式都不会被采用。6、浏览器CSS匹配顺序答案:浏览器CSS匹配不是从左到右查找,而是从右到左查找。例如#divBoxpspan.red{color:red;},浏览器的搜索顺序是:首先在html中搜索所有class='red'的span元素,找到后检查是否有其父元素中有一个p元素,然后判断p的父元素中是否存在id为divBox的div元素,存在则匹配。浏览器从右向左搜索的好处是尽早过滤掉一些不相关的样式规则和元素。7.display:none和visibility:hidden的区别:答:display:none和visibility:hidden都是隐藏网页元素的函数,但两者有区别:visibility:hidden属性会使objectinvisible,但是object在网页上所占的空间没有改变(invisiblebuttouchable),也就是留一个空白区域,属性display:none会让这个object完全消失(看不见摸不着)8.请描述BFC(BlockFormattingContext)及其工作原理。:A:浮动元素和绝对定位元素,非块级框(如inline-blocks、table-cells、table-captions)的块级容器,溢出值不“可见”的块级框"将为他们显示。创建一个新的BFC(块级格式化上下文)会触发BFC的条件是:float的值不为none。overflow的值是不可见的。display的值可以是table-cell、table-caption、inline-block中的任意一个。位置的值不是相对的和静态的。collapsedresult:当两个相邻的margin都是正数时,collapsedresult是它们之间的较大值。当相邻两个边距均为负值时,折叠结果为两个绝对值中较大的值。当两个边距分别为正负时,折叠结果为两者之和。9.说说样式的优先级优先级递增0.元素(type)选择器(h1)和伪元素选择器(:before)1.类选择器(.demo)属性选择器([type="radio"])2.ID选择器(#demo)内联样式当在样式声明中使用!important规则时,样式声明会覆盖CSS中的任何其他声明。Never永远不要在站点范围的css上使用它!importantOnly只在需要覆盖整个站点或外部css的特定页面上使用它(例如引用的ExtJs或YUI)!importantNever永远不要在你的插件中使用它!importantAlways应该考虑优化使用样式规则的优先级来解决问题而不是!important10。遇到过FOUC吗?如何解决FOUC?答:FlashofUnstyledContent(FOUC)文档样式暂时失效。你只需要在文档的head元素中添加一个link元素或者script元素,就可以防止FOUC的发生。链接元素解决方案我的页面@import"style.css";script元素解决方案我的页面@import"style.css";