CSS的浮动属性,面试必问
CSS 篇
link 与 @import 的区别
link
是HTML
方式,@import
是CSS
方式link
最大限度支持并行下载,@import
过多嵌套导致串行下载,出现 FOUC (文档样式短暂失效)link
可以通过rel="alternate stylesheet"
指定候选样式- 浏览器对
link
支持早于@import
,可以使用@import
对老浏览器隐藏样式 @import
必须在样式规则之前,可以在css
文件中引用其他文件- 总体来说:
link
优于@import
,link
优先级也更高
BFC 有什么用
- 创建规则:
- 根元素
- 浮动元素(
float
不取值为none
) - 绝对定位元素(
position
取值为absolute
或fixed
) display
取值为inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex
之一的元素overflow
不取值为visible
的元素
- 作用
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的
margin
折叠
清除浮动的几种方式
- 父级
div
定义height
- 结尾处加空
div
标签clear:both
- 父级
div
定义伪类:after
和zoom
- 父级
div
定义overflow:hidden
- 父级
div
也浮动,需要定义宽度 - 结尾处加
br
标签clear:both
Css3 新增伪类 - 伪元素
p:first-of-type
选择属于其父元素的首个元素的每个
元素。
p:last-of-type
选择属于其父元素的最后元素的每个
元素。
p:only-of-type
选择属于其父元素唯一的元素的每个
元素。
p:only-child
选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2)
选择属于其父元素的第二个子元素的每个元素。
:enabled
已启用的表单元素。:disabled
已禁用的表单元素。:checked
单选框或复选框被选中。::before
在元素之前添加内容。::after
在元素之后添加内容,也可以用来做清除浮动。::first-line
添加一行特殊样式到首行。::first-letter
添加一个特殊的样式到文本的首字母。伪类语法一个:,它是为了弥补css常规类选择器的不足
伪元素语法两个:,它是凭空创建的一个虚拟容器生成的元素
IE盒子模型 、W3C盒子模型
- W3C盒模型: 内容(content)、填充( padding )、边界( margin )、 边框( border );
box-sizing: content-box
- width = content width;
- IE盒子模型: IE 的content 部分把 border 和 padding 计算了进去;
box-sizing: border-box
- width = border + padding + content width
display:inline-block 什么时候不会显示间隙?
- 移除空格
- 使用
margin
负值 - 使用
font-size:0
letter-spacing
word-spacing
行内元素float:left后是否变为块级元素?
行内元素设置成浮动之后变得更加像是 inline-block
(行内块级元素,设置 成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是 100% ),这时候给行内元素设置 padding-top
和 padding-bottom
或者 width 、 height
都是有效果的
如果需要手动写动画,你认为最小时间间隔是多久,为什么?
多数显示器默认频率是 60Hz ,即 1 秒刷新 60 次,所以理论上最小间隔为 1/60*1000ms = 16.7ms
stylus/sass/less区别
- 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Sass
和LESS
语法较为严谨,LESS
要求一定要使用大括号“{}”,Sass
和Stylus
可以通过缩进表示层次与嵌套关系Sass
无全局变量的概念,LESS
和Stylus
有类似于其它语言的作用域概念Sass
是基于Ruby
语言的,而LESS
和Stylus
可以基于NodeJS NPM
下载相应库后进行编译;这也是为什么安装Sass的时候有时候会报错,需要安装python脚本
优点:就不用我多说了,谁用谁知道,真香。
rgba()和opacity的透明效果有什么不同?
rgba()
和opacity
都能实现透明效果,但最大的不同是opacity
作用于元素,以及元素内的所有内容的透明度,- 而
rgba()
只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)
水平居中的方法
- 元素为行内元素,设置父元素
text-align:center
- 如果元素宽度固定,可以设置左右
margin 为 auto
; - 如果元素为绝对定位,设置父元素
position 为 relative
,元素设left:0;right:0;margin:auto;
- 使用
flex-box
布局,指定justify-content
属性为center
display
设置为tabel-ceil
垂直居中的方法
- 将显示方式设置为表格,
display:table-cell
,同时设置vertial-align:middle
- 使用
flex
布局,设置为align-item:center
- 绝对定位中设置
bottom:0,top:0
,并设置margin:auto
- 绝对定位中固定高度时设置
top:50%,margin-top
值为高度一半的负值 - 文本垂直居中设置
line-height
为height
值
浏览器 篇
浏览器内核的理解
- 主要分两个部分:
渲染引擎
、js引擎
渲染引擎:
负责取得网页的内容(html css img …),以及计算网页的显示方式,然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同,所以渲染的效果也不一样js引擎:
解析和执行javascript 来实现网页的动态效果- 最开始渲染引擎和js引擎并没有区分的很明确,后来js引擎越来越独立,内核就倾向于只值渲染引擎
IE : trident
内核Firefox : gecko
内核Safari : webkit
内核Opera
:以前是presto
内核,Opera
现已改用Google - Chrome
的Blink
内核Chrome:Blink
(基于webkit
,Google与Opera Software
共同开发)
HTTP 的请求方式场景
Get
方法:获取数据通常(查看数据)-查看POST
方法:向服务器提交数据通常(创建数据)-createPUT
方法:向服务器提交数据通常(更新数据)-update,与POST
方法很像,也是提交数据,但PUT
制定了资源在服务器上的位置,常用在修改数据HEAD
方法:只请求页面的首部信息DELETE
方法:删除服务器上的资源OPTIONS
方法:用于获取当前URL
支持的请求方式TRACE
方法:用于激活一个远程的应用层请求消息回路CONNECT
方法:把请求链接转换到透明的TCP/IP
的通道
HTTP状态码
1XX
:信息状态码100 continue
继续,一般在发送 post 请求时,已发送了 http header 之后服务端将返回此信息,表示确认,之后发送具体参数信息
2XX
:成功状态码200 ok
正常返回信息201 created
请求成功并且服务器创建了新资源202 accepted
服务器已经接收请求,但尚未处理
3XX
:重定向301 move per
请求的网页已经永久重定向302 found
临时重定向303 see other
临时冲重定向,且总是使用get请求新的url304 not modified
自从上次请求后,请求的网页未修改过
4XX
:客户端错误400 bad request
服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求401 unauthorized
请求未授权403 forbidden
禁止访问
404 not found
找不到如何与url匹配的资源5XX
:服务器错误500 internal server error
最常见的服务器端的错误503 service unacailable
服务器端暂时无法处理请求(可能是过载活维护)
CSS的浮动属性,面试必问相关推荐
- web开发项目,web前端CSS全局样式,面试必问
前言 表格是网页制作中使用最多的工具之一,在制作网页时,使用表格可以更清晰地排列数据.但是在实际制作过程中,表格更多用在网页布局的定位上.很多网页都是以表格布局的.这是因为表格在文本和图像的位置控制方 ...
- 面试必问一:Java 中 == 和 equals 的区别你知道吗
面试必问一:Java 中 == 和 equals 的区别你知道吗 前言 关于这个问题,一般初中级面试中都会遇到,还记得我当初实习找工作的时候也遇到了这个问题,现在都还记得自己是怎么回答的:== 是基本 ...
- 面试必问的 Linux 命令帮你整理好啦 (下)
如果我说 Linux 操作系统和命令是面试必问的,你相信么?不信,我们来看看企业招聘需求: 随便在某招聘网站上搜了一下测试工程师的技能要求,基本都有 Linux 操作系统和命令的要求.说明,这个技能确 ...
- linux驱动工程面试必问知识点
linux内核原理面试必问(由易到难) 简单型 1:linux中内核空间及用户空间的区别?用户空间与内核通信方式有哪些? 2:linux中内存划分及如何使用?虚拟地址及物理地址的概念及彼此之间的转化, ...
- 计算机网络八股文-面试必问
搬运–面试必问计算机网络 原博客链接:https://www.nowcoder.com 每次面试问网络都还可以,整理了点资料,应付普通的问题没什么问题了. 除了字节的网络太为难人,其他公司都说回答的很 ...
- Android面试必问框架原理
Android面试必问框架原理 volatile的实现原理 synchronized的实现原理 join方法实现原理 CAS无锁编程的原理 ReentrantLock的实现原理 AQS的大致实现思路 ...
- 看完946页“JAVA高级架构面试必问”,金九银十社招全拿下
前言 我本科毕业后在老东家干了两年多,老东家算是一家"小公司"(毕竟这年头没有 BAT 或 TMD 的 title 都不好意思报出身),毕业这两年多我也没有在大厂待过,因此找坑的时 ...
- 面试必问:多线程与线程池
前言 前几章都在讲一些锁的使用和原理,主要是为了保证多线程情况下变量的原子性,但这并不是说多线程不好,合理利用还是有好处的.至于什么好处,看下面内容就懂了,先打个比方吧(谁叫比方,上来挨打):假如你体 ...
- 面试必问的线程池,你懂了吗?
微信搜索[程序员囧辉],关注这个坚持分享技术干货的程序员. 前言 在上次和二狗的"HashMap 最强者"PK后,二狗一直耿耿于怀,经常缠着我要复仇,甚至愿意出卖自己的屁股???我 ...
- Android面试必问之触摸事件传递机制
Android面试必问之触摸事件传递机制 一.Activity的构成 二.触摸事件的类型 三.事件传递的三个阶段 Activity对点击事件的分发过程 五.View的事件分发机制 六.点击事件分发的传 ...
最新文章
- 移动端开发框架Zepto.js
- 求只有2,3,5组成的第n小个数字
- 【SPOJ - SCITIES】Selfish Cities (二分图最优匹配,最大费用流)
- .NET进行客户端Web开发又一利器 - Ant Design Blazor
- 处理导出到EXCEL时,身份证号码的问题:mso-number-format
- 十二则技巧让Excel操作效率提高
- 如何在pycharm debug类似python -m的命令
- html怎么在jupyter编辑,jupyter home jupyter环境变量怎么设定
- WebStorm连接Github教程
- k8s学习:挂载 pvc
- C# 让应用程序只运行一个实例
- Ubuntu 16.04下安装激活pycharm 2018.3版本
- idea 创建项目并同步到git仓库
- android小小的开发细节
- 海康威视多路播放开发步骤及参考代码
- 解决Arduino开发板管理器下载esp8266开发包失败和速度慢的方法
- python艺术分形数_Python分形框计数 – 分形维数
- switch游戏服务器设置
- itext文本域自动换行_iText+Flying Saucer生成pdf文档,中文不显示和不自动换行问题...
- FFmpeg合并音频文件和视频文件