前端学习部分题目（补充中）

目录

• • 1.display:none与visibility:hidden的区别
  • 2.px,em,rem三者的关系
  • 3.如何实现响应式布局
  • 4.简述浮动布局及其工作原理
  • 5.简述http协议
  • 6.伸缩盒布局的核心概念，常用规则，使用技巧
  • 7.一个盒子在另一个盒子水平居中
  • 9.块级元素与行内元素的区别
  • 10.简述get和post请求及其区别
  • • 11.HTML的核心元素有哪些
  • 12.外边距合并问题
  • 13.盒模型
  • 14.清除浮动
  • 15.css三列布局
  • • • 2.方法二：margin负值法
      • 3.方法三：绝对定位法

1.display:none与visibility:hidden的区别

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
visibility:hidden比display:none性能上要好，display:none切换显示时,页面会产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加 载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

2.px,em,rem三者的关系

1.px像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2.em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。1em=16px
3.rem是CSS3新增的一个相对单位（root em，根em），相对的只是HTML根元素。

3.如何实现响应式布局

1.通过媒体查询，可以通过@media来进行媒体查询，当网页显示再不同的网页时加载执行不同的css代码（当页面结构发生改变时）
2.通过浮动布局，定位布局，flex布局（只有盒子的宽高发生改变时）

4.简述浮动布局及其工作原理

1.浮动布局用来解决块元素在x轴上的布局排列问题
2.浮动布局通常出现在div>div这种父子级结构中，为子元素添加浮动特性
3.一个元素如果成为浮动元素，那么这个元素就会脱离文档流：宽度如果没有指定则有内容决定；不在占据屏幕空间；同一级别的浮动元素会在一行排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素的支撑；
4.如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流) ​
可选值： ​
none，默认值，元素默认在标准流(文档流/普通流)中排列 ​
left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动 ​
right，元素会立即脱离 标准流(文档流/普通流)，向页面的右侧浮动

5.简述http协议

http协议是超文本传输协议，常用于BS架构中，为数据在网络传输中规定 协议。
HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它 是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说， 请求通常是由像浏览器这样的接受方发起的。
HTTP报文的分类有两种：请求报文和响应报文。顾名思义，请求报文就是 客户端向服务端发送请求的信号，响应报文就是服务端响应处理后回传给客 户端的信号。
请求报文：浏览器会将前端请求封装成请求报文发送给后端，HTTP 请求报文由四部分组成，分别是请求行、请求头、空行和请求体，其中空行也是组成部分之一，作用是进行分隔，必不可少
响应报文：服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文

6.伸缩盒布局的核心概念，常用规则，使用技巧

1、核心概念：

主轴、交叉轴、伸缩盒容器、伸缩盒元素

2、常用规则：

2.1、伸缩盒容器相关规则：display、flex-wrap（定义沿主轴元素是否换行）、flex-direction（定义主轴方向）、align-items（交叉轴排列方式）、 justify-content（主轴的对齐方式）、align-content（多行项目的对齐方式）
2.2、伸缩盒元素相关规则： flex-basic（默认auto，用于设置项目宽度）、flex-grow（默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；）、flex-shrink（默认1，用于决定项目在空间不足时是否缩小，默认项目都是1）、flex（默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。）

3、使用技巧：

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

7.一个盒子在另一个盒子水平居中

1.margin:0 auto;
2.定位布局居中方式
3.flex布局 justify-content:center

8.文本在盒子中垂直居中

1.设置行高与line-height相同
2.利用line-height和vertical-align: middle;
3.flex布局，align-items:center

9.块级元素与行内元素的区别

1.块级独占一行，行内共享一行
2.块级可以直接设置宽高，而行内不能直接设置宽高（通过css的display属性，设置为inline-block/block,这样就可以给行内元素设置宽高 （img,input特殊行内，可以直接设置宽高，（置换元素）））
3.块级可以包含行内和块级，而行内只能包含行内

10.简述get和post请求及其区别

get

传输数据量小，一般不超过1024个字符
GET方法把参数以及参数值都暴露在URL中，不利于数据的保密和安全。
使用GET方法请求时，请求参数和对应的值是跟在URL后面，通过问号（“?”）和and连接符（“&”）以及“=”号连接。
没有请求体

post

传输数据量大
参数携带在请求体中，所以需要在代码中对参数进行封装，封装完毕传入接口
保密性高，安全性高

区别

1.传输数据量
2.参数携带
3.数据保密性

11.HTML的核心元素有哪些

id，class，title，style

12.外边距合并问题

1.父子级：

①给父元素添加边框 ②给父元素清除浮动 ③给父子元素一方设置display：inline-block

2.兄弟级：

将margin设置到一个元素上

13.盒模型

W3C盒子（默认盒子，标准盒子）border-sizing:content-box

width、height content内容区宽高
盒子的宽：width+padding-left+padding-right+border-left+border-right
盒子的高：height+padding-top+padding-bottom+border-top+border-bottom
所占屏幕区域的宽：盒子的宽+左右margin
所占屏幕区域的高：盒子的高+上下margin

IE盒子 box-sizing:border-box

width、height 盒子的宽高
盒子的宽：width
盒子的高：height
所占屏幕区域的宽：盒子的宽+左右margin
所占屏幕区域的高：盒子的高+上下margin

14.清除浮动

父子级：

1.在子级元素后添加一个空元素，为其添加clear:both 弊端：增加了无意义的元素结构
2.给父级元素设置一个overflow:hiddden 解决了第一种方法的弊端
3.::after 为需要清除浮动元素的伪对象中设置
（用伪类清除浮动时用::after，并且加上content：""可以加内容也可以不加，但是一定要加上display:block；同时还要写clear：both；）

.clearfix::after{
​           /*添加一个内容*/
​           content: "";
​           /*转换为一个块元素*/
​           display: block;
​            /*清除两侧的浮动*/
​           clear: both;
​      }

兄弟级：

给当前元素（被浮动影响的元素）设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。

15.css三列布局

1.方法一：自身浮动的方法

实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离

注意：

该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定

2.方法二：margin负值法

实现方法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度

注意：

该方法在html布局时，要把中间栏放在第一个
此方法是实现圣杯布局和双飞翼布局的基础。

3.方法三：绝对定位法

实现方法：左栏、右栏绝对定位，分别固定到页面左右两侧，中间栏不设宽度，用左右margin来撑开距离