元素,布局方式,BFC和清除浮动

元素:块级元素,内联元素,内联块状元素

块级元素在默认情况下会独占一块区域

               相对于块级元素的父元素来讲,块级元素占据的行默认是单独享有的。

               通过设置元素的样式为:

      display:block;

        可以让元素具有块级样式。

            块级元素的特点是:水平拉伸,垂直包裹。

            所谓水平拉伸,是相对于块级元素的父元素来说的。

            在不设置with属性时,块级元素的width会被水平拉伸,使得width+border+margin等于父元素的width;

            所谓垂直包裹,是相对于块级元素的子元素来说的。

            在块级元素没有设置子元素或者子元素with+border+margin=0时,若不设置块级元素的height属性,则height默认为0,

            若块级元素内部有一个with+border+margin=N,则块级元素的height=N;

            总结:

  1.   总是在新行开始;
  2.   高度,边距行高可控;
  3.   水平拉伸块级父元素;
  4.   垂直包裹内联元素和其他元素。

 内联元素:可以与其他元素共享同一行。

            通过设置元素的样式为:

      display:inline;

        可以让元素具有内联样式。

            内联元素又能单独分为两类:替换元素和非替换元素

            替换元素如:img,input。这类元素和其他元素位于同一行上,拥有内在尺寸,高度、宽度、行高以及顶和底边距都可设置(有些是浏览器设置的,有些是人为提前设置的,如图片的宽和高)。

            非替换元素:内容直接包含在文档中,甚至可以认为是有衍生功能的文档。

            总结:

  1.   可以和其他内联元素共享同一行;
  2.   line-height, margin-left, margin-top,padding-left, padding-right可变,其中line-height会带动整行获得最大且相同的行高(最高的inlineboxes高度决定lineboxes的高度);当内联元素有背景的话,padding是会影响显示(覆盖)的。
  3.   高度,其余边距不可改变;
  4.   只能容纳文本、其他非块级元素。

内联块状元素:同时具备内联和块状元素的特点

           可以和文本和非块级元素位于同一行上;同时元素的高度、宽度、行高以及顶和底边距都可设置。

           通过设置元素的样式为:

display:inline-block;

 

布局方式:普通流,浮动,绝对定位

普通流(Normal Flow):HTML默认的从左到右,自上而下的布局方式。

浮动(Floats):浮动的框可以向左或向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样(w3c)

a.浮动会脱离正常的文档流,浮动元素A的浮动位置任然是相对于父元素所在的位置的, 

b.如果父元素也在浮动,浮动元素A任然是参照他的父元素进行浮动,这一点与浮动父元素不浮动时没有区别,但是父元素会被浮动元素撑开,拥有自适应的高度。(所谓的清除浮动)

c.其他的盒子在排版时,会无视脱离文档流的盒子,即与其相邻的盒子会发生覆盖重叠,但这些盒子中的文本却会被浮动盒子排斥而环绕浮动盒子

c.盒子的浮动会参照其父元素的width,但父元素的height不会影响浮动元素的位置,正常流中的父元素的height不会通过自适应去包裹其浮动元素,因为浮动元素已经脱离普通流。(这给排版带来一定的困难)

绝对定位(Absolute Positioning):绝对定位的元素会脱离普通流,并且完全和普通流中的元素脱离关系。

BFC(Block Formatting Context):块级格式上下文

 

 视觉格式化模型:定义了CSS中的盒模型,包括块盒(block box),行内盒(inline box)和匿名盒(anonymous box)。

 

 BFC的概念:可以理解为隔离了的容器,其内部的元素在布局上不会对外部元素产生影响。(可以将DFC暴力的直接理解为一个单独的html页面

触发方式:

  1.  浮动:除了float为no的浮动元素;
  2.  绝对定位:元素的position为absolute或者fixed
  3.  display设置为inline-blocks,table-cells,table-captions
  4.  设置overflow为除了visible 以外的值(hidden,auto,scroll)

BFC的作用主要有两个:让容器与容器间的上下边距发生折叠(大吃小);可以阻止元素被浮动元素覆盖。

通过给要清除浮动元素的父元素定义伪类:after配合zoom

 

posted @ 2016-07-29 22:47  tisikcci  阅读(295)  评论(0编辑  收藏  举报