css浮动与定位
2017-07-04 本文已影响0人
谨言_慎行
1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
- 对于父元素，若其子元素都是浮动元素，则其失去高度，视觉上在子元素外面，不包含。
1.png
- 对于其它浮动元素的影响,如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
2.png
- 普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
3.png
- 文字会感知到浮动元素的存在，会留出空间，形成环绕效果。
4.png
2.清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动指解决浮动父容器高度塌陷问题
- 在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;
5.png
- 利用BFC来清除浮动。
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素,可以对父元素设定以下样式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
6.png
- 通用方法
.clearfix:after{
content:"";
display:block;
clear:both;
}
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit 规定从父元素继承 position 属性的值
- static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
-
relative 相对定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定 相对于元素本身正常位置进行定位 一般作为绝对定位的元素参考点
8.png
- absolute 绝对定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定 相对于static定位以外的第一个祖先元素（offset parent）进行定位如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位demo。适用于元素的水平垂直居中
9.png
- fixed 绝对定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定 相对于浏览器窗口进行定位，不随滚动条的滚动而移动 ；适用于飘窗、固定导航等
10.png
- sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
4.z-index 有什么作用? 如何使用?
因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序,默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文
11.png
image.png
image.png
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
- 负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC是块级格式上下文
- 对元素设置以下属性
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed; - 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
12.png
13.png
清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动
image.png
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 两个兄弟元素在垂直方向上合并外边距，取较大值进行合并
14.png
- 父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上和/或下外边距合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: gray;
margin: 20px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
margin:40px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
效果图
image.png
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移，当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 如果存在一个空的块级元素，其 border、padding、inline content、height、min-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并.
- 对于相邻元素，让他们不在同一个BFC，外边距就不会合并。
代码练习
- 实现如下alert效果，效果范例
代码如下：http://js.jirengu.com/fijam/5/edit - 实现如下表单效果， 效果范例
代码如下：http://js.jirengu.com/xaga/2/edit - 实现如下模态框效果， 效果范例
代码如下：http://js.jirengu.com/deni/1/edit?html,css - 实现如下导航栏效果，效果范例
代码如下：http://js.jirengu.com/xaba/1/edit?html,css,output
