文档章节

前端面试大全(三)

博为峰教研组
 博为峰教研组
发布于 2017/05/23 11:17
字数 849
阅读 10
收藏 0

第三部分 CSS
·    介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
·    CSS盒子模型:由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
·    标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不一样
·      标准的css盒子模型宽高就是内容区宽高;
·      低端IE css盒子模型宽高 内边距﹢边界﹢内容区;
·    CSS选择符有哪些?哪些属性可以继承?
   类型选择符(body)、群组选择符(h1,h2,h3,span)、包含选择符(h2 span)、ID选择符(#id)、Class选择符(.content)
CLASS属性,伪类A标签,列表ul、li、dl、dd、dt可以继承
·    position的值relative和absolute定位原点是?
absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。
   relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
   static 默认值。没有定位,元素出现在正常的流中
    sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出
·    如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
Margin 0 auto
#dingwei{padding:10px;background-color:#003300;color:#FFFFFF;
 width:600px;height:300px;
 display:block; 
 position: absolute;
 top:50%;
 left:50%;
 margin-left:-300px;
 margin-top:-150px;}
·    CSS权重优先级是如何计算的?
 !import > id > class > tag
•    请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
浮动float最开始出现的意义是为了让文字环绕图片而已,但人们发现,如果想要三个块级元素并排显示,都给它们加个float来得会比较方便
    清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。
    1.三个div 水平排列,需要用到浮动,但如果用一个边框包起来,由于使用了浮动不能实现,就需要清除浮动 clear:both
    2,采用伪元素
    zoom:1清除浮动原理:清除浮动,触发hasLayout;
Zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。
譬如外边距(margin)的重叠,浮动清除,触发ie的haslayout属性等。
来龙去脉大概如下:
当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
Zoom属是IE浏览器的专有属性,火狐和老版本的webkit核心的浏览器都不支持这个属性。然而,zoom现在已经被逐步标准化,出现在 CSS 3.0 规范草案中。
目前非ie由于不支持这个属性,它们又是通过什么属性来实现元素的缩放呢?
可以通过css3里面的动画属性scale进行缩放。


 

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Web、移动开发资源、开源工具整理

整理了一些Web、移动开发资料,开源工具,供需要的朋友们查阅: Web移动开发各类网站学习资源: 成为优秀的Web移动开发者:编程资源大全 成为优秀的Web移动开发者:前端开发学习资源集合 成为...

咲晚杍
2014/03/13
431
1
前端相关整理

整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅...

Seas0n_
2016/03/01
337
0
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
前端开发-从入门到Offer

解决你的前端面试 有时候前端的技术性面试还是很麻烦的,毕竟知识点那么多,框架迭代那么快。你不仅仅要对计算机科学基础有一个坚实的底子,还需要理解啥 Web 性能、构建系统以及 CSS 引擎等...

掘金官方
2017/12/28
0
0
编程微刊第四期文章汇总(2018.4)

编程微刊创立也有一段时间了,在此感谢一直关注我的小伙伴们,你们的关注和支持,是我每天不断更新的动力,我每个月会总结一期微刊,方便大家的阅读。 1. 推荐文章 这个时代,抛弃你的时候,...

祈澈姑娘
2018/05/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ERC-777以太坊新代币标准解读

ERC777是一个新的高级代币标准,可以视为ERC20的升级版本,因此它解决了ERC20以及ERC223存在的一些问题,开发者可以根据自己的具体需求进行选型。 1、使用ERC820进行合约注册 有别于ERC20的自...

汇智网教程
37分钟前
3
0
代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部