前端计划——面试题总结-CSS篇

2024年3月8日 109次阅读来源: Alarak

前端面试之CSS篇

1、三种基本引入方式

外部样式表
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
内部样式表

<head>
<style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
</style>
</head>

内联
<p style=”color:sienna;margin-left:20px”>这是一个段落。</p>

2、CSS的引入方式中link和@import的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

3、CSS选择器

选择器优先级为!important >内联 > id > 伪类 = 类class > 属性 > tag >通配

3.1 基本选择器

类选择器 .className
ID选择器 #idName
元素选择器 elementName
通配选择器 * (效率最低，不推荐用)
属性选择器 element[attr=value]

3.2 权重计算

内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

3.3 计算法则

选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
继承的CSS 样式不如后来指定的CSS 样式；
在同一组属性设置中标有”!important”规则的优先级最大；示例如下：

3.4组合选择符

后代选择器（空格符）选取所有后代 A B
子元素选择器（大于号）选择某一类型 A>B
相邻兄弟选择器（加号）A+B
普通兄弟选择器（波浪号）A~B

4、伪元素与伪类

4.1 伪类

CSS伪类匹配被用户激活的元素,接伪类先后顺序被称为LVHA顺序:
:link
:visited
:hover
:active

4.2 伪元素

伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式（CSS3使用双冒号）
::after
::before
::first-letter
::first-line
::selection

5、盒式模型

margin/border/padding/content
margin:a,b,c,d 上/右/下/左
margin:a,b,c 上/左右/下
margin:a,b 上下/左右
margin:a 上下左右

6、定位的几种方式：absolute/relative/fixed/static/sticky

absolute
绝对定位的元素的位置相对于最近的已定位父元素（也就是非static定位），如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。
relative
相对定位是相对其正常位置。相对于其在普通流中的位置进行定位。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。经常被用来做绝对定位的容器块。
fixed
元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。
static
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。
sticky
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

7、清除浮动

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

额外标签
添加<div style=”clear:both;”></div>
使用overflow
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
使用after伪对象

#parent:after{
    /*注意content要有内容*/
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

8、display: none;和visibility: hidden;的区别

都是隐藏元素，但是前者文档布局中不占用空间，后者仍占用空间
display：none隐藏产生reflow和repaint（回流与重绘）
前者有株连性，即父元素设置display: none后子元素不管怎样设置都不能显示，而后者的子元素通过设置visibility: visible后还是能显示出来的

9、float和absolute的异同

相同点：都使元素脱离文档流，可以设置宽高
不同点：float仍然占用空间，absolute可以覆盖

10、box-sizing

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

content-box
元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box
让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
inherit
继承父元素的box-sizing属性

11、左右布局：左边定宽、右边自适应，不少于3种方法

//方法一（使用CSS3的flex布局）
.container {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}
.left {
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    flex: 1;
    height: 200px;
    background: red;
}
//方法二(使用CSS3的calc()，注意clac表达式中的减号前后有空格)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 200px;
    background: red;
}
//方法三（不设置宽度，默认填充满）
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    margin-left: 200px;
    height: 200px;
    background: red;
}
//方法四（绝对定位，注意right部分）
.left {
    position: absolute;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    position: absolute;
    left: 200px;
    right: 0px;
    height: 200px;
    background: red;
}
//方法五(百分比width，这个方法不是很好使，百分比不好确定)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: 85%;
    height: 200px;
    background: red;
}
//方法六（表格方式，不推荐使用）

12、div水平垂直居中实现方式

/*方法一：使用flex布局*/
/*加入边框和宽高便于浏览器测试*/
.parent {
    border: 1px solid black;
    display:flex;
    justify-content: center;
    align-items: center;
}
.child {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
/*方法二：绝对定位，左右都是50%，margin-left和top分别为自身一半值的负数*/
.parent {
    position: relative;
}
.child {
    border: 1px solid black;
    width: 400px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}
/*方法三：还是绝对定位，但使用transform*/
.parent{
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    原文作者：Alarak
    原文地址: https://segmentfault.com/a/1190000010660654
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。