CSS常见重点面试题

CSS常见重点面试题

(1) 盒子模型：外边距+边框+内边距+内容

计算方式：

①box-sizing: content-box; width=内容+内边距+边框
​②box-sizing: border-box; width=width（内边距和边框挤占内容区）

展示方式：块级block（独立占据一行）、行内inline（只占据内容区域大小，不能设置宽高）、inline-block（可设置宽高）

注意：

• 如果两个盒子上下相邻，那么他们的margin是两个中较大的一个，解决外边距折叠只需设置为inline-block
• 如果父元素没有指定高度，子元素设置浮动，会导致父元素塌陷，解决方案为给父元素设置overflow:hidden（bfc）
• 如果给盒子设置背景色，padding区域会被上色
• 如果给鼠标设置悬停状态cursor: pointer，padding和border区域会受影响

(2) css权重值

内联样式：1-0-0-0

id选择器：1-0-0

类、属性、伪类选择器：0-1-0

元素 / 标签选择器：0-0-1

通配符：0

css优先级规则：

• 先从等级进行比较，高等级>低等级
• 完全相同时，后者覆盖前者
• css后面加!important时，优先级最高

(3)弹性布局

容器属性：6个（主轴默认水平方向、交叉轴为垂直方向）

1. flex-direction定义主轴方向（row水平、column垂直、row-reverse水平反向、column-reverse垂直反向）
2. justify-content定义元素在主轴上的对齐方式（flex-start主轴前对齐、flex-end后对齐、center居中、space-between等距首尾、space-around等距两边、space-evenly等距容器）
3. align-item定义子元素在交叉轴对齐方式（flex-start交叉轴前对齐、flex-end后对齐、center居中、baseline文字基线、stretch拉伸）
4. flex-wrap超出容器轴线长度自动换行（wrap换行、nowrap不换行、wrap-reverse行序反向）
5. align-content定义多行项目在交叉轴的对齐方式（flex-start交叉轴前对齐、flex-end后对齐、center居中、stretch拉伸、space-between等距首尾、space-around等距两边）
6. 项目属性flex：flex-grow（默认值0，按容器剩余空间的比例放大元素填充容器），flex-shrink（默认值1，按被挤压空间的比例缩小元素），flex-basis（默认值auto，根据主轴长度分配）。

注意：第六点中的三个属性简写和分开写效果可能不一致，建议使用简写，例如flex-basis:0,1,auto

(4)css定位

position定位：static静态、relative相对、absolute绝对、fixed固定、sticky粘性

1. static：默认值，不需要定位
2. fixed：相对于浏览器窗口进行定位，脱离文档流，固定在窗口指定位置
3. sticky：在浏览器窗口到达指定位置阈值时，会显示出fixed特性，其他情况保持原有特性，固定时原有位置为空白，不脱离文档流，受父元素容器影响
4. relative：相对元素本身位置进行移动，元素仍处于文档流中，占据原来的空间，不影响其他元素的位置
5. absolute：参照所有已定位的父元素进行定位，如果父元素没有定位会向上寻找，直至根元素html，如果根元素也没有定位，则以浏览器左上角为参照物。脱离文档流，不占据原来空间，可能会影响其他元素。可通过z-index调整层级。绝对定位必须指定位置（指定top和left），否则它会待在原来的位置

(5)隐藏元素的方法

1. display: none;彻底隐藏元素，不占据空间，会影响布局。
2. visibility: hidden;隐藏某个元素，但是元素仍然占用空间，元素没有脱离标准流，不会改变页面布局。
3. opacity: 0; CSS3属性，设置透明度为0，元素没有脱离标准流，不会改变页面布局。
4. position: absolute;将元素移除屏幕外，达到不可见效果
5. clip-path: polygon();将元素进行裁剪为0*0的大小，元素的本身大小不变。
6. transform: scale(0);将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。

(6)回流和重绘

回流一定会触发重绘，但重绘不一定触发回流。

引起回流的动作：

1. 首次渲染页面
2. 添加或删除元素
3. 改变元素大写（内外边距、边框、宽高）
4. 改变元素位置
5. 改变元素内容
6. 改变字体大小
7. 调整浏览器窗口大小
8. 查询某些属性或调用某些方法

避免回流的方法：

1. 避免频繁操作样式
2. 避免频繁操作DOM
3. 避免多次访问特定属性或方法（clientTop、scrollTop、offsetTop、getComputedStyle()、getBoundingClientRect()等）
4. 使用绝对定位使执行的动画脱离文档流
5. 触发css3硬件加速（触发其属性有transform、opacity、filters、will-change）

(7)BFC

BFC全称叫做块级格式化上下文，让元素成为一个独立的空间，空间内的子元素不受外界影响也不影响外面布局。

触发BFC的方式：

1. body根元素本身就是一个bfc
2. 浮动元素：除none外
3. 绝对定位：position（absolute、fixed）
4. display的值是inline-block、table-cell、flex
5. overflow除visible外的值（hidden、auto、scroll）

