H5+C3面试题

最新推荐文章于 2024-04-13 22:23:49 发布

跟影子说丨晚安

最新推荐文章于 2024-04-13 22:23:49 发布

阅读量577

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_44177602/article/details/114139720

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

响应式布局

媒体查询：通过窗口大小、屏幕比例来改变页面上显示

响应式布局：在不同屏幕下，通过媒体查询来改变布局容器大小，然后改变里面的子元素排列方式和大小，从而实现不同屏幕下，页面布局方式和样式改变

@media screen and (max-width:575px){//小于575px
	.content{width:100%}
}
@media screen and (min-width:576px){//大于等于576px
	.content{width:540px}
}
@media screen and (min-width:768px){//大于等于768px
	.conmtent{width:720px}
}
@media screen and (min-width:992px){//大于等于992px
	.content{width:920px}
}

rem：根节点字体的的大小决定了rem的大小，1rem=根节点的px

html{font-size:14px} div{font-size:10rem} //10*14=140px

弹性盒布局

弹性盒：改进了块模型，既不使用浮动，也不会合并弹性盒容器与内容之间的外边距

display:flex;
justify-content:center;//space-between	space-around
align-items:center;//flex-start	flex-end
flex-direction:cloumn;		主轴方向
flex-warp:warp;// no warp	是否换行

定位布局

position：fixed；固定定位
position：absolute；绝对定位，不会占用原位置
position：relative；相对定位，会占有原位置

浮动布局

float:right/left

弹性布局flex：1详解

flex是flex-grow、flex-shrink、flex-basis的缩写：默认是flex：0 1 auto；flex:1;对应的是 1 1 auto

flex-grow：属性定义弹性盒子项的拉伸因子
flex-basis 指定了 flex 元素在主轴方向上的初始大小
flex-basis 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕

两栏布局，一边宽度固定，一边宽度自适应

/*1. float布局：谁固定谁浮动并且设置宽度，另外的overflow */
/* 左边固定200px，右边自适应	简单 */
.son1{
    float:left;
    width:200px;
    margin-right:20px
    background-color: red;
}
.son2{
    overflow:hidden;
    background-color: pink;
}
<div class="father">
      <div class="son1">
        left
      </div>
      <div class="son2">
        right
      </div>
</div>
/*左边自适应，右边固定200px 	在一个div中存在浮动和不浮动元素，浮动元素要先写，不然被不浮动元素占据，显示效果不在一行*/
.son1{
    overflow:hidden;
    background-color: pink;
}
.son2{
    float:right;
    width:200px;
    margin-left:20px;
    background-color: red;
}
<div class="father">
		<div class="son2">
        	right
      	</div>
      	<div class="son1">
       		left
      	</div>
</div>

/*2. position布局：父相对定位，谁固定谁绝对定位并且设置宽度*/
.parent{
    position:relative;
    max-width:1200px
}
/*左边固定200px，右边自适应*/
.left{
    position:absolute;
    width:200px;
    background-color: pink;
}
.right{
    margin-left:200px
    background-color: red;
}
/*左边自适应，右边200px*/
.left{
    background-color: pink;
    margin-right:200px
}
.right{
    position:absolute;
    width:200px;
    top:0;
    right:0
    background-color: red;
}
<div class="parent">
      <div class="left">left</div>
      <div class="right">right</div>
</div>

/*3. flex布局：父display:flex，谁自适应谁给flex1*/
.parent{
    display:flex;
    margin:0 auto;
    max-width:1000px;
}
/*	左固定，右自适应*/
.left{
    width:200px;
    background-color: pink;
}
.right{
    flex:1;/*让该项占据剩余空间*/
    margin-left:20px;
    background-color: red;
}
<div class="parent">
      <div class="left">left</div>
      <div class="right">right</div>
</div>

三栏布局，左右固定，中间自适应

/*1.flex布局*/
.container{
    display:flex;
    justify-content:center;
    height:100px;
}
.left{
    width:200px;
    background-color: red;
}
.main{
    flex:1;
    background-color: pink;
}
.right{
    width:200px;
    background-color: yellow;
}
<div class="container">
      <div class="left">1</div>
      <div class="main">2</div>
      <div class="right">3</div>
</div>

