前端面试指南CSS篇

来源：互联网发布：网络乞丐mc吴迪伴奏编辑：程序博客网时间：2024/06/06 02:31

为div设置的背景色默认会延伸到哪里?

The background of an element is the total size of the element, including padding and border (but not the margin).

height:100% 和 height:auto 的区别

height:auto;根据内容自动调节高度。

height:100%;相对其父块的高度而定义的高度，也就是按照理她最近且有定义高度的父层的高度来定义高度。

CSS继承需要注意的问题

由于字体和文本样式时刻是继承的，所以在使用相对字体单位时（比如百分比和em）时要格外小心。如果某个标签的字体大小被设置为80%，而他的一个后代的字体大小也被设置为80%，那么该后代最终的字体大小是：64%（80%的80%）。

CSS盒模型

两种盒模型

盒模型分为标准盒子模型与IE盒模型

标准盒模型我们可以使用 box-sizing 的一个属性来描述，即 content-box ，对于标准盒模型而言，其 宽度 = margin + border + padding + width 。

IE 盒子模型我们同样可以使用 box-sizing 的一个属性来描述，即 border-box ，对于 IE 盒子模型而言，其 宽度 = margin + width 。

背景设置

通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距 margin 是透明的，不会遮挡周边的其他元素。

外边距叠加

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

margin 越界

第一个子元素的 margin-top 和最后一个子元素的 margin-bottom的越界问题。

以第一个子元素的 margin-top 为例：当父元素没有边框 border 时，设置第一个子元素的 margin-top 值的时候，会出现 margin-top值加在父元素上的现象。

解决方法有四个：
（1）给父元素加边框border （副作用）
（2）给父元素设置padding值（副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置内容生成。（推荐）

以第四种方法为例：.parent {     width : 500px;     height : 500px;     background-color : red;       }.parent : before {     content : " ";     display : table;}.child {     width : 200px;     height : 200px;     background-color : green;     margin-top : 50px;}<div class="parent">    <div class="child"></div> </div>

用盒子模型画三角形

<!DOCTYPE html><html>  <head>    <style>        .triangle {            width : 0;            height: 0;            border : 100px solid transparent;            border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/        }    </style>  </head>  <body>    <div class="triangle"></div>  </body></html>

CSS3 的新特性有哪些？

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

position 的值， relative 和 absolute 分别是相对于谁进行定位的？

1.absolute :生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。

2.fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

4.static 默认值。没有定位，元素出现在正常的流中

5.sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

CSS 中 `link` 和 `@import` 的区别是？

1.link 属于 HTML 标签，而 @import 是 CSS 提供的;

2.页面被加载的时，link 会同时被加载，而 @import 被引用的 CSS 会等到引用它的 CSS 文件被加载完再加载;

3.link 方式的样式的权重高于 @import 的权重.

`position:absolute` 和 `float` 属性的异同

共同点：对内联元素设置 float 和 absolute 属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float 仍会占据位置，absolute 会覆盖文档流中的其他元素。

介绍一下 `box-sizing` 属性？

box-sizing 属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持 W3C 的标准盒模型。元素的宽度/高度由 border + padding + content 的宽度/高度决定，设置 width/height 属性指的是 content 部分的宽/高

border-box：让元素维持 IE 传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置 width/height 属性指的是 border + padding + content

标准浏览器下，按照 W3C 规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

content-box（默认）

布局所占宽度Width：Width = width + padding-left + padding-right + border-left + border-right布局所占高度Height:Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占宽度Width：Width = width(包含padding-left + padding-right) + border-left + border-right布局所占高度Height:Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占宽度Width：Width = width(包含padding-left + padding-right + border-left + border-right)布局所占高度Height:Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

CSS 选择符有哪些？哪些属性可以继承？

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）

优先级算法如何计算？

!important > id > class > tag

important 比内联优先级高,但内联比 id 要高

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        单选框或复选框被选中。

对 BFC 规范的理解？

BFC，块级格式化上下文，一个创建了新的 BFC 的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

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

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

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动：这种方法是在所有浮动标签后面添加一个空标签定义 css clear:both。弊端就是增加了无意义标签。

2.使用 overflow：给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1 用于兼容 IE6。

3.使用 after 伪对象清除浮动：该方法只适用于非 IE 浏览器。该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

浮动元素引起的问题？

浮动元素引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素

与浮动元素同级的非浮动元素（内联元素）会跟随其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

阅读全文

0 0