CSS面试题-觅稀奇MeXiQi.COM

?这只是个人笔记……我没想到居然有人看到……

题目来源:前端开发面试题

答案基本是自己整理的。并不是全部题目都有。

会有很多自己的啰嗦，还有很多乱七八糟的补充，请见谅。

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

盒子模型有两种：IE盒子模型(IE5.5及以下)，W3C标准盒子模型。

盒子模型(boxmodel)：
内容(content)、填充(padding)、边框(border)、边界(margin)。
不同：
W3C标准盒子模型的width和height，是content的宽高；
IE盒模型的width和height，是content、padding、border三部分合起来的宽高。

附加：
outline（轮廓）绘制在元素框之上，其不占据空间（不影响元素大小和定位）【所以如果轮廓线很粗，会遮住其他内容demo，不是很懂轮廓的覆盖顺序，它居然可以盖住下一个元素的内容？轮廓本身是另一次元的吗？会覆盖内容，但后一个轮廓会覆盖前一个轮廓】。
兼容性：IE8以上。

其他参考：关于外边距的一些实践上的细节,解决盒模型的兼容性问题

如何居中div？水平居中

已知宽度,block元素：
添加margin:0auto属性。
div{width:200px;margin:0auto;}
已知宽度,绝对定位的div居中：
div{position:absolute;width:300px;height:300px;margin:auto;/*这一步很关键*/top:0;left:0;bottom:0;right:0;background-color:pink;/*方便看效果*/}
未知宽度，fit-content：
兼容性很差。
div{width:fit-content;margin:auto;background-color:pink;/*方便看效果*/}
未知宽度，inline-block：
.parent{text-align:center;}div{display:inline-block;background-color:pink;/*方便看效果*/}
未知宽度/已知宽度，relative：
参考：三、浮动实现水平居中的方法
- 优点：兼容性强，扩展性强；
- 缺点：实现原理较复杂。
需要两个div，外层left50%，内层left-50%。
用float或inline-block，使容器大小为内容大小，而非默认的100%。
.outter{display:inline-block;/*orfloat:left;*/position:relative;left:50%;}.inner{position:relative;left:-50%;}
- left的值为百分比时，为父容器的宽度的百分比(MDN)。

水平垂直居中

确定容器宽高：
相对或绝对定位,设置外边距margin。
div{position:relative/fixed;/*相对定位或绝对定位均可*/width:500px;height:300px;top:50%;left:50%;margin:-150px00-250px;/*外边距为自身宽高的一半*/background-color:pink;/*方便看效果*/}
不确定容器宽高：
绝对定位，利用transform属性。
div{position:absolute/fixed;/*relative会让width变成100%，所以不行*/top:50%;left:50%;transform:translate(-50%,-50%);background-color:pink;/*方便看效果*/}
flex布局：
宽高可以确定，也可以不确定。
实际使用时应考虑兼容性。
.container{display:flex;align-items:center;/*垂直居中*/justify-content:center;/*水平居中*/}.containerdiv{width:100px;/*可省*/height:100px;/*可省*/background-color:pink;/*方便看效果*/}
inline-block：
宽高可以确定，也可以不确定。
水平居中：text-align。
垂直居中：父元素line-height与height同值，子元素vertical-align。
缺点：内层高度超出外层，无法垂直居中，会和父层同顶部(参见demo)。
.container{height:200px;/*垂直居中*/line-height:200px;/*垂直居中*/text-align:center;/*水平居中*/}.containerdiv{display:inline-block;/*核心：宽度自适应，高度可居中*/line-height:20px;/*会自动继承，必须设置不同的值来覆盖*/vertical-align:middle;/*垂直居中*/}

CSS选择符有哪些？

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
紧邻同胞选择器h1p（选的是h1后紧跟的那个p）
一般同胞选择器h1~p（选择所有跟在h1后的p）[css3]
子选择器（ul>li）
后代选择器（lia）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）

伪元素&伪类：
- 所有伪元素:::after::before::first-letter::first-line::selection
- 伪类::active,:hover,:visited:any:any-link:checked:default:defined:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:focus-visible:host:host():host-context():indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid

通配符选择器有一个非常有意思的用法，即用它构成非子选择符，比如：

section*a{font-size:1.3em;}

任何是section孙子元素，而非子元素的a标签都会被选中。至于a的父元素是什么，没有关系。

哪些属性可以继承？

