Puntos de conocimiento HTML + CSS-Semana 4.md

1. El espacio en blanco debajo de la imagen

• Aparecerá un espacio en blanco de 4px debajo de la imagen de forma predeterminada (diferente con el tamaño de fuente de los padres)

Solucion 1	Agregue tamaño de fuente al padre de la imagen: 0; altura de línea: 0
Solucion 2	Agregue el atributo de alineación vertical a la imagen, el valor no es la línea de base
Solución 3	Convierta la imagen en una pantalla de elementos a nivel de bloque: bloque

2. Visibilidad del elemento

• visibilidad: visible; el elemento es visible por defecto

• visibilidad: oculta; el elemento es invisible, oculto, pero ocupando

• mostrar: ninguno; ocultar el elemento, no mostrar ni ocupar un lugar

Tres, una sola línea de texto se desborda para mostrar los puntos suspensivos

   .p1 {
        width: 200px;
        background-color: red;
        white-space: nowrap;/* 文本强制不换行 */
        text-overflow: ellipsis;/*文本溢出显示省略号*/
        overflow: hidden;/*必需要结合盒子溢出隐藏*/
   }

Cuatro desbordamientos de texto de varias líneas para mostrar puntos suspensivos

• Método 1: use los atributos extendidos del kernel de webkit (porque solo el kernel de webkit lo admite, el efecto es bueno y la compatibilidad no es buena)

   .p2 {
        width: 200px;
        background-color: skyblue;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        /*必需要结合的属性，将元素设置为弹性盒模式*/
        -webkit-line-clamp: 4;/*设置文本显示的行数*/
        -webkit-box-orient: vertical;
        /*必需要结合的属性，设置弹性盒对象的子元素，垂直排列*/
   }

• Método 2: use un pseudoelemento para simular puntos suspensivos, la compatibilidad es relativamente buena, pero el efecto no es muy bueno

   .p3 {
        position: relative;
        width: 240px;
        height: 120px;
        /*盒子高度要设置为line-height的倍数（表示要显示的倍数几倍就是几行）*/
        background-color: gold;
        line-height: 30px;
        /* overflow: hidden; */盒子溢出隐藏
   }

     
   .p3::after {
         position: absolute;
         right: 0;
         bottom: 0;
         /*通过定位设置到父元素的右下角*/
         content: '...';
         /*用伪元素添加...显示省略号*/
         /* background-color: gold; */
         padding-left: 20px;//是让伪元素变宽点
         background: linear-gradient(to right, transparent, gold 60%);
         /*往右渐变到60%后面40%全为gold色*/-添加渐变色使文字逐渐隐藏
    }

Cinco, las reglas de anidamiento de las etiquetas.

1. Los elementos de bloque, los elementos en línea y los bloques en línea se pueden anidar en elementos de bloque (caso especial: algunas etiquetas de bloque semánticas especiales ya no pueden anidar etiquetas de bloque, por ejemplo: las etiquetas h1-h6 y p ya no pueden anidar divs, algunas fijas Etiquetas coincidentes, otras etiquetas no se pueden anidar arbitrariamente, como: ul, ol, el elemento secundario directo solo puede ser li)

2. Los elementos en línea no pueden anidar elementos a nivel de bloque, los elementos de bloque en línea y en línea se pueden anidar (una etiqueta (elemento en línea) puede anidar elementos de bloque, una etiqueta no se puede anidar en una etiqueta, es se muestra como una relación de hermanos y no puede ser un padre)

Seis, BFC

1. Concepto BFC (¿qué es?)

Contexto de formato de bloque Contexto de formato de bloque

El contexto de formato se refiere a un área de representación en la página y tiene un conjunto de reglas de representación que determina cómo se colocan las sub-etiquetas, así como la relación y función con otras etiquetas.

BFC, contexto de formato a nivel de bloque, se refiere a un área de renderizado en la página, solo participa BOX de nivel de bloque (cuadro de nivel de bloque), esta área tiene un conjunto de reglas de renderizado para restringir el diseño del cuadro de nivel de bloque, y no tiene nada que ver con el exterior.

2. Cómo generar BFC

• Las siguientes situaciones son lo que he aprendido hasta ahora que pueden generar BFC:

  • Elemento raíz html

  • El valor del atributo float no es ninguno (ul, li float en sí también es un bfc tendrá una altura de ul sin clearfix)

  • El valor de la propiedad de desbordamiento no es visible

  • El valor del atributo de visualización es un bloque en línea

  • El valor del atributo de posición es absoluto / fijo

