欢迎来到it培训的黄埔军校——智游教育!

html css重难点(一) 盒子模型及标准流下的定位-永利国际

于2017-04-06 16:42:47 发表在html5知识库
  ① 页面上的每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式(上下排列、并排排列、嵌套)堆积而成;

② 内容区域的宽度可通过width和height属性设置。增加填充、边框和边界不会影响内容区域的尺寸,但会增加盒子的总尺寸;(元素盒子的实际宽度=左边界 左边框 左填充 内容宽度 右填充 有边框 右边界)

③ 默认情况下绝大多数元素的盒子边界、边框和填充宽度都是0,盒子的背景是透明的。所以,在不设置css样式的情况下看不到元素的盒子;

④ 当对盒子设置了背景颜色和背景图像后,那么背景会覆盖padding和内容组成的范围。并且,默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的;

⑤ 边界margin值可为负,填充padding值不可为负;

⑥ 行内元素的盒子永远只能在浏览器中得到一行高度的空间;(行高由line-height属性决定,如果没设置该属性,则是内容的默认高度)

⑦ 对行内元素增大上下边框或填充值,则会使行内元素的盒子与其上下元素的盒子发生重叠,对行内元素设置width和height是不起作用的。(行内元素占据的宽度,是刚好能容纳元素中内容的最小宽度)因此,一般将行内元素设置为块级元素显示,再应用盒子属性;

⑧ 当增加行内元素a的边界和填充值时,行内元素a占据浏览器的高度并没有增加,下面这个div块仍在原来的位置,导致行内元素的盒子的上下部分和其他元素的盒子发生重叠(在firefox中他将遮盖住其它盒子,在ie6中他将被其它盒子遮盖)而左右不分不会受影响;

⑨ a. display:block; 使元素以块级元素显示;
   b. display:inline; 使元素以行内元素显示;
   c. display:none;  隐藏元素;
   其中,当某个元素被设置成(display:none;)之后,浏览器会完全忽略掉这个元素,该元素将不会被显示,也不会占据文档中的位置;(title元素默认就是此类型)

⑩ 列表项元素(display:list-item;)
   在html中只有li元素默认是此类型,将元素设置为列表项元素并设置列表样式后,它的左边将增加小黑点;

⑪ 上下margin合并问题
  a.指当有两个块级元素的盒子上下排列时,它们之间的边界margin将发生合并。也就是说,两个盒子边框之间的距离等于着两个盒子边界值的较大者;(块级元素上下margin叠加的一个例子是,由个段落p元素组成的典型文本页面)
  b.第一个p元素上面的空白等于段落p和段落p之间的空白宽度;这说明了段落之间ed上下margin发生了合并,从而使段落各处的距离相等了;

⑫ 父子元素空白边叠加问题
  a.当一个元素包含在其父元素中时,若父元素的边框和填充为0,此时父元素和子元素的margin挨在一起。那么父元素的上下margin,会和子元素的上下margin发生合并,但是左右margin不会发生合并现象;
  b.若父元素的边框和填充不为0,或父元素中还有其他内容,那么父元素和子元素的margin会被分隔开。因此,不存在margin合并的问题;
  c.(经验:)如果有盒子嵌套,要调整外面盒子和里面盒子之间的距离,一般用外面盒子的padding爱调整,不要用里面盒子的margin。这样就可避免父子元素上下margin合并问题;

⑬ 左右margin不会合并
   行内元素的左右margin等于相邻两边之和,不会发生合并;

⑭ 嵌套盒子在ie和firefox中的不同显示
   当一个块级元素包含在另一个块级元素当中时,若对父块设置高度,但父块的高度不足以容纳子块时,ie将使父块的高度自动伸展,达到能容纳子块的最小高度为止。有时,若设置了子块高度,ie还将使自动压缩,直到能容纳内容的最小高度为止。而firefox对父块和子块均以定义的高度为准,父块高度不会伸展,任其子块露在外面,子块高度也不会压缩;