CSS入门（3）

2017-08-10 本文已影响0人飘飘流浪者

块级元素和行内元素有什么区别？

块级元素会占据一行的位置，其宽度自动填满其父元素宽度；行内元素不会独占一行，相邻的行内元素会排在同一行，其宽度随元素的内容而变化。
宽高只对块级元素设置生效，对行内元素无效。块级元素即使设置了宽度，仍然是独占一行。
块级元素可以设置margin和padding属性；行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其上下padding会延伸出去，但不会增加上下两行间的距离。
块级元素对应于display:block；行内元素对应于display:inline。

float属性指定一个元素应沿其容器的左侧或右侧放置，文本和内联元素将围绕它。
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下。
如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层，但它的内部文字和其他行内元素都会环绕浮动元素。如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
对文字：文字环绕浮动元素。

由于浮动的副作用1.对后续元素位置产生影响；2. 父容器高度计算出现问题，所以需要清除浮动。
clear:left/right/both：适用于浮动和非浮动元素,表示如果该元素前面有左/右浮动元素，则该元素出现于其下方。clear规则只影响使用清除的元素本身，不能影响其他元素。
给需要清除浮动的元素设置一个伪元素。

.clearfix::after {
  content:'';
  display: block;
  clear: both;
}

将伪元素设置为块属性以撑开父容器。

position: static 默认值 默认的布局方式。具有文档流。
position: relative 相对定位 相对默认的布局位置进行定位。即相对自己定位。参考点是自己。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此移动元素会导致它覆盖其它框。
position:absolute 绝对定位 绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位。定位上下文就是值绝对定位元素相对哪个元素定位，默认的定位上下文是 <html>。假如你想设定某个绝对定位元素的定位上下文，则需要在这个元素的某个祖先元素上设置 position: relative。如果设置了absolute但没有设置值，那么使用了absolute的元素在页面中的位置不会改变，但已经脱离了文档流，与普通流已不在一个index-z层面上，因此不占据空间。
position:fixed 固定定位 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。
当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index取值方可生效。此属性参数值越大，则被层叠在最上面。