前端面试题-1

1 块级与行内区别：

• 块级独占一行，行内共享一行
• 块级可以直接设置宽高，而行内不行（通过CSS的display:block / inline-block属性可以给行内元素设置宽高）
• 块级可以包含行内与块级，而行内只能包含行内

2 清除浮动：

1. 兄弟级：

​ （1）额外标签法：在浮动元素后添加一个空元素，为其添加clear:both

2. 父子级：

• （1）额外标签法

  ​ 在子级元素（最后一个浮动元素）后添加一个空元素，为其添加clear:both

​ 弊端：增加了无意义的元素结构

• （2）给父级元素添加overflow属性

  ​ 给父级元素设置一个overflow:hiddden 解决了第一种方法的弊端

• （3）使用after伪元素清除浮动

  ​ 使用通过伪元素 ::after清除浮动

  .father::after{ 
  	/* 1.添加一个空白的content -> 在父元素后面添加一个空白的元素*/
  	content:'';
  	/* 2. 利用display切换显示模式 */
  	display: block;
  	/* 3.清除浮动 */
  	clear: both;
  } 
  

• ::after 为需要清除浮动元素的伪对象中设置height:0，
  #layout:after{
  clear:both;
  content:”";
  visibility:hidden;
  height:0;}

3 水平垂直居中的方法：

.outter{
	width: 300px;
	height: 300px;
	border: 2px solid red;
}
.inner{
	width: 100px;
	height: 100px;
	background-color: blue;
}
<div class="outter">
    <div class="inner"></div>
</div>

• （1）通过margin设置水平垂直居中

  ​ 垂直方向设置：（父元素高度-子元素高度）/2

/*给inner类设置：*/
.inner{
	margin: 100px auto;
}

• （2）通过绝对定位和margin设置宽高

  ​ 给父元素设置相对定位、子元素绝对定位

  ​ 只需要设置绝对定位元素的left:50%;
  ​ 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

.outter{
	position: relative;
}
.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
}

• （3）通过flex布局

  想要使一个子元素垂直水平居中，只需要设置其父元素

justify-content: center; /* 水平居中 */
align-items: center;     /* 垂直居中 */

• **（4）绝对定位 margin:auto **

给子元素设置绝对定位，top、bottom、left、right设置为0，margin设置为auto

.outter{
	position: relative;
}
.inner{
	position: absolute;
	top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

• （5）绝对定位 transform（不确定宽高时）

采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

.outter{
	position: relative;
}
.inner{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

4 在css3中如何计算同一个规则的优先级

​ 权重：

• ！import ，权值无限大

• 内联样式，如: style="…"，权值为1000。

• ID选择器，如：#content，权值为0100。

• 类，伪类、属性选择器，如.content，权值为0010。

• 标签选择器、伪元素选择器，如div p，权值为0001。

• 通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。

• 继承的样式没有权值

  计算规则：

• 首先先计算选择器中有多少个id, id多的选择器优先级最高

• id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高

• 类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

• id、 类名、 标签名称个数也一样, 那么此时谁写在后面听谁的

5 简述css3的盒子模型

见 7-CSS盒模型

6 简述伸缩盒布局中的核心概念、常用规则、使用技巧

1、核心概念：主轴、交叉轴、伸缩盒容器、伸缩盒元素

2、常用规则：

2.1、伸缩盒容器相关规则：display、flex-wrap、flex-direction、align-items、justify-content

2.2、伸缩盒元素相关规则： flex-basic、flex-grow、flex-shrink、flex

3、使用技巧：

	伸缩盒容器常用于列级布局，与浮动布局类似可以将多个块元素在一行	中显示，伸缩盒更简单一些，只需要为容器盒子添加display:flex属性，这个	容器盒子就变成了伸缩盒容器，其子元素伸缩盒元素就会沿着主轴来排列，默认主轴是x轴，可以通过flex-direction来改变主轴。

7 简述http协议

• http协议是超文本传输协议，常用于BS架构中，为数据在网络传输中规定协议。
• HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。
• HTTP报文的分类有两种：请求报文和响应报文。顾名思义，请求报文就是客户端向服务端发送请求的信号，响应报文就是服务端响应处理后回传给客户端的信号。

请求报文: 浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体

响应报文: 服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。响应报文中包含响应行、响应头、响应体

(具体查看对应笔记)

8 简述浮动布局以及其工作方式

• 浮动布局用来解决块元素在x轴上排列的问题

• 浮动布局通常出现在 div>div 这种父子结构中，为子元素添加浮动特性

• 一个元素如果成为浮动元素，那么这个元素就会脱离文档流：宽度如果没有指定则由内容决定；不再占据屏幕空间；同一级别的浮动元素会在一行排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑；

• 如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)

  可选值：

  none，默认值，元素默认在标准流(文档流/普通流)中排列

  left，元素会立即 脱离标准流(文档流/普通流)，向页面的左侧浮动

  right，元素会立即脱离 标准流(文档流/普通流)，向页面的右侧浮动

9 如何实现响应式布局

• 通过媒体查询，可以通过@media来进行媒体查询，当网页显示在不同的网 页中加载执行不同的css代码(当页面结构发生改变时)
• 通过浮动布局，定位布局，flex布局(只有盒子的宽高需要改变时)

10 说明px、 em 、 rem三者关系

• px为长度单位，表示一个像素点
• em为相对长度单位，表示当前元素上的字体大小
• rem为相对长度单位，表示根（html）元素上声明的字体大小

11 display:none与visibility:hidden的区别

• display : 隐藏对应的元素但不挤占该元素原来的空间。
• visibility: 隐藏对应的元素并且挤占该元素原来的空间。

扩展: 使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。