html+css部分最新前端面试题!等你上车

论坛 › 期权论坛 › 期权     
吃喵的小鱼干   2019-6-30 06:29   7282   0

[h1][/h1][h1]餐前小甜点：[/h1][h1][/h1][h1]随着前端日益壮大的大军，各大城市密布的培训机构！it行业竞争日益激烈，想要顺利的进入一个新的公司，可能需要经受住千锤百炼的磨砺。第一步，就是面试，而面试的过程包括面试官对面试者个人的直观感觉、面试过程的表现，当然，你如果足够优秀，比方说足够漂亮、足够帅，而恰恰和面试官聊的开心，入职的几率也是很大的，运气是没有办法掌控的。[/h1]好了，毕竟不是每一个人都有锦鲤的体制，也不是每一个人都是杨超越，就像有的人摇号一次就中，而有的人摇了几年可能也不会中的道理是一样的。踏踏实实的准备好面试，先进入公司，才会有后面的事情....
小编这里整理了从基础到框架的最新面试题，定期更新，点击上方加关注，提升你的面试成功几率哦！！！

始：如何使用纯CSS来绘制一个三角形呢？
  1. div {
复制代码
  1.     border: 40px solid transparent;
复制代码
  1.     border-bottom: 40px solid #ff0000;
复制代码
  1. }
复制代码






[h1]1、如何理解CSS的盒子模型？[/h1]
  1. 标准盒子模型：宽度=内容的宽度（content）+ border + padding
复制代码
  1. [/code][code]低版本IE盒子模型：宽度=内容宽度（content+border+padding）
复制代码

2.  布局模型分类
  1. 流动模型flow
复制代码
  1. 浮动模型float
复制代码
  1. 层模型layer
复制代码
[h1][/h1][h1]3、如何清除浮动？[/h1]
  1. 浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写
复制代码
  1. 了浮动后，父元素会发生高度塌陷）
复制代码
  1. * 给浮动元素父级设置高度
复制代码
  1. * 父级同时浮动（需要给父级同级元素添加浮动）
复制代码
  1. * clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css
复制代码
  1. 样式：{clear:both;height:0;overflow:hidden;}
复制代码
  1. * 父级设置成inline-block，其margin: 0 auto居中方式失效
复制代码
  1. * 给父级添加overflow:hidden 清除浮动方法
复制代码
  1. * 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
复制代码
  1.     .clear:after{
复制代码
  1.       display:block;
复制代码
  1.       height:0;
复制代码
  1.       content:".";
复制代码
  1.       clear:both;
复制代码
  1.       overflow:hidden;
复制代码
  1.       visibility:hidden;
复制代码
  1.     }
复制代码
  1.     .clear{
复制代码
  1.       zoom:1
复制代码
  1.     }
复制代码

   

4. 什么是BFC
  1.    BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型
复制代码
  1. 布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
复制代码
  1.   形成 BFC 的条件
复制代码
  1.        * 浮动元素，float 除 none 以外的值
复制代码
  1.        * 定位元素，position（absolute，fixed）
复制代码
  1.        * display 为以下其中之一的值 inline-block，table-cell，
复制代码
  1.                  table-caption
复制代码
  1.        * overflow 除了 visible 以外的值（hidden，auto，scroll）
复制代码
  1. BFC 的特性
复制代码
  1.        * 内部的 Box 会在垂直方向上一个接一个的放置。
复制代码
  1.        * 垂直方向上的距离由 margin 决定
复制代码
  1.        * bfc 的区域不会与 float 的元素区域重叠。
复制代码
  1.        * 计算 bfc 的高度时，浮动元素也参与计算
复制代码
  1.        * bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面
复制代码
  1.          元素。
复制代码



5. 如何让一个div垂直居中



5.1 宽度和高度已知
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.     Document
复制代码
  1.    
复制代码
  1.         .box {
复制代码
  1.             width: 400px;
复制代码
  1.             height: 200px;
复制代码
  1.             position: relative;
复制代码
  1.             background: red;
复制代码
  1.         }
