[前端求职必看]前端开发面试题与答案精选_CSS

问题描述

CSS

介绍一下CSS的盒子模型？

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

* 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul < li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a: hover, li: nth - child）* 可继承的样式： font-size font-family color, UL LI DL DD DT;* 不可继承的样式：border padding margin width height ;* 优先级就近原则，同权重情况下样式定义最近者为准;* 载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag important 比 内联优先级高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。:enabled :disabled 控制表单控件的禁用状态。:checked单选框或复选框被选中。

如何居中div？如何居中一个浮动元素？

给div设置一个宽度，然后添加margin:0 auto属性

div{ width:200px; margin:0 auto; }

居中一个浮动元素

确定容器的宽高 宽500 高 300 的层 设置层的外边距 .div { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%;}

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

1. block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。 2. *absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 *fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。 *relative 生成相对定位的元素，相对于其正常位置进行定位。 * static 默认值。没有定位，元素出现在正常的流中 *（忽略 top, bottom, left, right z-index 声明）。 * inherit 规定从父元素继承 position 属性的值。

CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）， 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba

一个满屏 品 字布局 如何设计?

经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？

为什么要初始化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; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

absolute的containing block计算方式跟正常流有什么不同？

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范的理解？

（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）

css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：/*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#id1{}/*权重为100+1=101*/#id1 div{}/*权重为10+1=11*/.class1 div{}/*权重为10+10+1=21*/.class1 .class2 div{} 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

解释下浮动和它的工作原理？清除浮动的技巧

用过媒体查询，针对移动端的布局吗？

使用 CSS 预处理器吗？喜欢那个？

SASS

问题解答

面试不怕不怕啦