css篇
1. link 和 @import的区别
本质上,这两种方式都是为了加载css文件,但还是存在细微的差别
- link属于XHTML标签,而@import 完全是css 提供的一种方式。link标签除了加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import只能加载CSS
- 加载顺序的差别。当一个页面被加载的时候, link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题,完全兼容
- 使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的。
2. 盒模型
2.1 什么是盒模型
- 页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型
- 盒模型由外而内包括:外边距(margin)、边框(border)、内边距(padding)、内容(content)
- 盒模型有标准盒模型和IE的盒模型, 二者区别就是:标准盒模型的宽高是content的大小,而IE的则是 content+padding+border
2.2 如何设置两种盒模型
- box-sizing:content-box(W3C标准盒模型)
- box-sizing:border-box(IE盒模型)
2.3 JS怎么获取和设置box的宽高
-
dom.style.width/height: 只能取出内联样式的宽度和高度
-
dom.currentStyle.width/height:获取即时的计算的样式,但是只有IE支持
-
window.getComputedStyle(dom).width:获取即时计算的样式,支持其他浏览器,兼容性更好
-
dom.getBoundingClientRect( ).width/height:计算盒模型在页面中的绝对位置,比较少用。
-
dom.offsetWidth/offectHeight :返回元素实际大小
2.4 什么是边距重叠?什么情况下会发生边距重叠?如何解决边距重叠?
- 边距重叠:垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能合并为1个margin,这种现象叫做collapse(折叠) 以绝对值大的那个为最终结果显示在页面上
2.5 BFC的基本概念
BFC(块级格式化上下文),它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。通俗的讲,就是一个特殊的块,内部有自己的布局方式,不受外边元素的影响
-
BFC如何产生:
overflow:auto/hidden
position:absolute/fixed
float:left/right
display:inline-block/table-cell/table-caption/flex/inline-flex
3. display:none, visibility:hidden 和 opcatity:0 三者区别
空间占据
- display:none 不会占据额外空间,会产生回流和重绘
- visibility: hidden和opacity:0 会占据空间,只会产生重绘
- visibility:hidden 不会影响列表的计数
继承方面
- display:none 不会被子元素继承,元素设置该属性后,自身连同其子元素都会隐藏,即使在子元素设置display:block, 子元素也不会显示
- visibility:hidden 会被子元素继承,可以通过设置子元素的visibility:visible 属性使子元素重新显示
- opacity:0 会被子元素继承,不能通过设置子元素的opacity:1 使其显示
事件绑定
- display:none 和 visibility:hidden 元素上绑定的事件无法触发
- opacity:0 元素上绑定的事件可以触发
过渡动画
- transition对display:none 和 visibility:hidden 无效
- transition 对opacity:0 有效
4. BFC 相关
BFC 定义
BFC(Block formatting context) 直译为"块级格式化上下文"。 它是一个独立的渲染区域,元素的布局不受外界的影响
BFC的布局规则
- 内部的Box会在垂直方向,一个接一个地放置
- box垂直方向的距离由margin决定。属于同一个BFC 的两个相邻box的margin会发生重叠
- 每个盒子的margin box的左边,与包含块border box 的左边相接触
- BFC的区域不会与float box 重叠
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此
- 计算BFC的高度时,浮动元素也参与计算
如何创建BFC
- overflow:auto/hidden
- position:absolute/fixed
- float:left/right
- display:inline-block/table-cell/table-caption/flex/inline-flex
BFC的作用
- 利用BFC避免margin重叠
- 自适应两栏布局
- 清除浮动
5. 清除浮动
方法一:给浮动的元素的祖先元素加上高度
网页制作中,因为高度可以被被内容撑起来,所以高度height很少出现
方法二:clear:both
该方法有一个非常大的,并且致命的问题:margin 失效了
方法三:隔墙法
又称额外标签法,也就是在浮动元素末尾添加一个空的标签,添加clear:both 样式。新添加的元素必须时块级元素,由于添加了无意义的标签,结构化较差,因此不推荐使用
方法四:给父级添加 overflow属性
可以给父级元素添加overflow属性,将其属性值设置为hidden、auto、或 scroll
- 优点:代码简洁
- 缺点:无法显示溢出的部分
方法五:给父级添加 :after 伪元素
:after 方式是额外标签法的升级
.clearfix:after {
content: "";
display:block;
clear:both;
height:0;/*兼容旧浏览器*/
visibility:hidden;/*兼容旧浏览器*/
}
.clearfix {
*zoom:1;/*兼容IE6~7浏览器*/
}
6. 选择器优先级
-
内连样式 优先级 1000
-
id 选择器 优先级 100
-
类选择器 优先级 10
-
元素选择器 优先级 1
-
统配选择器 优先级 0
-
继承的样式优先级没有
7. 水平垂直居中
居中元素 定宽高
-
absolute + 负margin
.father { position:relative; } .son { position:absolute; top:50%; left:50%; margin-left:-50%; margin-top: -50%; }
-
absolute + margin auto
.father { position:relative; } .son { position: absolute; top:0; left:0; bottom: 0; margin:auto; }
-
absolute + calc
.father { position:relative; } .son { position:absolute; top: calc(50%-son盒子高度的一半); left: calc(50%-son盒子宽度的一半); }
居中元素不定宽高
-
absolute + transform(这种方法兼容性依赖translate2d的兼容性)
.father { position:relative; } .son { position:absolute; top: 50%; left:50%; transform: translate(-50%, -50%) }
-
line-height
.father { line-height: 300px;// 与其高度一致 text-align: center; font-size: 0px; } .son { display: inline-block; vertical-align: middle; line-height: initial; text-align: left; /* 修正文字 */ }
-
css-table
.father { display: table-cell; text-align: center; vertical-align: middle; } .son { display: inline-block; }
-
flex
.son { display: flex; justify-content: center; align-items: center; }
8. css做圆形,三角形
-
圆形
.box { width:5px; height:5px; background-color:blue; border-radius:50% }
-
三角形
.box { width:0; height:0; border-width:10px; border-style:solid; border-color: #ccc transparent transparent transparent }
9. px, em, rem
- px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
- rem是CSS3新增的一个相对单位(root em,根em),这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
10. 回流和重绘
html 加载时发生了什么
- 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。
- 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建render tree
- render tree类似于DOM tree,但区别很大,因为render tree能识别样式,render tree中每个NODE都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。简单理解就是DOM Tree和CSS结合在一起之后,渲染出了render tree。
什么是回流
- 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。
- 每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。
- 在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
区别:
- 回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流
- 当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变