css面试题整理

落日映苍穹つ 2023-02-20 13:37 4阅读 0赞

## css面试题整理 ##

### 1.垂直居中的方法 ###

1.display:inline-block;vertical-align:middle
    2.父元素：display:flex;子元素：align-self:center 3.父元素添加伪元素： 父元素::before{ 
    			content:””;
    			display:inline-block;
    			vertical-align:middle;
    		}
    4.父元素：display:table
    子元素：display:table-cell;vertical-align:middle 5.{ 
    	position:relative;
    	top:50%;
    	transform:translateY(-50%)
    }
    6.父元素：{ position:relative}
    子元素：{ 
    		position:absolute;
    		top:50%;
    		tranform:translateY(-50%)
    	}

### 2.link和import的区别 ###

**link**：属于XHTML标签，除了加载css，还能用于定义Rss，定义rel连接属性等作用，页面被加载时同时被加载，无兼容问题；  
**import**：css提供的，只能用于加载css，页面加载完成后在加载，只能使用于IE5以上。

### 3.圣杯布局、双飞翼布局 ###

两者都是**两端固定中间自适应的三栏布局**  
**圣杯布局**：

1.一个大盒子包裹三小个盒子左浮动，  
2.中间盒子宽度100%，大盒子利用**padding**值撑开两侧盒子，  
3.左侧margin负值100%到左侧，右侧margin负值自身宽度一半，  
4.两侧盒子相对定位，左侧盒子left值为负的自身宽度，右侧盒子right值为负的自身宽度。  
**双飞翼布局**：

1.三个盒子左浮动，main宽100%；  
2.left盒子margin负值100%，right盒子margin负值自身宽度；  
3.content盒子两侧**margin**撑开两侧盒子。

### 4.盒子垂直且水平居中的办法 ###

1.box{ 
    	position:absolute;
    	margin:auto;
    	left:0;
    	right:0;
    	top:0;
    	bottom:0
    }

2.box:{ 
    	position:absolute;
    	top:50%;
    	left:50%;
    	transfrom:translate(-50%,-50%)
    }

3.css3新增属性：父元素添加属性：\{display:table-cell;vertical-align:middle\}

4.flex布局：父元素添加：
    { 
    	display:flex;
    	justify-content:center;（水平居中）
    	aligin-item:center（垂直居中）
    }

### 5.css盒模型 ###

包含：margin、padding、border、content  
**margin**：外边距，清除边框外区域，透明；  
**padding**：内边距，清除内容周围区域，透明；  
**border**：边框，围绕在内边框和内容外的边框；  
**content**：盒子的内容，显示文本图像

### 6.清除浮动 ###

1.父元素添加固定宽度  
2.父元素定义overflow:hidden  
3.在父元素末尾添加一个空节点，并添加clear:both属性  
4.父元素定义双伪元素清除浮动：

::after{ 
    	display:block;
    	clear:both;
    	content:””;
    	visibility:hidden;（隐藏盒子并占据位置）
    }

### 7.常见的浏览器兼容 ###

1.图片默认有间距，解决：float为img布局  
2.不同浏览器的标签默认外补丁margin和内补丁padding不同，  
解决：`*通配符*{margin：0；padding：0}`  
3.li空白间距，解决：在li中的a标签添加宽度或高度  
4.快标签属性float后，又有横行的margin情况下，在ie6显示margin比设置的大，后面一块会被顶到下一行，解决：在float标签样式中添加display：inline，将其转化为行内属性

### 8.优先级 ###

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

### 9.了解重绘和重排，怎么减少重绘和重排 ###

**repaint**:就是当各种盒子属性(大小，颜色。。。)都确定下来后，**浏览器**便把这些元素都**按照各自的特性**绘制一遍，于是页面的内容出现了的过程。  
**reflow**:当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等**改变**而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。  
**解决**：在制作中考虑浏览器的性能，减少重排能够节省浏览器对其子元素及父类元素的重新渲染；避免过分的重绘也能节省浏览器性能；优化动画，使用3D启用GPU硬件加速；慎重选择高消耗的样式，如box-shadow、border-radius、transform、css filters等。

### 10.box-sizing的语法和基本用处 ###

box-sizing规定两个并排的带边框的框，语法为box-sizing：content-box/border-box/inherit  
**content-box**：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框，简单地说盒子边框与内边距不算在设置的宽高中。  
**border-box**：为元素设定的宽度和高度决定了元素的边框盒，简单地说盒子边框与内边距一起算在设置的宽高中  
**inherit**：继承父元素的box-sizing

### 11.使得元素消失的方法 ###

1.把元素放在了屏幕看不到的位置

{ 
    	position:absolute;
    	top:-999px;
    	left:-999px;
    }

2.display:none（元素消失且不占据位置）  
3.visibility:hidden（元素消失但是占据位置）  
4.opacity:0（元素透明）  
5.transform:rotate(90deg)，将二维图像旋转90度呈现出消失的样子。

### 12.flex布局（主轴和交叉轴的理解） ###

##### **flex-direction** #####

决定主轴的方向（即项目的排列方向）。  
row | row-reverse | column | column-reverse;

*  **row（默认值）**：主轴为水平方向，起点在左端。
 *  **row-reverse**：主轴为水平方向，起点在右端。
 *  **column**：主轴为垂直方向，起点在上沿。
 *  **column-reverse**：主轴为垂直方向，起点在下沿。

##### flex-wrap #####

nowrap | wrap | wrap-reverse（换行，第一行在下方，如图）;  
![在这里插入图片描述][20200627143544850.png]

##### justify-content #####

定义了项目在主轴上（水平方向）的对齐方式。  
flex-start | flex-end | center | space-between | space-around

*  **flex-start**（默认值）：左对齐
 *  **flex-end**：右对齐
 *  **center**： 居中
 *  **space-between**：两端对齐，项目之间的间隔都相等。
 *  **space-around**：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

##### justify-items #####

定义项目在主轴上如何对齐。  
flex-start | flex-end | center | baseline | stretch;

*  **flex-start**：主轴的起点对齐。
 *  **flex-end**：主轴的终点对齐。
 *  **center**：主轴的中点对齐。
 *  **baseline**: 项目的第一行文字的基线对齐。
 *  **stretch**（默认值）：占满整个容器。

##### align-content #####

*  **flex-start**：与交叉轴的起点对齐。
 *  **flex-end**：与交叉轴的终点对齐。
 *  **center**：与交叉轴的中点对齐。
 *  **space-between**：与交叉轴两端对齐，轴线之间的间隔平均分布。
 *  **space-around**：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
 *  **stretch**（默认值）：轴线占满整个交叉轴。

##### align-items #####

定义项目在交叉轴上如何对齐。  
flex-start | flex-end | center | baseline | stretch;

*  **flex-start**：交叉轴的起点对齐。
 *  **flex-end**：交叉轴的终点对齐。
 *  **center**：交叉轴的中点对齐。
 *  **baseline**: 项目的第一行文字的基线对齐。
 *  **stretch**（默认值）：项目未设置高度或设为auto，将占满整个容器的高。

[20200627143544850.png]: https://img-blog.csdnimg.cn/20200627143544850.png