/*2.绝对定位布局*/
.container{
    position:relative;
}
.left{
    position:absolute;
    width:200px;
    left:0;
    top:0;
    background-color: red;
}
.main{
    margin: 0 200px;
    background-color: pink;
}
.right{
    position:absolute;
    width:200px;
    right:0;
    top:0;
    background-color: yellow;
}
/*3.使用浮动	使用float实现三栏布局，需要将中间的内容放在html最后，否则最后一个会下沉*/
	.container{
      height: 200px;
    }
    .left{
      float: left;
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
    .right{
      float: right;
      width: 200px;
      height: 200px;
      background-color: aqua;
    }
    .center{
      background-color: red;
      height: 200px;
    }
/*4.圣杯布局 	*/

垂直居中

absolute定位，left、top都设置50%，margin-top、margin-left设置宽高一半的负值

.son{
    position:absolute;
    width:200px;
    height:200px;
    left:50%;
    top:50%;
    margin-top:-100px;
    margin-left:-100px
}

absolute定位，left、top都设为50%，设置偏移量transform: translate(-50%, -50%)

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

absolute定位，top、right、bottom、left都设置0，再margin：auto

.son{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

flex布局，justify-content、align-items

.son{
display:flex;
justify-content:center;
align-items:center;
}

CSS性能提高

将样式单独写在css文件，在head元素中引用
不适用@import
避免使用复杂的选择器，层级不要超过三层
利用css继承减少代码量

前端优化

降低请求量：合并资源，减少http请求数
加快请求速度：预解析DNS，减少域名数
缓存：HTTP协议缓存请求
渲染：JS/CSS优化，加载顺序、服务端渲染

H5面试题

行内元素与块元素
1. 行内元素：i span img input select
2. 块元素：div ul li p h1
link与@import区别
1. link是html标签，除了引用css外还可以引用其他，而@imoprt只能引入css
2. link引入css与页面加载是同时进行的，而@import是在页面加载之后再进行
浏览器内核理解
1. 渲染引擎：获取网页的内容，比如html+css、然后渲染到显示器
2. JS引擎：解析跟执行JavaScript来实现网页动态效果
HTML5新特性有哪些？移除了哪些元素？
1. 新特性：
  1. 语义化标签：nav、footer、header、section
  2. 增强型表单：input新增了date、email、color、number类型
  3. 视频和音频
  4. canvas绘图
  5. 本地存储：sessionStorage、localStorage
2. 移除元素：font：字体标签 center水平居中 u 下划线 big 大字体
CSS3新增属性、新增选择器
1. 属性选择器：E[att$=“val”]：属性att的值以val结尾，E[att^=“val”]属性att的值以"val"开头
2. 结构伪类选择器：E:nth-child()、E:first-of-type
3. 新增属性：transition过度、transform变换、box-radius、box-shadow阴影、text-shadow文字阴影、box-sizing盒模型、opacity：不透明度
对语义化的好处？

便于阅读和维护，结构更清晰便于浏览器、搜索引擎解析、便于爬虫爬取
cookies、sessionStorage、localStorage
1. cookies是标识用户身份而存储在用户本地终端上的，存在cookie请求头中，由http请求发送给服务器
2. sessionStorage关闭之前存在与localStorage一直存在，不会自动把数据发送给服务器，仅是存储数据
cookies、session、token
1. session：服务器使用session把用户信息临时保存在服务器上，用户离开之后就会销毁，但是缺陷是服务器做了负载均衡，那么下一个操作请求到另一个服务器就会丢失session
2. cookie：保存在本地终端的数据，cookie由服务器产生，通过Set-cookie传递给浏览器，浏览器会以key：value的形式保存到文件中，发起请求后cookie请求头携带cookie发送给服务器
3. token：服务端生成一串字符串，用作客户端进行请求的一个令牌，登录一次后，服务器生成一个token，返回给客户端，之后只需要带上token请求数据，不要用户名跟密码
4. session与cookie区别：1)、cookie数据存储在浏览器，session数据临时存放在服务器；2)、cookie不是很安全，存放在本地，session安全一些；3)、session会在服务器上保存一定时间，访问增多，会占用服务器的性能；4)、cookie保存的数据不能超过4K，session没有限制；登录信息存放在session中，其他信息保留在cookie中
从输入url到页面展示发生了什么？
1. 输入地址
2. 通过DNS解析获得网站对应IP地址：DNS服务器向域名的解析服务器发出请求，收到域名跟IP地址
3. TCP连接：三次握手
4. 发送http请求
5. 服务器处理请求并返回http报文
6. 浏览器解析渲染页面
7. 断开连接

连接CSS3面试总结

opacity、display、visibility
1. opacity=0，元素隐藏起来，会占据之前的空间，如果绑定了事件，也还能触发
2. visibility=hidden，元素隐藏，会占据之前的物理空间，绑定事件，不会触发
3. display=none，元素隐藏，不会占据空间

清除浮动

使用clear属性的空元素：在浮动元素后使用一个空元素如

，并在CSS中赋予.clear{clear:both;}属性即可清理浮动不推荐

.flex{
    float:left
}
.clear {
  clear: both;
  }
  <div class="news">
		<div class="flex"></div>
		<div class="clear"></div>
</div>

使用css的overflow属性，给浮动元素的容器添加overflow：hidden 不推荐

使用伪元素 :after 给父容器添加

伪元素用双冒号，::after、::before 伪类用单冒号，:nth-child，:first-child

.flex{
    float:left
}
.clearfix::after{
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    zoom:1;/*适用于IE6*/
}
 <div class="father clearfix"><div class="flex"></div></div>

给父级元素设置高度

获得三角形

/* 宽高设置为0，border设置透明，再给需要的border设置颜色 */
.box{
    width:0;
    height:0;
    border:3px solid transparent;
    border-bottom:50px solid red;
}

跟影子说丨晚安

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
H5+C3面试题

响应式布局媒体查询：通过窗口大小、屏幕比例来改变页面上显示响应式布局：在不同屏幕下，通过媒体查询来改变布局容器大小，然后改变里面的子元素排列方式和大小，从而实现不同屏幕下，页面布局方式和样式改变@media screen and (max-width:575px){//小于575px .content{width:100%}}@media screen and (min-width:576px){//大于等于576px .content{width:540px}}@media screen
复制链接

扫一扫