8.28_the end
HomeWork
the first level
1. 盒模型
#parent {
width: 100px;
height: 100px;
background:black;
overflow: hidden;
}
#child {
height: 100px;
border-left: 10px solid yellow;
padding-right: 10px;
padding-left: 10px;
margin-left: 10px;
background: red;
}
效果图如下:
盒模型如下:
2. 定位,relative
position:relative,定位的起始位置是该元素原先在文档流的位置。
3. 浏览器渲染原理
浏览器的渲染过程:下载html—>解析DOM树—>渲染树—>带位置和形状信息的渲染树(布局)—>可见图形(渲染)
分析:下载过程中,不仅仅是一个文件,包括img,frame,script,
渲染的流程基本上如下(黄色的四个步骤):
- 计算CSS样式
- 构建Render Tree
- Layout – 定位坐标和大小,是否换行,各种position, overflow, z-index属性 ……
- 正式开画
4. http协议状态码
1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码
2xx (成功) 表示成功处理了请求的状态代码。
3xx (重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向
4xx(请求错误)表示请求可能出错,妨碍了服务器的处理。
5xx(服务器错误)表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。
5. TCP三次握手,可靠性?
6. CSS3动画,怎么处理CSS3兼容?动画卡的原因,key frame ,setTimeout不准
7. 回流和重绘
Repaint——屏幕的一部分要重画,比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
Reflow——意味着元件的几何尺寸变了,我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow,或是Layout。(HTML使用的是flow based layout,也就是流式布局,所以,如果某元件的几何尺寸发生了变化,需要重新布局,也就叫reflow)reflow 会从这个root frame开始递归往下,依次计算所有的结点几何尺寸和位置,在reflow过程中,可能会增加一些frame,比如一个文本字符串必需被包装起来。
在一些高性能的电脑上也许还没什么,但是如果reflow发生在手机上,那么这个过程是非常痛苦和耗电的。
所以,下面这些动作有很大可能会是成本比较高的。
当你增加、删除、修改DOM结点时,会导致Reflow或Repaint
当你移动DOM的位置,或是搞个动画的时候。
当你修改CSS样式的时候。
当你Resize窗口的时候(移动端没有这个问题),或是滚动的时候。
当你修改网页的默认字体时。
display:none会触发reflow,而visibility:hidden只会触发repaint,因为没有发现位置变化。
基本上来说,reflow有如下的几个原因:Initial。网页初始化的时候。
Incremental。一些Javascript在操作DOM Tree时。
Resize。其些元件的尺寸变了。
StyleChange。如果CSS的属性发生变化了。
Dirty。几个Incremental的reflow发生在同一个frame的子树上。
8. 闭包
闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见方式:在一个函数内部创建另一个函数。
封装、命名污染
9. BFC,overflow
10. Gulp,grunt构建,后台了解
11. 模块化的作用
复用性、团队协作
12. 事件委托
13. 解决过的技术难题,深入思考过程?
the second level
1. 盒模型
2. 两栏布局(名片:左列自适应,右列定宽,高度一致,内容自适应,ul>li浮动,省略号,清除浮动,左对齐)
省略号
ext-overflow:ellipsis;
white-space:nowrap; //强制文本在一行内显示
overflow:hidden;
一列定宽一列自适应
如果是两列布局:可以直接把浮动的元素写在不浮动的元素前面
方法一:float
方法二:负margin
方法三:定位
3. inline block间隙
CSS的元素分类中可以分成三种:行内元素(内联元素)、块级元素、以及内联块元素
- inline-block兼容性
(1)inline level的元素
对于内联元素(inline element),所有主流浏览器都支持直接设置display 的value值为inline-block来将其定义为内联块。
(2)block level的元素
IE7及以下浏览器对块级元素(block element)的支持并不完全,它们只支持用display:inline-block去定义一个inline level的元素为内联块。先将block level元素设置为inline,然后再去触发该元素的hasLayout,使其拥有和inline-block相似的特性。可以这样写:
<div id="demo">
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</div>
#demo div{
display:inline-block;
*display:inline; /*IE7 hack*/
*zoom:1; /*触发hasLayout*/
}
- 缝隙的原因
W3C中规定以下元素属于空白符:
ASCII 空格 ( )
ASCII 制表符 ( )
ASCII 换页符 ( )
零宽度空格 ()
W3C中规定
1、折行被定义为一个回车,一个换行符,或者一个回车、换行的组合,所有的换行构成了空白行。
2、对于多个连续的空白符(空格、换行符、回车符),浏览器会将他们合并为一个空白符。
方法一:移除标签间的空格,写成一行
方法二:取消标签闭合
例如在美团webapp页面中貌似也是用到了这种方法。可以看下:
方法三:使用font-size:0;
在父容器上使用font-size:0;可以消除间隙,可以这样写:
<div class="demo">
<span>我是一个span
<span>我是一个span
<span>我是一个span
<span>我是一个span</span>
</div>
.demo {font-size: 0;}
.demo span{
background:#ddd;
display: inline-block;
font-size: 14px; /*要设置相应的字号*/
}
4. 清除浮动原理
8.28_the end的更多相关文章
随机推荐
- 19、Semantic-UI之图片的动画效果
在Semantic-UI中定义了很多图片动画效果,可以直接使用. 示例:定义图片动画 <!DOCTYPE html> <html lang="en"> ...
- django 'set' object does not support indexing
在定义Model之后使用syncdb 同步的时候报出这个错误,检查之后发现是用错了.在model的Meta里面,排序这些用的应该是 ordering = ['last','first','middle ...
- Time 模块中asctime()、time()、localtime()、ctime()、gmtime()的用法
Time 模块包含了以下内置函数,既有时间处理的,也有转换时间格式的: time.asctime([tupletime]) 接受时间元组并返回一个可读的形式“Tue Dec 11 18:07:14 2 ...
- Cordova deploy on Android
网上找了几篇Phonegap在安卓上的部署,版本都比较老了,不过还是部署成功了, 写篇博客以做纪录. 1.先下载IDE:戳 2.下载Phonegap:戳 3.启动ADT,新建普通Android App ...
- DATEADD和DATEDIFF
DateAdd函数 返回 返回包含一个日期的 Variant (Date),这一日期还加上了一段时间间隔. 语法 DateAdd(interval, number, date) DateAdd 函数语 ...
- C# 读Autofac源码笔记(1)
最近在看Autofac的源码. Autofac据说是.net中最快的IOC框架,具体没有实验,于是看看Autofac具体是怎样实例化实体. image.png 如上图所示,Autofac使用的是表 ...
- Android 用 res 中文件名获取资源 id 的方法
res 中我们可能会放很多图片和音频视频等.它们放在 R.drawable, R.raw 下面. 有一种情况是,比如我有一个数据库保存项目中声音的一些信息.声音的 id 就很难保存.因为我们不能把 R ...
- APIO2012 派遣dispatching | 左偏树
题目链接:戳我 就是尽可能地选取排名小的,加起来就可以了.然后我们考虑利用一个大根堆,一个一个合并,如果超过派遣的钱,我们就把费用最大的那个忍者丢出队列. 左偏树,作为一个十分优秀的可并堆,我们这道题 ...
- [Swift实际操作]八、实用进阶-(7)使用通知的方法进行对象间的消息传递
本文将为你演示,如何使用Notification Center进行消息的传递.通知中心是一个调度消息通知的类,采用单例设计模式,实现数据传递,回调等功能.首先打开自定义视图的代码文件(CustomVi ...
- 百度地图API —— 制作多途经点的线路导航
[百度地图API]如何制作多途经点的线路导航——驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------ ...