3. Características de BFC

• ①, las etiquetas de los bloques internos se colocarán una a una en dirección vertical

• * ②, la distancia vertical está determinada por el margen, los márgenes de dos etiquetas adyacentes que pertenecen al mismo BFC se superpondrán

• ③. El margen izquierdo de cada etiqueta está en contacto con el límite izquierdo del bloque que lo contiene, con margin-left, incluso si la etiqueta está flotando

• * ④, el área BFC no se superpondrá con el área de la etiqueta del flotador (.box1 flota a la izquierda. Box2 no se superpone en su lado derecho. No establece el ancho y automáticamente llena una fila para eliminar el ancho de .box1 para lograr el efecto adaptativo de la derecha)

• * ⑤. Al calcular la altura del BFC, los subelementos flotantes también participan en el cálculo (ul set overflow: hidden significa que habrá una altura y habrá una altura de li)

• ⑥. BFC es un contenedor aislado e independiente en la página. Las sub-etiquetas en el contenedor no afectarán las etiquetas externas. Por el contrario, las etiquetas externas no afectarán las etiquetas internas del bfc.

4. ¿Qué problema resuelve BFC?

• 1) Doblar los márgenes exteriores

## 2.md-三、垂直外边距合并问题
### 1、垂直方向margin-top传递问题(父子关系)


- 当父元素没有padding\border\float\position\overflow时，给子元素设置margin-top会把父元素一块儿带下来即父元素也会有margin-top

- 解决: 

   - 给父元素添加1px的上padding或者border,子元素margin-top少1px

   - 可以用父元素的padding-top实现同样式的效果



### 2、相邻元素的外边距合并（兄弟关系）

- 两同级标签，上一个设置margin-bottom:40px,下一个设置margin-top:60px，最后两者之间的外边距会合并为数值较大的那个值(60px)，不是数值相加(100px)

Según el artículo de fondo ②, los márgenes de dos etiquetas adyacentes que pertenecen al mismo BFC se superpondrán (superposición de margen de padres e hijos, superposición de márgenes de hermanos)

Solución: mantenga las etiquetas en diferentes áreas BFC para que no se superpongan

    父子边距重叠： 给父元素设置生成BFC的属性

    兄弟边距重叠： 给其中任意一个添加一层BFC父级

• 2). Realice un diseño adaptativo de dos o tres columnas (según las características ④)

Diseño de dos columnas, ancho fijo a la izquierda, autoadaptativo a la derecha (reducir y agrandar con los cambios de tamaño del navegador)

Diseño de tres columnas, las columnas izquierda y derecha tienen anchos fijos y la columna del medio es adaptable (se reduce y agranda a medida que cambia el tamaño del navegador)

   <!-- 两栏 :  
        .left  设置宽度，左浮动
        .right  宽度自动占满父级，设置overflow:hidden
    -->
    <div class="cols">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
    <!-- 
        三栏：
        标签顺序：先写左右栏，再写中间栏
        .left1   设置宽度，左浮动
        .right1  设置宽度，右浮动
        .center  宽度自动占满父级，设置overflow:hidden
     -->
    <div class="cols">
        <div class="left1"></div>
        <div class="right1"></div>
        <div class="center"></div> 
    </div>

• 3) Evitar que el texto se organice alrededor de la imagen (según las características ④)

Los elementos flotantes cubrirán los elementos no flotantes y el texto se organizará alrededor de la imagen. Establezca la etiqueta donde se encuentra el texto en BFC para evitar que el texto se ajuste.

• 4), claro flotante

De acuerdo con las características del Artículo when, al calcular la altura del BFC, los elementos secundarios flotantes también están involucrados en el cálculo, por lo que el flotante se puede borrar a través del bfc, por ejemplo, agregando overflow: hidden al padre del flotante elemento;

Siete, plano de distribución

1. Adaptable de dos columnas

• Método 1: Desbordamiento de ajuste adaptativo del lado derecho de BFC: oculto;

   <!-- 两栏   
        .left  设置宽度，左浮动
        .right  宽度自动占满父级，设置overflow:hidden
    -->
    <div class="cols">
        <div class="left"></div>
        <div class="right"></div>
    </div>

• Método 2: Posicionamiento absoluto izquierdo-relleno adaptativo-izquierda + subelemento de nivel de bloque interno a la derecha

