1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
QQ截图20170616142703.png
浮动元素默认宽度为内容宽度，脱离文档流，普通块级元素会忽略浮动元素的存在,占据它的位置；父子级关系的子元素浮动的话，父容器的高度会塌陷,非浮动元素中的文字能察觉到浮动元素的存在。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
答：清除浮动是指清除浮动带来的影响。主要有对上级元素和同级元素的影响。对上级元素的影响比如浮动元素不会撑起父元素的高度，影响与父元素的同级元素。对同级元素的影响比如同级元素会占据浮动元素原来的空间，而我们需要这个空间不被占用。
我们可以用clear清除，或者用伪元素.clearfix，或者使其父元素形成BFC
QQ截图20170619093731.png
QQ截图20170619094136.png
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
答：
有四种定位方式。分别是：静态定位static、相对定位relative、绝对定位absolute和固定定位fixed。默认值为static。
除了static以外，其他的定位方式都可以设定“top、right、bottom、left”属性
QQ截图20170619091818.png
QQ截图20170619092028.png
QQ截图20170619092220.png
4.z-index 有什么作用? 如何使用?
1、z-index的作用：页面显示的是一个二维平面，用x轴和y轴来表示位置属性。为了表示三维立体的概念比如显示元素的上下层的叠加顺序
表示一个元素在叠加顺序上的上下立体关系。
2、使用：z-index值较大的元素将叠加在z-index值较小的元素之上。如果一个子元素的父元素的z-index值大于另一个子元素的父元素的z-index值，那么谁父元素的z-index的值大，谁就在上面。
QQ截图20170619095713.png
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
答：用position:relative使元素偏移时，它自身位置并未改变，仍然处在文档流的原始位置，偏移的元素不会对下面元素位置产生影响，只是该元素自己相对于原来位置偏移。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
答：BFC是块格式化上下文（block formatting context），
是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性。
BFC有以下特性：
内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。
QQ截图20170619100327.png
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
答：外边距合并指的是，两个在普通文档流中的“相邻”元素外边距相遇的时候发生合并的情况。这个所谓的“相邻”可以是父子关系相邻，兄弟关系相邻，甚至如果一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
当两个外边距都是正数时，取两者之中的较大者；当两个外边距都是负数时，取两者之间绝对值较小者；当两个外边距一正一负时，取的是两者的和。
如果不想让相邻元素外边距合并，可以：
1.设置浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
2.创建BFC
QQ截图20170619100327.png
清除父子边距合并：
QQ截图20170619102444.png
代码：
1：http://js.jirengu.com/piyuximese/2/edit
2：http://js.jirengu.com/rixepemeli/1/edit?css,output
3：http://js.jirengu.com/tuyurawigo/edit?html,css,output
4:http://js.jirengu.com/pudolizigu/1/edit?output
网友评论