前端面试题——CSS篇

1.介绍一下标准的CSS的盒子模型？低版本的IE的盒子模型有什么不同？ 有两种：IE盒子模型、W3C盒子模型； 盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）； 区别：IE的content部分吧border和padding计算进去；在CSS3中引入了box-sizing属性，它可以允许改变默认的CSS盒模型对原宿宽高的计算方式。 共包括两个选项： content-box：标准盒模型，CSS定义的宽高只包括content的宽高。 border-box：IE盒模型，CSS定义的宽高包括了content、padding和border。 在标准模式下，一个块的总宽度=width+margin（左右）+padding（左右）+border（左右） 在怪异模式下，一个块的总宽度=width+margin（左右）（即width已经包括了padding和border值） 2.CSS优先级算法如何计算？ 优先级就近原则，同权重情况下样式定义最近者为准； 载入样式以最后载入的定位为准 优先级为： ！important>id>class>tag important比内联优先级高 3.如何居中div？ 水平垂直居中问题，在CSS中margin：0 auto；可以实现水平居中，但是在垂直中方面一直没有特定的属性，知道CSS3的出现，有了弹性盒，可以通过设置弹性和直接设置居中位置，做浏览器兼容的话可以通过使用一些hack处理负margin方法，table-cell方法，位移方法。 负margin方法 CSS代码： .container{ width:500px; height:400px; border:2px solid red; position:relative; } .inner{ width:480px; height:380px; background-color:green; position:absolute; top:50%; left:50%; margin-top:-190px; margin-left:-240px; } HTML代码： 这里，我们首先用top:50%和left:50%让inner的坐标原点（左上角）移动到container的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。 table-cell方法 CSS代码： div{ width:300px; height:300px; border:3px solid red; display:table-cell; vertical-align:middle; text-align:center; } img{ vertical-align:middle; } HTML代码： 通过将盒子转换为table元素，table元素本身是可以通过属性控制位置，div上面的vertical-align:middle是控制垂直方向上的居中的，而text-align:center是控制水平方向的。 弹性盒子法 CSS代码： .container{ width:300px; height:200px; border:3px solid red; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .inner{ border: 3px solid #458761; padding: 20px; } HTML代码: align-items 控制垂直方向的居中，justify-content 控制水平方向的居中。这是 CSS3 的新方法。 位移方法 位移方法和margin定位方法一样，只不过把margin改成了位移不需要计算一半是多少，直接transform：translate（-50%，-50%） div{ width:200px; height:200px; background:green; position:absolute; left:50%； top:50%; transform:translate(-50%,-50%); } div绝对定位水平垂直居中（margin：auto实现绝对定位元素的居中） div{ width:200px; height:200px; background:green; left:0; top:0; bottom:0; right:0; margin:auto; } 4.position的值relative和absolute定位原点是？ absolute 生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。 fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right，z-index声明）。 inherit 规定从父元素继承position属性的值。 5.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{} 如果权重相同，则最后定义的样式会起作用，但是应避免这种情况出现。 6.请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ 浮动元素脱离文档流，不占据空间。浮动元素碰到包含他的边框或者浮动元素的边框停留。 1.使用空标签清除浮动 这种方式是在所有浮动标签后面添加一个空标签定义 CSS clear:both;弊端就是增加了无意义标签。 2.使用overflow 给包含浮动元素的父标签添加CSS属性overflow:autozoom:1;zoom:1用于兼容IE6。 3.使用after伪对象清除浮动 该方法只适用于非IE浏览器。

本文章由javascript技术分享原创和收集