.left 左侧栏固定宽，设置绝对定位 position:absolute;会脱离文档流，right会被覆盖一部分

.right 右侧栏宽度自动，给其添加padding-left:200px，并且添加子元素 .inner , 把右侧栏的内容放在.inner里面 


     .left{
           position: absolute;
           left: 0;
           top:0;
           width: 200px;
           height: 300px;
           background-color: rgb(202, 150, 252);
     }
        
     .right{
           padding-left: 200px;
     }
        
     .inner{
            background-color: coral;
            height: 300px;
     }

     <div class="cols">
       <div class="left"></div>
       <div class="right">
           <div class="inner">hello world</div>
       </div>
     </div>

2. Adaptable de tres columnas

• Método 1: BFC: flotar en el lado izquierdo, flotar en el lado derecho, establecer el desbordamiento en el medio de forma adaptativa: oculto;

   <!-- 三栏
   
        标签顺序：先写左右栏，再写中间栏

        .left1  设置宽度，左浮动

        .right1  设置宽度，右浮动

        .center 宽度自动占满父级，设置overflow:hidden

    -->

    <div class="cols">
        <div class="left1"></div>
        <div class="right1"></div>
        <div class="center"></div> 
    </div>

• Método 2: Diseño del Santo Grial

Primero el medio, luego el izquierdo y el derecho, el ancho del medio es aproximadamente un 100% de ancho fijo, los tres quedan flotando, el izquierdo y el derecho se establecen en el margen izquierdo, el medio principal cubrirá las partes izquierda y derecha, tres en una fila

Establezca los márgenes internos izquierdo y derecho del contenedor al ancho de la sangría de los lados izquierdo y derecho

Posición de posicionamiento relativa: relativa a los lados izquierdo y derecho; desplazamiento a los lados izquierdo y derecho-eversión

• Para que el contenido principal se cargue primero, el orden de las etiquetas es .main .left .right

• El ancho .main se establece en 100%, el ancho .izquierdo es 200px y el ancho derecho es 240px

• .main, .izquierda, .derecha las tres columnas flotan a la izquierda

• .left add margin-left: -100%; tire hacia el extremo izquierdo, .right add margin-left: -240px; tire hacia la derecha de las tres columnas, .main está cubierto por los lados izquierdo y derecho

   圣杯布局解决覆盖问题：

 - 给父级.container添加padding:0 240px 0 200px; 这个时候.mian 宽度正常，左右两栏同时被挤到中间

 - 给.left 添加position:relative;left:-200px; 往左移

 - 给.right 添加position:relative;right:-240px; 往右移

   <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
   </div>

   .container {
         height: 500px;
         padding: 0 240px 0 200px;
   }     
   .main {
         float: left;
         width: 100%;
         height: 100%;
         background-color: red;
   }      
   .left {
         position: relative;
         left: -200px;
         float: left;
         margin-left: -100%;
         width: 200px;
         height: 100%;
         background-color: green;
    }
    .right {
         position: relative;
         right: -240px;
         float: left;
         margin-left: -240px;
         width: 240px;
         height: 100%;
         background-color: yellow;
    }

• Método tres: diseño de doble ala voladora

Primero el medio, luego el izquierdo y el derecho, el ancho del medio es aproximadamente un 100% de ancho fijo, los tres quedan flotando, el izquierdo y el derecho se establecen en el margen izquierdo, el medio principal cubrirá las partes izquierda y derecha, tres en una fila

Establezca el elemento interno del bloque en el medio de main, y establezca los valores de margen izquierdo y derecho para inner

• Para que el contenido principal se cargue primero, el orden de las etiquetas es .main .left .right

• El ancho .main se establece en 100%, el ancho .izquierdo es 200px y el ancho derecho es 240px

• .main, .izquierda, .derecha las tres columnas flotan a la izquierda

• .izquierda agregar margen-izquierda: -100%; tirar hacia el extremo izquierdo, .derecha agregar margen-izquierda: -240px; tirar hacia la derecha de las tres columnas. La principal está cubierta por las barras laterales izquierda y derecha

   双飞翼解决覆盖的问题：

 - 给.main添加一层子元素 .main-inner 

 - 给 .main-inner 添加外边距  margin:0 240px 0 200px;把主体内容都放在 .mian-inner里面
   

   <div class="container">
        <div class="main">
            <div class="inner">
                hello
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
   </div>

   .container {
            height: 500px;
   }
   .main {
            float: left;
            width: 100%;
            height: 100%;
            background-color: red;
    }
    .left {
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 100%;
            background-color: green;
    }
    .right {
            float: left;
            margin-left: -240px;
            width: 240px;
            height: 100%;
            background-color: lightseagreen;
    }
    .inner {
            margin: 0 240px 0 200px;
            background-color: skyblue;
    } 

