CSS笔记

发表于   |  

浮动

元素浮动就像上浮到上一图层

假设块元素A是浮动的，如果A在DOM中的上一元素是普通流中元素，那么A的顶部和上一元素的底部对齐，也即A的相对垂直位置不变；如果A的上一元素也是浮动的，那么A会跟在上一元素的后面，一行放不下时放到下一行。

清除浮动时要记住：clear属性只能影响使用clear属性的元素本身

块元素在普通流中竖向排列，在浮动之后可理解为横向排列，清除浮动可理解为打破横向排列

浮动元素的原本目的是实现文本环绕，它没有高度不在普通流中，但表现得就像是多行的inline-blocks，占着宽度使文字和其他inline-block环绕。

闭合浮动

使浮动元素的父元素像只包含普通流那样高度表现正常。方法有两种：

  1. 给父元素添加.clearfix类，在.clearfix:after伪元素上设置clear属性。这种方法更好
1
2
3
4
5
.clearfix:after {
  content: ' ';
  display: block;
  clear: both;
}

clear属性表明该元素的哪一边不能有浮动元素

原理是：在元素的margin-top之上添加额外的clearance间隔，使元素盒子最终落在浮动元素的下方，并由这clearance撑起了父元素的高度。

上述方法第一个浮动元素的的top-margin，会越过父元素的border，与父元素前一元素的bottom-margin重合。要像下面的BFC方法那样使父元素表现为一个独立的盒子，可用这个版本：

1
2
3
4
5
6
7
8
.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
}
  1. 触发父元素的BFC来闭合浮动，比如设置父元素的overflow:hidden。这种方法总有副作用

BFC（Block Formatting Context，css3中叫flow root），就是个独立的盒子，BFC里面元素的布局不会影响外面的元素，而BFC自身是普通流的一部分。触发BFC可以通过设置：

  • overflow: hidden|scroll|auto
  • float:left|right 或 position: absolute|fixed
  • display: inline-block|inline-table|tabel-cell|table-caption

BFC是个独立的盒子，具体包括：

  • margin重叠不能跨越BFC内外
  • float元素不能跨越BFC内外

定位

只有三种定位：普通流、浮动、绝对定位，浮动或绝对定位的元素都会脱离普通流

absolute定位的基准是最近的positioned祖先（position默认值static，非static值都认为元素已positioned）。所以一般在设置元素posotion:absolute前，先找个祖先元素设置position:relative。

relative定位不影响元素在普通流中占据的位置，相对于正常位置定位显示。

fixed定位是特殊的absolute定位，相对于浏览器视窗定位

行内元素

line-height指文本行基线之间的距离

行框的构造：

  1. 非替换元素的font-size决定内容区高度，line-height值减去font-size值就是行间距，行间距的一半分别加到内容区的顶部和底部构成行内框；替换元素（如<img>、<input>等）的 height/padding/border/margin都加起来构成行内框高度
  2. 将各元素的基线与行基线对齐，替换元素的基线在其margin-bottom下边缘
  3. 指定了vertical-align的元素对其行内框作垂直偏移
  4. 最高行内框顶端和最低行内框底端之间构成行框

替换元素的padding/border/margin都起作用，影响行内框高，但line-height值不变（在垂直对齐时有用）。对非替换元素，左右方向的padding/border/margin起作用；上下padding/border尽管视觉上有影响，但不影响行内框的高度（=内容区高+行间距），不影响行框的构造；上下margin不起作用。

行内元素基本上会作为一行放置，然后分成多个部分。可以把行内元素想成是一个纸片，外围有一些塑料边。在多行上显示行内元素就像是把一个大纸片剪成一些小纸片，每个小纸片上不会增加额外的塑料边，所以看上去只是原来纸片（行内元素）的最前和最后两端出现塑料边。

inline-block作为替换元素放在行中，默认是基线对齐的。用来布局时要用vertical-align:top|bottom|middle显式对齐一下，否则内容不同将无法对齐：无文字时基线是容器的margin-bottom下边缘，有文字时基线是最后一行文字的基线。

References