复制代码
  1.         .content {
复制代码
  1.             width: 200px;
复制代码
  1.             height: 100px;
复制代码
  1.             position: absolute;
复制代码
  1.             top: 50%;
复制代码
  1.             left: 50%;
复制代码
  1.             margin-left: -100px;
复制代码
  1.             margin-top: -50px;
复制代码
  1.             background: green;
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.         
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码
5.2 宽度和高度未知
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.     Document
复制代码
  1.    
复制代码
  1.         .box {
复制代码
  1.             width: 400px;
复制代码
  1.             height: 200px;
复制代码
  1.             position: relative;
复制代码
  1.             background: red;
复制代码
  1.         }
复制代码
  1.         .content {
复制代码
  1.             position: absolute;
复制代码
  1.             top: 50%;
复制代码
  1.             left: 50%;
复制代码
  1.             transform: translate(-50%, -50%);
复制代码
  1.             background: green;
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.         
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码
5.3 flex布局
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.     Document
复制代码
  1.    
复制代码
  1.         .box {
复制代码
  1.             width: 400px;
复制代码
  1.             height: 200px;
复制代码
  1.             background: red;
复制代码
  1.             display: flex;
复制代码
  1.             justify-content: center;
复制代码
  1.             align-items: center;
复制代码
  1.         }
复制代码
  1.         .content {
复制代码
  1.             width: 200px;
复制代码
  1.             height: 100px;
复制代码
  1.             background: green;
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.         
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码
6. CSS实现三栏布局

需求：左右固定，中间自适应

实现方式一：浮动布局
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.     Document
复制代码
  1.    
复制代码
  1.         .box {
复制代码
  1.             height: 200px;
复制代码
  1.         }
复制代码
  1.         .left {
复制代码
  1.             width: 200px;
复制代码
  1.             background-color: red;
复制代码
  1.             float: left;
复制代码
  1.             height: 100%;
复制代码
  1.         }
复制代码
  1.         .content {
复制代码
  1.             background-color: yellow;
复制代码
  1.             height: 100%;
复制代码
  1.         }
复制代码
  1.         .right {
复制代码
  1.             width: 200px;
复制代码
  1.             background-color: green;
复制代码
  1.             float: right;
复制代码
  1.             height: 100%;
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.         
复制代码
  1.         
复制代码
  1.         
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码
实现方式二：flex布局
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.     Document
复制代码
  1.    
复制代码
  1.         .box {
复制代码
  1.             display: flex;
复制代码
  1.             justify-content: center;
复制代码
  1.             height: 200px;
复制代码
  1.         }
复制代码
  1.         .left {
复制代码
  1.             width: 200px;
复制代码
  1.             background-color: red;
复制代码
  1.             height: 100%;
复制代码
  1.         }
复制代码
  1.         .content {
复制代码
  1.             background-color: yellow;
复制代码
  1.             flex: 1;
复制代码
  1.         }
复制代码
  1.         .right {
复制代码
  1.             width: 200px;
复制代码
  1.             background-color: green;
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.         
复制代码
  1.         
复制代码
  1.         
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码
实现方式三：定位布局
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.     Document
复制代码
  1.    
复制代码
  1.         .box {
复制代码
  1.             position: relative;
复制代码
  1.             height: 200px;
复制代码
  1.         }
复制代码
  1.         .left {
复制代码
  1.             width: 200px;
复制代码
  1.             background-color: red;
复制代码
  1.             left: 0;
复制代码
  1.             height: 100%;
复制代码
  1.             position: absolute;
复制代码
  1.         }
复制代码
  1.         .content {
复制代码
  1.             background-color: yellow;
复制代码
  1.             left: 200px;
复制代码
  1.             right: 200px;
复制代码
  1.             height: 100%;
复制代码
  1.             position: absolute;
复制代码
  1.         }
复制代码
  1.         .right {
复制代码
  1.             width: 200px;
复制代码
  1.             background-color: green;
复制代码
  1.             right: 0;
复制代码
  1.             height: 100%;
复制代码
  1.             position: absolute;
复制代码
  1.         }
复制代码
  1. [/code][code]
复制代码
  1. [/code][code]   
复制代码
  1.         
复制代码
  1.         
复制代码
  1.         
复制代码
  1.    
复制代码
  1. [/code][code]
复制代码

小伙伴们，今天的分享就到这里，期待下期精彩，关注JS最新面试题，掌握最新动态，让我们以餐后水果小拼盘结束今天的分享；
使用CSS3实现0.2个像素的细线↓↓↓↓
  1. [/code][list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code].filament {
复制代码
  1.     position: relative;
复制代码
  1. }
复制代码
  1. .filament:after {
复制代码
  1.     content: "";
复制代码
  1.     position: absolute;
复制代码
  1.     left: 0;
复制代码
  1.     top: 0;
复制代码
  1.     width: 100%;
复制代码
  1.     height: 1px;
复制代码
  1.     background-color: #000000;
复制代码
  1.     -webkit-transform: scaleY(.5);
复制代码
  1.     transform: scaleY(.5);
复制代码
  1. }
复制代码

回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
吃喵的小鱼干

积分:10
帖子:2
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP