css flujo normal y dispuesto de pedido flujo flotante

1. flujo convencional

> Diseño de flujo general

（1） 常规流 文档流 普通文档流 常规文档流。所有元素，默认情况下，都属于常规流布局

（2）总体规则：块盒独占一行，行盒水平依次排列

> Bloque que comprende (contiene)

Cada bloque contiene su propia caja, que comprende una región de disposición de la caja de decisión bloque (sistema de coordenadas de referencia).
La mayoría de los casos, la caja que comprende un bloque, el contenido del cartucho a su elemento padre
Donde el bloque de cassette

La anchura total de cada bloque del cartucho, debe ser exactamente igual a la anchura del bloque de contención
El valor predeterminado anchura es automático, automático: absorber el espacio restante (a frontera remove, relleno, margen)

Cuando el valor de los márgenes por defecto 0, pone en auto, será absorbido el espacio restante (Ancho de la capacidad de absorber el margen)

 (1)  若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收

 (2)  在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto(左右各吸收一半)

 (3)  在常规流中，块盒在其包含块中时，将width设置为auto，左右margin设置为负数，width会随之变宽，吸收剩余内容，达到块盒的总宽度，刚好等于包含块的宽度的代数和

 (4) 每个块盒垂直方向上的auto值:

              height：auto(默认值)，被内容撑开
              
              margin：auto(默认值)，表示0

El valor porcentual

acolchado, anchura, valor de margen puede ser un porcentaje (todos los porcentajes se corresponde a la anchura del bloque de contención, con la altura no importa)

    高度的百分比：

        （1） 包含块的高度取决于子元素的高度(父元素没设置宽高)，这种情况设置宽高无效

        （2） 包含块的高度不取决于子元素的高度(父元素设置宽高)，百分比相对于包含块的高度

La distancia combinada de arriba y abajo fuera

Convencionales dos bloques fluyen casete, verticalmente se llevarán a cabo los márgenes adyacentes (máximo de dos márgenes) se combinaron

   (1)  如父元素设置了外边距，上下外边距的合并，子元素会和父元素上端重合，这也是前面的          
        before添加一个元素的content:"";的原因，使脱离重合(或者父元素设置padding)

suplemento

   当内容盒的宽高设定好，设置padding占取剩余空间（原本是margin-left占据剩余）

   当内容盒的宽高没有设定，宽度等于页面最大宽度，设置padding占取内容盒空间

2. Flujo Variable

aplicación flotante

Ajuste del texto
dispuestas lateralmente

Las características básicas de flotación

valor de la propiedad float

   - left: 左浮动,元素靠上靠左排列
   - right: 右浮动,元素靠上靠右排列
   - none: 默认值, 常规流

     注： 1.当一个元素浮动,元素必定为块盒(更改display属性为block)
         2.浮动元素的包含块，和常规流一样，为父元素的内容盒

dimensiones de la caja

  （1）宽度为auto时，适应内容宽度，如果没内容，则宽度为零  (如果是常规流，没有内容，
        会默认父级宽度,有内容也会用margin-leftz撑满整个包含块的宽度)

  （2）高度为auto时，与常规流一样，适应内容宽度

  （3）在常规流中，margin左右为auto时，会吸收父级元素剩余内容居中，如果内容占满了，margin就没有用了
          在浮动流中，margin为auto时，会自动设置为0

  （4）边框、内边距、百分比设置与常规流一样

Características disposición del baúl

  （1）左浮动的盒子靠上靠左排列
      右浮动的盒子靠上靠右排列

   （2）浮动盒子在包含块中排列时，会避开常规流块盒 

   （3）常规流块盒在包含块中排列时，不会避开浮动盒子 （看不见浮动元素的位置）

   （4）行盒在排列时，会避开浮动盒子

   （5）外边距合并不会发生(公用一个外边距)

Nota: Si el texto no es una caja de línea, el navegador generará automáticamente un cuadro de texto ajuste de línea, la línea de caja se llama las cajas de línea anónimas (lapso similar)

altura de la caja se derrumbó

   （1）原因：高度坍塌的原因：父级常规流盒子的自动高度，不会考虑浮动盒子

   （2）解决办法：清除浮动盒子的浮动
 
           清除浮动，涉及css属性：clear
          
            - none： 默认值
            - left： 清除左浮动，该元素必须出现在前面元素的左浮动盒子的下方 (看一下天上左边浮动元素的位置)
            - right：清除右浮动，该元素必须出现在前面元素的右浮动盒子的下方 (看一下天上右边浮动元素的位置)
            - both： 清除两边浮动，该元素必须出现在前面元素的浮动盒子的下方 (清除上面元素的浮动，就可以出现盒子下方，撑开盒子）

           例:  .clear::after{
                       content: "";
                       display:block;  //默认行盒
                       clear:both;
                 }

cuadro de marcador de posición

     （1）块元素独占一行

     （2）float(浮动)
            float:left; //可以使块元素从左到右依次排列，#可以同在一行,直到排不下
            flaot:right;//可以使块元素从右到左依次排列，#可以同在一行,直到排不下

      ### 补充
                    浮动盒子的顶边不得高于上一个盒子的顶边

                    若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左向右排列

Leadingme

Publicado 20 artículos originales · ganado elogios 1 · vistas 59

carta privada preocupaciones