zoukankan      html  css  js  c++  java
  • 元素,布局方式,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

     

  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number
    6. ZigZag Conversion
    5. Longest Palindromic Substring
    4. Median of Two Sorted Arrays
    3. Longest Substring Without Repeating Characters
    2. Add Two Numbers
    链式表的按序号查找
    可持久化线段树——区间更新hdu4348
    主席树——树链上第k大spoj COT
  • 原文地址:https://www.cnblogs.com/tisikcci/p/5718564.html
Copyright © 2011-2022 走看看