8. Diseño de contorno

Diseño de varias columnas, una de las columnas se vuelve más alta y las otras columnas tienen la misma altura

Método 1: utilice el principio de compensar los márgenes interior y exterior para configurar cada columna

• fondo acolchado: 9999px;

• margen inferior: -9999px;

• Haga que el fondo sea lo suficientemente grande como para compensar el espacio de relleno

• Ventajas: estructura simple, mejor compatibilidad

• Desventajas: pseudocontorno, necesidad de controlar razonablemente la parte inferior del relleno, la parte inferior del margen

   .container{
            width: 1000px;
            border: 2px solid black;
            margin: 0 auto;
            overflow: hidden;
   }
   .left{
            float: left;
            width: 300px;
            background-color: pink;
            padding-bottom: 9999px;
            margin-bottom:-9999px;
   }
   .center{
            float: left;
            width: 400px;
            background-color: lightgreen;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
   }
   .right{
            float: left;
            width: 300px;
            background-color: lightskyblue;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
   }

Método 2: agregue un padre común de múltiples capas correspondiente a cada columna múltiple, y luego establezca el margen izquierdo

• Para varias columnas, agregue varios niveles de nivel principal, establezca diferentes colores de fondo para el nivel principal, ajuste la posición de varios niveles del nivel principal a través del margen y escalone el fondo de varias columnas. Finalmente, ajuste la columna de contenido al fondo correspondiente mediante un margen negativo.

• Ventajas: altura realmente igual, buena compatibilidad

• Desventajas: estructura compleja, relativamente difícil de entender

   <div class="container">
        <div class="bg2">
            <div class="bg3 clearfix">
                  <div class="left">
                  <div class="center">
                  <div class="right">
            </div>
        </div>
   </div>

   .container {
            width: 1000px;
            border: 2px solid black;
            margin: 0 auto;
            background-color: pink;
   }
   .bg2 {
            background-color: lightgreen;
            margin-left: 300px;
   }      
   .bg3 {
            background-color: lightskyblue;
            margin-left: 400px;
   }
   .left {
            float: left;
            width: 300px;
            margin-left: -700px;
   }
   .center {
            float: left;
            width: 400px;
            margin-left: -400px;
   }     
   .right {
            float: left;
            width: 300px;
   }

9. Manejo de problemas comunes de compatibilidad

1. Problema del borde de la imagen en ie

La imagen en ie se coloca en una etiqueta mostrará el borde

• Solución

    img{
        border:none;
    }

2. La sintaxis de atributo abreviada en segundo plano es compatible por debajo de ie8

Se debe agregar un espacio entre cada valor del atributo de abreviatura de fondo. Si aparecen los siguientes espacios que faltan, el navegador estándar puede mostrarse normalmente, pero los navegadores de ie8 y siguientes no pueden mostrar la imagen.

    background: url("...")no-repeat center;

• Solución: de acuerdo con la sintaxis estándar, agregue espacios entre varios valores

    background: url("...") no-repeat center;

3. Compatibilidad con la transparencia

• rgba () color transparente, es decir, la versión baja no es compatible

• opacidad: 0.5; Compatible con navegadores estándar, no compatible con versiones inferiores de ie

• filtro: alfa (opacidad = 50) es decir, soporte

4. Problemas de compatibilidad con versiones inferiores de ie (entender)

① En los navegadores de ie6 y anteriores, el cuadro con una altura pequeña definida no es válido

• Solución

   .box{
        height:1px;
        font-size: 0;//添加
        line-height: 0;//添加
        overflow: hidden;//添加
   }

② En el navegador ie6, la etiqueta flotante produce márgenes dobles.

• Solución: agregue _display: inline; al elemento flotante

   li{
        float:left;
        margin-left:10px;
        _display:inline;    /* 针对ie6有效 */
   }

③ En los navegadores ie7 y anteriores, se establece la posición relativa del elemento secundario y el desbordamiento: oculto; del elemento principal no es válido

