CSS认识6

• 文档流的概念指什么？有哪种方式可以让元素脱离文档流?

1 在页面中从左到右从上到下依次排列元素（快级元素独占一行）

2

float:left|right
position:absolute|fixed    

都让元素脱离文档流 需要注意的是position:relative 并没有脱离文档流仍然会占据中间

---

• 有几种定位方式，分别是如何实现定位的，使用场景如何？

position:absolute:绝对定位 依据离自己最近一个不为static 定位的父元素
在使用双栏，三栏布局的时候我们会使用到 或者想要一些弹出层 但是又不想对当前布局产生影响

position:fixed:绝对定位 根据浏览器的窗口来定位
想要一直展示在页面的元素 不随滚动而变 如对话框 导航等

position:relative 相对定位 相对于自身来定位
当我们想要微调一个元素 但是又不想变动周围其他元素的时候 或者一些相对自身的动画效果

---

• absolute, relative, fixed 偏移的参考点分别是什么

absolute 依据离自己最近一个不为static 定位的父元素

relative 相对于自身原来的位置来定位

fixed 相对于浏览器窗口

---

• z-index 有什么作用? 如何使用?
  相当于xzy 中的z轴
  可以控制重叠元素的次序 只有作用在绝对定位元素上才有用

---

• position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
  使用margin之后元素不再占据原来的空间
  使用position:relative 元素仍然占据原来的空间

案例：
http://js.jirengu.com/hogoyujeki/1/edit

---

• 如何让一个固定宽高的元素在页面上垂直水平居中?

.div1{
    width: 50px;
    height: 50px;
    border: 1px solid;
    position:absolute;
    right: 50%;
    top: 50%;
    margin-right:-25px;
    margin-top:-25px;
}

.div2{
    width: 50px;
    height: 50px;
    border:1px solid red;
    margin: 0 auto;
    margin-top:50vh;
    position: relative;
    top: -25px;
}

两种方法

http://js.jirengu.com/yeledipiho/1/edit?html,css,output

---

• 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示

浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐

浮动元素后面的内联元素会向此浮动元素的外边距靠齐

浮动元素对于其他浮动元素是外边距靠齐

Paste_Image.png

对于没有内容的元素会忽略浮动元素和浮动元素重叠在一起

Paste_Image.png

对于有内容的元素会背景和边框部分和浮动元素发生重叠，而内容跟浮动元素外边距靠齐

Paste_Image.png

---

• 清除浮动指什么? 如何清除浮动?
  清除浮动是指清除浮动造成的影响

在需要清除浮动的元素加上

clear:both;

 .clearfix:afer{
    content: "";
    clear: both;
    display: block;

}

在需要清除浮动的父级元素加上fixclear类名

本教程版权归菲龍探雲和饥人谷所有，转载须说明来源