所有元素可继承
visibilitycursor
内联元素可继承：
letter-spacingword-spacingwhite-spaceline-heightcolorfontfont-familyfont-sizefont-stylefont-variantfont-weighttext-decorationtext-transformdirection
font-variant：把段落设置为小型大写字母字体。
text-transform:控制文本中的字母的大小写。
块状元素可继承：
//文本块中首行文本的缩进text-indenttext-align
列表元素可继承：
list-stylelist-style-typelist-style-positionlist-style-image
表格元素可继承：
/*1.separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。2.collapse如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。3.inherit规定应该从父元素继承border-collapse属性的值。*/border-collapse
不可继承的样式：
displaypositionleftrighttopbottomz-indexheightmin-heightmax-heightwidthmin-widthmax-widthpaddingbordermarginbackgroundoverflowfloatclearvertical-align/*下面几个都没见过*/table-layout/*表格宽度是否自适应。值：automatic，fixed，inherit*/page-break-afterpage-break-before/*打印时强制分页*/unicode-bidi/*与direction合用，控制文字方向*/

CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准。

优先级为:

//同权重下，权限由高到低:1.元素标签里（行内样式/内联样式）2.写在<style>标签里（嵌入样式）3.写在单独的CSS样式表中（链接样式）4.在样式表中链接其他样式表：@importurl(css/styles2.css)//不同权重计算!important>id>class>tag//!important优先于一切!important比内联优先级高

权重计算方法：

//选择器的特殊性值表述为4个部分，用0,0,0,0表示。行间样式的特殊性是1,0,0,0ID选择器的特殊性值，加0,1,0,0。类选择器、属性选择器或伪类，加0,0,1,0。元素和伪元素，加0,0,0,1。通配选择器*对特殊性没有贡献，即0,0,0,0。!important，它没有特殊性值，但它的优先级是最高的。为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

more:详细的优先级计算方法

CSS3新增伪类有哪些？

参考：MDN-CSS新特性

伪类	说明
`:last-child`	父元素的最后一个子元素。
`:nth-child(anb)`	找到所有当前元素的子元素；按照位置先后顺序从1开始排序，选择的结果为第anb个元素的集合(n=0,1,2,...)。
`:nth-last-child(anb)`	与`:nth-child(anb)`类似，只是它从结尾处逆序计数，而不是从开头处。↪MDN
`:only-child`	属于某个父元素的唯一个一个地个子元素，即选择没有同胞的所有元素。

`:first-of-type`	父元素下，每个元素类型中，最靠前的那个。
`:last-of-type`	父元素下，每个元素类型中，最靠后的那个。
`:nth-of-type(anb)`	父元素下，每个元素类型中，第n个。找到当前元素下，同元素类型的所有子元素的集合，对每个集合按照位置先后顺序排序，选择的结果为第anb个元素的集合。
`:nth-last-of-type(anb)`	基本上和`:nth-of-type`一样，只是它从结尾处逆序计数，而不是从开头处。
`:only-of-type`	选择不同于其他同胞元素的tag类型的元素，就是说，这个元素类型的元素在其父元素下，同一级只有这一个。（类比家庭中的男孩和女孩）

`:enabled`	每个启用的的元素（主要用于表单元素）。
`:disabled`	禁用的元素（主要用于控制表单控件的禁用状态）。

`:checked`	单选框或复选框被选中。
`:indeterminate`	表示不确定状态。 1.`<inputtype="checkbox">`元素，其indeterminate属性被JavaScript设置为true; 2.`<inputtype="radio">`元素,表单中拥有相同name值的所有单选按钮都未被选中时; 3.处于不确定状态的`<progress>`元素

`:target`	`<a>`跳转`#`锚点，可设置锚点目标的样式。MDN

`:root`	匹配文档树的根元素。对于HTML来说，`:root`表示`<html>`元素，除了优先级更高之外，与html选择器相同。
`:empty`	没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。MDN 注释不算在内，但注释周围有空格就算。
`:not(X)`	匹配不符合参数选择器`X`描述的元素。 `X`不能包含另外一个否定选择器。 `:not`伪类的优先级即为它参数选择器的优先级。 `:not`伪类不像其它伪类，它不会增加选择器的优先级。 `:not(p)`将匹配任何非p元素，包括`html`和`body`。(所以用的时候千万小心，如果设置了什么color，可能会出现非自己预料的情况，比如全成一样的颜色。↪bugdemo)

display有哪些值？说明他们的作用。

display	说明
css1
none	元素不显示，并从文档流中移除。
inherit	从父元素继承display属性的值。
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
list-item	像块类型元素一样显示，并添加样式列表标记。

css2
inline-block	默认宽度为内容宽度，可以设置宽高，同行显示。
table	作为块级表格来显示。

flex	弹性元素如何伸长或缩短以适应flex容器中的可用空间。
grid	网格布局

position的值relative和absolute定位原点是？

position	说明
static	默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right,z-index声明）。
inherit	从父元素继承position属性的值。
absolute	绝对定位。不为元素预留空间，相对于最近的非static定位的祖先元素进行定位。
fixed（老IE不支持）	绝对定位。不为元素预留空间，相对于浏览器窗口进行定位。元素的位置在屏幕滚动时不会改变。
relative	相对定位。相对于其正常位置进行定位。该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。

CSS3有哪些新特性？

