内容简介:近日 公司让我面试 1年经验的前端,特此花时间研究了一番面试题,在我看来 这些基本都是必备的知识点一般来说我们有两种方法来去掉这个换行引起间隙:(推荐)通过设置父元素的 font-size 为 0 来去掉这个间隙,然后重置子元素的 font-size,让其恢复子元素文字字符。
近日 公司让我面试 1年经验的前端,特此花时间研究了一番面试题,在我看来 这些基本都是必备的知识点
css常用布局
基本值 | flexbox | grid | table | float布局 |
---|---|---|---|---|
none | flex | grid | table | float-fixed |
inline | inline-flex | inline-grid | table-row | float-fluid |
block | table-cell | 960网格布局 | ||
inline-block |
使用inline-block 的问题以及解决方案
- 水平间隙问题 这是因为编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的,并且对于多个连续的空白符自动合并成一个,故产生了所谓的间隙。
一般来说我们有两种方法来去掉这个换行引起间隙: 代码不换行 和 设置 font-size。
(推荐)通过设置父元素的 font-size 为 0 来去掉这个间隙,然后重置子元素的 font-size,让其恢复子元素文字字符。 只要设置 inline-block 就要去间隙
float清除浮动详解
主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题
- 清除前面兄弟元素浮动
清除前面兄弟元素浮动很简单,只需要在不想受到浮动元素影响的元素上使用 clear:both 即可
- 闭合子元素浮动
- 给元素设置 clearfix 常用
通过父元素的伪元素(::after)实现的著名 clearfix 方法,代码如下: <div class="container clearfix"> <div class="box"></div> </div> .clearfix::after { content:""; display:table; clear: both; } 给父元素增加一个专门用于处理闭合子元素浮动的 clearfix 类名,该类使用 ::after 伪元素类选择器增加一个内容为空的结构来清除浮动. 复制代码
- 给父元素新建一个 BFC(块格式化上下文)
请详情讲一下定位方式
实现一个弹窗 全屏居中的效果。
- div使用绝对布局,设置
margin:auto;
并设置top、left、right、bottom
的值相等即可,不一定要都是0。
.center{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 复制代码
- 绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
.center{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 复制代码
说下几种常用选择器
五大类选择器:
- 基本选择器
P、h1 #id .class *
-
关系选择器
-
伪类选择器
- :nth-child(n) : n可以是数字(4)、关键词(old,even)或公式(2n+1)
- :active: 将样式添加到被激活的元素
- :focus: 将样式添加到被选中的元素
- :hover: 鼠标悬浮在元素上时 添加样式
- :link: 添加到未被访问过的链接
- :visited 添加到被访问过的链接
- :first-child: 添加到元素的第一个子元素
- :lang: 定义使用的语言
-
伪元素选择器 :first-letter : 添加到文本的首字母 :first-line : 添加到文本的首行 :before : 某元素之前插入某些内容 :after : 某元素之后插入某些内容
-
属性选择器
说一下 CSS3新特性
- HTML5 语义元素
- HTML5 Web 存储
- sessionStorage: 客户端数据存储,只能维持在当前会话范围内。
- localStorage: 客户端数据存储,能维持在多个会话范围内。对象存储的数据没有时间限制。对于大量复杂数据结构,一般使用IndexDB
- CSS3 多媒体查询 @media all and(min-width:800px){...}
- CSS3 转换和变形:transform
- CSS3 过渡:transition
- CSS3 动画:animation
异步请求实现方式
//由于浏览器兼容的原因,代码复杂,多使用基于jQuery的异步请求方法(内部封装)
讲一下 自己 代码 调试方法
JS数组操作
- concat() 链接两个或更多的数组,并返回结果
- join() 把数组通过指定分隔符进行分割并拼接成一个字符串
- pop() 删除并返回数组的最后一个元素
- push() 向数组的末尾添加一个或更多元素,并返回新长度
- reverse() 反转数组中元素的顺序
Jq DOM选择器、DOM文档操作
- append() : 向元素结尾插入由参数指定的内容。
- prepend():向元素开头插入由参数指定的内容。
- after() : 在匹配的元素之后插入内容。
- before(): 在每个匹配的元素之前插入内容。
- addClass():向匹配的元素添加指定的类名。
- attr() :设置或返回匹配元素的属性和值。
- removeAttr():移除指定的属性。
Vue框架的优势
-
MVVM: Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑; View 代表UI 组件,它负责将数据模型转化成UI 展现出来, ViewModel 是一个同步View 和 Model的对象。
-
mvc和mvvm其实区别并不大。都是一种设计思想。 主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
区别vue数据驱动,通过数据来显示视图层而不是节点操作。场景:数据操作比较多的场景,更加便捷
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端科普系列(三):CommonJS 不是前端却革命了前端
- 前端技术演进(三):前端安全
- 【前端优化】前端常见性能优化
- 【前端学习笔记】前端安全详解
- 前端监控和前端埋点
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数学与生活(修订版)
[日] 远山启 / 吕砚山、李诵雪、马杰、莫德举 / 人民邮电出版社 / 2014-10 / 42.00元
数学是高等智慧生物的共有思维,是对真理的探索,对矛盾的怀疑,但它绝非一门晦涩难懂的学问,非应试目的的数学是纯粹而朴实的智慧。《数学与生活》为日本数学教育改革之作,旨在还原被考试扭曲的数学,为读者呈现数学的真正容颜,消除应试教学模式带来的数学恐惧感。 本书既包含了初等数学的基础内容,又包含了微分、积分、微分方程、费马定理、欧拉公式等高等数学的内容。作者运用了多个学科的知识。结合日常生活和东西方......一起来看看 《数学与生活(修订版)》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
HTML 编码/解码
HTML 编码/解码