BFC作用：

• 阻止浮动元素被覆盖
• 阻止margin重叠
• 解决浮动高度塌陷
• 自适应两栏布局

(8)CSS3新增属性

• box-shadow 盒子阴影、
• border-radius 圆角、
• box-sizing 盒子模型、
• linear-gradient, radial-gradient渐变、
• transition过度、
• animate动画、
• transform2D 转换/3D 转换、
• iconfont字体图标、
• flex 弹性布局。

(9)css单位

相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位 cm、mm、in、px、pt、pc

• px：和当前操作系统视窗分辨率有关
• em：和父级元素的字体大小有关，即父级元素的字体大小的n倍，如果父级元素没有设置，一直找到html顶级元素为止。浏览器的默 认字体尺寸（1em = 16px）
• rem，相对单位，相对的只是HTML根元素font-size的值
• vh/vw，和浏览器当前尺寸有关，即根据窗口的宽度，分成100等份，100vw就表示满宽
• %：和父级元素的size有关，而vh/vw是同浏览器的size有关，二者均为百分比只不过参考不同
• vmin/vmax，和设备当前分辨率有关，关于视口高度和宽度两者的最小值或者最大值

(10)css选择器

• 常用选择器：id选择器（#ele）、类选择器（.ele）、元素选择器（标签）、通配符选择器（*）
• 群组选择器（并集选择器）：选择器1，选择器2，选择器n{ }
• 关系选择器：后代选择器（.box p）、子代选择器（.box>p）、相邻兄弟选择器（.box+p即选中后面第一个兄弟p）、通用兄弟选择器（.box~p即选中后面所有的兄弟p）
• 属性学择器：
  • a[title]：选择到a标签且有title属性的
  • 某某[属性=属性值] ：选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不行
  • a[class^=“li”] ：a标签有class属性且属性值是li开头的
  • a[class$=“t”]：a标签有class属性且属性值结尾是t的
  • a[href*=“b”]：选择到a标签且有href属性且只要有字母b就可以
  • a[class~=“item”]：选择到的是a标签且有class属性,且属性值有完整的itme词的变
  • a[title|=“link”]：这个是选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的
• 伪类选择器

(11)伪类和伪元素（调一些常用的记忆）

css伪类

:hover		   将样式添加到鼠标悬浮的元素 
:active		   将样式添加到被激活的元素 
:focus 		   将样式添加到获得焦点的元素
:link  		   将样式添加到未被访问过的链接 
:visited  	   将样式添加到被访问过的链接
:first-child   将样式添加到元素的第一个子元素
:lang		   定义指定的元素中使用的语言

css3新增

p:first-of-type			选择属于其父元素的首个<p>元素
p:last-of-type 			选择属于其父元素的最后<p>元素
p:nth-child(n) 			选择属于其父元素的第 n 个子元素并且必须是<p>元素
p:nth-last-child(n) 	选择属于其父元素的倒数第 n 个子元素并且必须是<p>元素
p:nth-of-type(n) 		选择属于其父元素第 n 个<p>元素
p:nth-last-of-type(n)   选择属于其父元素倒数第 n 个<p>元素
p:last-child 			选择属于其父元素最后一个子元素的并且必须是<p>元素
p:target 				和锚点链接一起使用
URL 					带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 				选择器可用于选取当前活动的目标元素。
:not(p) 				选择非<p>元素
:enabled 				选中不在禁用状态下的表单控件
:disabled 				选中禁用状态下的表单控件
:checked 				选中 单选框或复选框被选中 的元素

伪元素：

::first-letter 			将样式添加到文本的首字母
::first-line 			将样式添加到文本的首行
::before 				在某元素之前插入某些内容
::after 				在某元素之后插入某些内容

(12)清除浮动

为什么要清除浮动：由于浮动的盒子脱离标准流，如果父盒子没有设置高度的话，会导致父元素塌陷。

清除浮动的方式：

1. 直接设置父元素高度（弊端：必须要知道父元素高度）
2. 设置父元素浮动（弊端：对后续元素可能会有影响）
3. 父元素overflow的属性值设置为hidden、scroll或者auto。（弊端：如果有内容要溢出显示，也会被一同隐藏。）
4. 父元素的display属性设置为table或者position：fixed（弊端：盒模型属性已经改变，会造成其他问题）
5. 在父元素里，追加一个空的子元素（如div），然后设置其clear属性（ 弊端：会添加许多无意义的空标签）
6. 利用伪元素，给父元素的类名添加一个.clearfix工具样式（推荐）

                .clearfix::after{
                  content:"";
                  display:block;
                  clear:both;
                }

7. 清除浮动的同时又让同属一个bfc的相邻元素不发生margin重叠

                .clear:before,.clear:after{
                  content:"";
                  display:table;
                }
                .clear:after{
                  clear:both
                }

原理：display:table本身无法触发BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以触发BFC

声明：以上内容来源于自己面试经验和网上资料总结