圆角（border-radius:8px）
新增各种CSS选择器、伪类（经常用到:nth-child）
文字渲染（Text-decoration）
转化为简写属性，可设置text-decoration-color,text-decoration-style,text-decoration-line三个属性，默认值为currentcolorsolidnone。
透明色&透明度（opacity）
旋转（transform）
旋转rotate，缩放scale，倾斜skew，平移translate
动画(animation)&过渡效果(transition)
阴影（box-shadow,text-shadow）
box-shadow:x-offsety-offsetblur-radiusspread-radiuscolor;text-shadow:x-offsety-offsetblur-radiuscolor;
新的布局方式，如多列布局multi-columns、弹性布局flexiblebox与网格布局gridlayouts
线性渐变（gradient）
多背景（background-image可以设置多个url或linear-gradient）
媒体查询(@mediaMDN)(可以看看这个)
边框可以设置图片（border-image）

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

MDN

什么是flexbox

CSS3新增布局。

Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

较为复杂的布局还可以通过嵌套一个伸缩容器（flexcontainer）来实现。

采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

在布局上有了比以前更加灵活的空间。

具体：www.w3cplus.com/css3/flexbo…

应用场景

水平垂直居中
一边定宽，一边自适应
多列等分布局
圣杯布局
stickyfooter

我在项目中的应用

stickyfooter(demo)
如果页面内容不够长的时候，footer固定在视窗底部；如果内容足够长时，footer会被内容向下推。
<divclass="detail-flex"><divclass="detail-content">detail-content</div><divclass="detail-footer">detail-footer</div></div>.detail-flexdisplay:flexflex-direction:columnposition:fixedz-index:100top:0left:0width:100%height:100%overflow:auto.detail-contentflex:10auto.detail-footerflex:00auto

用纯CSS创建一个三角形的原理是什么？

不同宽高下的border：详情请戳demo

基础

把上、左、右三条边隐藏掉（颜色设为transparent）。

div{width:0;height:0;/*div里没内容，可不写*/border-width:20px;border-style:solid;border-color:transparenttransparentredtransparent;}/*或者这样写*/div{width:0;border:100pxsolidtransparent;border-bottom-color:#343434;}

等边三角形

显示部分的宽度=transparent部分的宽度*√3

√3≈1.732

div{width:0;border:100pxsolidtransparent;border-bottom:173pxsolid#343434;}直角三角形

设置两边的宽度为0。

/*填充右下角的三角形*/div{width:0border:0solidtransparentborder-left:100pxsolidtransparentborder-bottom:100pxsolid#343434}

带边框的三角形

pendemo

两个重叠。(但是不够智能)

<divid="col1"></div><divid="col2"></div>

body,htmlmargin:0background-color:#333#col1,#col2width:0border:100pxsolidtransparentborder-bottom:173pxsolid#fff#col2position:absoluteleft:0top:2pxborder-bottom-color:#222transform:scale(0.98)

css多列等高如何实现？

参考：八种创建等高列布局

1.背景图

优点：
实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现。
缺点：
使用这种方法不适合流体布局等高列的布局；
需要更换背景色或实现其他列数的等高列时，都需要重新制作过背景图。

2.div嵌套position

demo

原理图：

优点：
不需要借助其他东西（javascript,背景图等）,而是纯CSS和HTML实现的等高列布局；
兼容所有浏览器（包括IE6），并且可以很容易创建任意列数。
缺点：
不像其他方法一样简单明了，给你理解会带来一定难度；
复杂的div嵌套，html语义不清晰（你有多少列就需要多少个容器）。

3.正padding和负margin正负值相抵

demo

原理：
利用padding-bottom|margin-bottom正负值相抵；
设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
优点：
可实现多列等高布局；
能实现列与列之间分隔线效果；
结构简单；
兼容所有浏览器。
缺点：
若希望每列四周有边框，则底部（或顶部）边框无法显示。
缺点解决办法：
1. 用和边框一致的背景图（我不喜欢这种类型的方法，后续更改很麻烦）
2. 使用div来模仿列的边框
  demo
  每列中添加一个div（可以直接用::after伪元素代替），设置定位为absolute；
  在列的上一级的wrapper中，定位relative；
  这样，就能让absolute根据wrapper的大小和位置进行定位了。

4.边框绝对定位/float“模拟”

绝对定位demo，floatdemo

感觉思路上其实与“2.div嵌套position”类似，都是在底部设置背景层，再在上面铺文字层。（我自己改了以下，这样也行↪demo）

优点：
结构简单，兼容各浏览器，容易掌握。
缺点：
受限于边框内容最多三栏，所以无法实现三栏以上的效果。

5.模拟表格布局

demo

优点：
这是一种非常简单，易于实现的方法。
缺点：
兼容性不好，在ie6-7无法正常运行。

6.flex布局

优点：
简单易用，适用于移动端。
缺点：
CSS3新功能，不兼容老的浏览器。