• Solución: también agregue la posición: relativa; al elemento padre

  .parent{
          position: relative;
          overflow: hidden;
   }
  .child{
          position: relative;
          left: 150px;
   }

④ En los navegadores de ie7 y anteriores, el elemento de bloque se cambia al bloque en la línea y no se muestra en una línea

• Solución

   div{
        display:inline-block;
        *display:inline;//添加
        *zoom:1;//添加
   }

⑤ En los navegadores de ie7 y anteriores, cuando dos o más subelementos flotan en li, habrá un problema en blanco entre li

• Solución: agregue vertical-align: top; to li

   li{
        vertical-align:top;
   }

补充:
    如果需要从服务器环境中打开页面,可以安装插件  live server , 打开页面选择 open with live Server

Diez, tecnología CSS Hack

CSS Hack usa algunos métodos especiales para tratar los problemas de compatibilidad entre diferentes navegadores. En algunos casos, usar CSS Hack para manejar la compatibilidad puede obtener el doble de resultado con la mitad del esfuerzo. El abuso de la piratería css afectará el rendimiento de la página y es difícil de mantener, por lo que debe evitarse una gran cantidad de técnicas de piratería css.

1, condición Hack

• IE de la versión 10 y superior no admite hack condicional, por lo que el siguiente código solo se mostrará en IE9 y a continuación

    <!--[if ie]>

        <p>这个段落只有ie会显示</p>

    <![endif]-->

• Palabra clave

Mayor que gt mayor o igual que gte

    <!--[if gt ie 8]>

        <p>这个段落只有ie8以上会显示</p>

    <![endif]-->

Menor que lt menor o igual que lte

    <!--[if lt ie 8]>

        <p>这个段落只有ie8以下会显示</p>

    <![endif]-->

igual

    <!--[if ie 8]>

        <p>这个段落只有ie8会显示</p>

    <![endif]-->

2. Hackeo a nivel de atributo

El truco a nivel de atributo consiste en agregar símbolos especiales a los atributos de CSS para manejar la compatibilidad de diferentes versiones de navegadores.

    _ : ie6及以下版本浏览器识别

    * ：ie7及以下版本浏览器识别

    \0: ie8及以上浏览器识别


   .box{
        background-color: red;  /*所有浏览器识别*/
        _background-color:yellow;
        *background-color:lightblue;
        background-color: hotpink\0;
   }

3. Seleccione truco de nivel de símbolo

* html seleccione ie6 y navegadores inferiores

* + html solo seleccione el navegador ie7

   .box{
        background-color: red;
   }
   *html .box{
            background-color: yellow;
   }
   *+html .box{
            background-color: lightblue;
   }

11. Tecnología de puertas correderas

Para que el fondo de la forma especial se adapte al contenido del texto en el elemento, aparece la tecnología de puerta corredera. Como la navegación de WeChat.

Utilice principalmente el posicionamiento del fondo y el relleno para apuntalar el ancho de la caja.

Implementación específica: primero etiquete a, establezca la imagen de fondo de a a la izquierda, agregue un padding-left a a, luego agregue una etiqueta de intervalo a a, establezca la etiqueta de intervalo en la misma posición de fondo a la derecha, agregue padding- derecho al tramo (ay el tramo deben convertirse a nivel de bloque)

   <ul>
        <li>
            <a href="#">
                <span>首页页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>帮助与反馈</span>
            </a>
        </li>
   </ul>

   ul li a{
        display: block;
        padding-left: 16px;
        background: url("https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png") no-repeat left;

   }

   ul li a span{
        display: block;
        background: url("https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png") no-repeat right;
        padding-right: 16px;
   }

Doce, configuración de tdk web

• Configuración del título: el título de la página web, intente enfatizar el contenido clave, la página de inicio generalmente escribe el título y la descripción general de todo el sitio web, otras páginas resumen el tema de esta página (nota: no tienen el título de cada página )

• configuración de descripción: descripción de la página web, es necesario resumir en gran medida el contenido de la página web, evitar el apilamiento excesivo, no demasiado larga y cada página no puede ser la misma (no es necesario configurarla, de acuerdo con los requisitos específicos de la página)

• Configuración de palabras clave: palabras clave de la página web, enumere las palabras clave importantes en varias páginas.

   <title>XX商城-手机,电脑...</title>
   
   <meta name="description" content="....">
   
   <meta name="keywords" content="...">

• Configuración del icono del sitio web

• Generar icono icono http://www.bitbug.net/

   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">