kaiyun.com：CSS面试可能会问到的问题

发布日期：2023-09-13 16:04浏览次数：

本文摘要：1、CSS3有哪些新特性1，针对块容器：圆角（border-radius:8px）、阴影（box-shadow:10px）配景的线性/径向渐变（gradient）、边框图片(border-image)、RGBA和透明度2，文字特效文字阴影( text-shadow ）、界说自己的字体(font-face)、对长的不行支解单词换行(word-wrap：break-word)3，transform动态效果平移（translate）、旋转（rotate）、缩放（scale）、

kaiyun.com

1、CSS3有哪些新特性1，针对块容器：圆角（border-radius:8px）、阴影（box-shadow:10px）配景的线性/径向渐变（gradient）、边框图片(border-image)、RGBA和透明度2，文字特效文字阴影( text-shadow ）、界说自己的字体(font-face)、对长的不行支解单词换行(word-wrap：break-word)3，transform动态效果平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）4，媒体查询（@media）：凭据浏览器的尺寸变化接纳差别的样式@media only screen and (max-width: 600px) { .example {background: red;} } @media only screen and (min-width: 600px) { .example {background: green;} } 1234565，新增了许多选择器5.1、属性选择器: 选择器[attr] 、选择器[attr=value]。5.2、结构性伪类选择器：选择器:nth-child(n) 第n个子节点。

5.3、其它选择器：:disabled、:enabled、:checked、:first-line 、:first-letter、::selection 选中文本的时候2、CSS3的flexbox（弹性盒结构模型）,以及适用场景是什么flexbox 是 Flexible Box 的缩写，意为”弹性结构”。任何容器都可以指定为 Flex 结构。块级元素、行内元素都可以使用 Flex 结构。

.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。接纳 Flex 结构的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交织轴（cross axis）。项目默认沿主轴排列。优势使用弹性结构可以有效的分配一个容器的空间，纵然我们的容器元素尺寸发生改变，它内部的元素也可以调整它的尺寸来适应空间适用场景适用于移动端更多flex结构参考 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html3、常见的兼容性问题差别浏览器的标签默认的margin和padding纷歧样{margin:0;padding:0;}Chrome 中文界面下默认会将小于 12px 的文本强制根据 12px 显示,通过CSS 属性 -webkit-text-size-adjust: none; 解决部门浏览器的img标签之间会有个默认的间距使用float透明度的兼容加前缀.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 123456当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度更多的兼容参考链接 https://www.cnblogs.com/angel648/p/11392262.html4、 CSS里的visibility属性有个collapse属性值？在差别浏览器下以后什么区别当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的体现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。firefox，opera和IE，使用collapse值和使用display：none没有什么区别。5、设置元素浮动后，该元素的display值是几多？自动酿成display:block6、移动端的结构用过媒体查询(@media)吗通过媒体查询可以为差别巨细和尺寸的媒体界说差别的css，适应相应的设备的显示。

方法如下：方法一 html方法<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">方法二 css方法 @media only screen and (max-device-width:480px) { /css样式/ } 1237、CSS优化、提高性能的方法有哪些制止子女选择符制止链式选择符制止不须要的重复制止不须要的命名空间制止！important最好使用表现语义的名字8、浏览器是怎样剖析CSS选择器的CSS选择器的剖析是从右向左剖析的，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则竣事这个分支的遍历。而在 CSS 剖析完毕后，需要将剖析的效果与 DOM Tree 的内容一起举行分析建设一棵 Render Tree，最终用来举行绘图。在建设 Render Tree 时，浏览器就要为每个 DOM Tree 中的元素凭据 CSS 的剖析效果（StyleRules）来确定生成怎样的 Render Tree。

9、在网页中的应该使用奇数还是偶数的字体？为什么呢？使用偶数字体。偶数字号相对更容易和 web 设计的其他部门组成比例关系10、元素竖向的百分比设定是相对于容器的高度吗当按百分比设定一个元素的宽度时，它是相对于父容器的宽度盘算的，可是，对于一些表现竖向距离的属性，例如padding-top , padding-bottom , margin-top , margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

11、全屏转动的原理是什么？用到了CSS的哪些属性？假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform举行y轴定位，也可以通过margin-top实现联合overflow：hidden；transition：all 1000ms ease来实现动画转动12、 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用单双冒号的区别单冒号(:)用于CSS3伪类p:before{content:'序言'}p:after{content:'......'}双冒号(::)用于CSS3伪元素`p:hover::before{}<!DOCTYPE html><html><head><style>p:before{content:"台词：";display:inline-block;}p:hover::before{ content:'滑过台词一: ';}</style></head><body> <p>我住在 Duckburg。</p></body></html>1234567891011121314151617before、after伪类的作用before、after 就是界说在元素主体内容之前/后的一个伪元素。并不存在于dom之中，只存在在页面之中。

13、怎么让Chrome支持小于12px 的文字针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性举行缩放！以到达设置小于12px的字体的效果p{ font-size:12px; -webkit-transform:scale(0.8); //0.8是缩放比例，12*0.8相即是10} 123414、如果需要手动写动画，你认为最小时间距离是多久，为什么多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小距离为1/60＊1000ms ＝ 16.7ms。15、 li与li之间有看不见的空缺距离是什么原因引起的？有什么解决措施？受代码之间的空缺或回车等的影响，因为空格也属于字符，也会占据一定的空间，所以会有距离，解决方法如下：将<li>代码全部写在一排浮动在ul中用font-size：0;16、display:inline-block 什么时候会显示间隙有空格时候会有间隙解决：移除空格margin正值的时候解决：margin使用负值使用font-size时候解决：font-size:0、letter-spacing、word-spacing17、style标签写在body后与body前有什么区别页面加载剖析是自上而下的。

如果style放在body后面，可能会导致页面先行加载后，再去加载样式时，导致页面重新渲染，引起页面的闪烁。原文链接：https://blog.csdn.net/yiyueqinghui/article/details/109102470?utm_medium=distribute.pc_category.none-task-blog-hot-9.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-9.nonecase&request_id=作者：一月清辉出处：CSDN。

本文关键词：kaiyun.com,kaiyun.com,CSS,面试,可能,会,问到,的,问题,、,CSS3

本文来源：kaiyun.com-www.julonger.com

上一篇：如何躲开那些看了想退票的戏？

下一篇：没有了