1. 块级元素和行内元素有什么区别？
- 块级元素
总是独占一行，表现为另起一行开始， 而且其后的元素也必须另起一行显示；
width,height,padding,margin都可以设置；
可以包含块级元素和行内元素； - 行内元素
和相邻的内联元素总占一行；
width,height,margin-top,margin-bottom,padding-top,padding-bottom设置无效。
只能包含行内元素和文本；
2.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？
一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间。
- 父容器感知不到浮动元素的存在，因此父容器的宽度不受浮动元素影响，造成父元素高度塌陷
- 与其他浮动元素类似行内元素排列。
- 普通元素也感知不到浮动元素的存在，会被浮动元素覆盖。
- 文字因为是匿名行盒，可以看到浮动元素，会围绕着浮动元素。
3.清除浮动指什两种以上么?如何清楚浮动？两种以上方法
- overflow: hidden
<div class="links">
<a href="#" class="forget">忘了密码？</a>
<a href="#" class="register">注册新账号</a>
</div>
.links { overflow: hidden; }
.links .forget { float: left; }
.links .register { float: right; }
- .clearfix
将以下 .clearfix 类应用到需要清除浮动的父元素。
.clearfix::after {
content: '';
clear: both;
display: block;
}
4.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit继承：继承父元素的position属性
- static无定位：没有定位，元素出现在普通文档流中，设置top, right, bottom, left不起任何作用。
- relative：相对定位。元素不脱离文档流。参考点：自身在文档流中的位置。使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。
- absolute：绝对定位。元素脱离文档流。参考点：距离最近的非static祖先元素
位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。使用场景：元素的水平垂直居中。 - fixed：基于浏览器固定定位。元素脱离文档流。参考点：参考浏览器窗口的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏
5.z-index有什么作用？
z-index作用： 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值 使用方法： z-index 仅能在定位元素上奏效，css中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。此属性参数值越大，则被层叠在最上面。
网友评论