问答
文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 文档流指块级元素从上到下占满一行，行内元素左右一次排列。
-脱离文档流- 使用浮动方式
float - 使用绝对定位
position:absolute - 使用
position:fixed
- 使用浮动方式
有几种定位方式，分别是如何实现定位的，使用场景如何？
position有多种定位方式
- 默认为static，元素处在文档流中它当前的布局位置，top, right, bottom, left 和 z-index 属性无效。
- relative 相对定位，相对于元素本身在文档流存在的位置进行定位，
- absolute 绝对定位，相对于具有定位属性的父元素进行定位
- fixed 相对浏览器窗口定位，适用于一直停留在浏览器窗口的元素
absolute, relative, fixed偏移的参考点分别是什么
- absolute 相对于父容器具有position属性的进行定位
- absolute定位相对于父元素边框内侧进行定位
absolute都设置为0的时候 可以充满整个父元素 可当做蒙层
- absolute定位相对于父元素边框内侧进行定位
- relative 相对于它自身原来的位置进行定位
- fixed 固定定位，相对于浏览器的窗口进行定位
z-index 有什么作用? 如何使用?
- 控制浮动元素的互相遮盖的方式，可以理解为Z轴
- z-index较大的元素会遮盖掉较小的元素，默认为0，可以为负
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative 本身还处在文档流中，对其他元素没有影响
- 负margin方法使元素位置偏移，使元素在文档流中的位置发生了改变，其后的元素受其影响。
如何让一个固定宽高的元素在页面上垂直水平居中?
块级元素垂直水平居中有多种方式，介绍采用绝对定位+负margin的实现方式
- 让固定宽高元素相对于祖先元素进行定位.设置top: 50%;
和left: 50%;
margin设置为宽高值的负数的二分之一. - 两个例子 http://js.jirengu.com/vopumavali/1/edit?html,css,output
浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素不占用文档流，撑不开容器的宽高，块级元素不再具有占满一行的特点，收缩为自身宽度。浮动会往边靠，直到碰到容器边框或其他浮动元素，浮动元素往边上靠的时候会被其他浮动元素卡住。
- 浮动元素不再占用文档流，但其浮动的起点是在渲染完上个块级元素的后面开始浮动，并不会跨过元素向上浮动。后面的元素占用其文档流的位置。
- 浮动元素的margin、padding作用于其他浮动元素，且不与浮动元素发生外边距折叠。对于普通元素，普通元素可能会被浮动元素遮盖，可以使用
clear:both清除浮动。对于文字，会围绕着浮动元素进行布局。 - 向右的浮动元素 文字会排在下面 不会环绕
Paste_Image.png
清除浮动指什么? 如何清除浮动?
- 给元素添加
clear: left |right |both属性可以清除浮动，具有这条属性的元素，不会被浮动元素所遮盖。如果本身在浮动元素范围内，会自动跑到浮动元素的后面。 - clear 是对自身生效，会改变自身的位置！注意渲染的顺序。浮动的首个元素一般不能clear
- 可以给父容器元素定义这个CSS用以包裹浮动元素,如需要兼容IE6、7，就包含clearfix。 ::after 的作用是在元素的最后生成一个子元素
.container::after{
content: ''; //空字符
display: block;// 显示为块级元素
clear: both;//清除两侧浮动
} //用于清除浮动
.clearfix{
*zoom: 1;//用于兼容IE6、7
}
本教程版权归 张宇 和 饥人谷 所有，转载须说明来源
网友评论