每日面经的学习记录

HeyWyy
152 阅读5分钟

介绍下 BFC 及其应用

BFC（Block Formatting Context） 是 块级格式上下文，提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。通俗理解BFC就是一个独立容器，这个容器里面的元素不会影响外界元素，当然也不会被外界元素影响。

创建BFC：

  • float浮动
  • overflew的值不为visible
  • display为表格布局或弹性布局
  • 绝对定位（position的值不为relative和static）

给父元素添加以下属性来触发BFC：

  • float 为 left | right
  • overflow 为 hidden | auto | scorll
  • display 为 table-cell | table-caption | inline-block | flex | inline-flex
  • position 为 absolute | fixed

BFC的约束规则：

  • 内部的box会在垂直方向上一个一个放置
  • 属于同一个BFC的相邻Box在竖直方向上margin会发生重叠
  • BFC中的box的左边缘（margin-left）会与包含块的左边(border-left)相接触
  • BFC的区域不会与float区域重叠
  • 计算BFC高度时，浮动元素也要计算

BFC的作用：

  • 不和浮动元素重叠(可实现左图右文之类的效果)
  • 清除元素内部浮动（会将元素内的浮动元素的高度也计算进去）
  • 防止垂直margin重叠（令两个元素不在同一个BFC就可以）

怎么让一个div水平垂直居中

详细答案点击这里或者这里!

<div class="parent">
  <div class="child"></div>
</div>

常用的方式：

div.parent {
    display: flex;
    justify-content: center;   //竖直居中
    align-items: center;       //水平居中
}

  1. transform是CSS3的内容哦，到这里查看吧

    //绝对定位

div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

  2. 我太喜欢这个方法啦

     div.parent{
   display:flex;
 }
 div.child{
   margin:auto;
 }

Cookie和Session的区别

详细参考：session和cookie的区别

cookie ：客户端请求服务器时，服务器给当前浏览器生成的、存放在客户端的一小段文本信息（有大小限制，一般为4k），可以在request的header里查看。

通俗理解，cookie就是一个验证身份的通行证。好比如，今天在浏览器输入用户名密码登录了，第二天就不需要重复输入用户名密码了，因为服务器已经通过cookie验证你的身份了。

  • cookie有时效性，分为会话cookie和持久cookie。会话cookie存储在内存中，当关闭浏览器时，会话cookie就会被回收。持久cookie就是给cookie设置了过期时间，它会被储存在硬盘中，在过期时间内它会一直有效。
  • cookie不太安全，安全考虑建议用session
  • cookie跨域不可共享

session : 是另一种记录用户状态的机制，客户端访问服务器时，服务器将用户信息记录在session中，当再次访问的时候，只需要根据sessionId来找到该用户的状态就可以了。

通俗的讲，session记录每个用户的行为和信息，我们只需要根据sessionId对号入组就可以找到自己的状态信息（session）了

当浏览器请求服务器时，服务器会首先检查这个客户端的请求头信息中是否含有sessionId,如果没有会创建一个；如果有，就说明已经为这个浏览器创建过session，只需要按照sessionId把对应的session找出来就可以了。

总结

  • cookie是存储在客户端，session是存储在服务器
  • 考虑安全的话，建议选择session而不是cookie，可以将重要信息放在session，而其他信息放在cookie中
  • cookie是验证身份的通行证，session是记录用户状态的档案袋
  • cookie有限定大小，不能超过4k
  • session保存在服务器上，当访问人数过多时，会占用服务器的性能、

应用场景

  • 登录网站，今输入用户名密码登录了，第二天再打开很多情况下就直接打开了。这个时候用到的一个机制就是cookie。
  • session一个场景是购物车，添加了商品之后客户端处可以知道添加了哪些商品，而服务器端如何判别呢，所以也需要存储一些信息就用到了session

比较分析display:none、opacity:0、visibility: hidden的优劣和适用场景

他们都能元素不可见

结构

display:none :会让元素完全从渲染树中消失，渲染的时候不占任何空间，不可点击 visibility:hidden : 不会让元素从渲染树消失，渲染元素继续占用空间，不可点击 opacity:0 : 不会让元素从渲染树消失，渲染元素继续占用空间，可以点击

继承

display:none和opacity:0是非继承属性，子孙节点消失由于元素从渲染树消失造成，无论子孙系元素如何挣扎（修改子孙节点属性）也无法显示

visibility:hidden是继承属性，子孙节点消失由于继承了hidden属性，只要设置visibility:visible就可以让子孙节点显示

性能

display:none : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ： 修改元素会造成重绘，性能消耗较少

avatar
文章
阅读
粉丝