Puntos de conocimiento HTML + CSS-Semana 2.md

1. Estado pseudoclase (enlace) una etiqueta

   a:link{  // 链接未访问状态
       color: aqua; 
   }
   a:visited{  // 链接访问过后
       color: brown;
   }
   a:hover{  // 链接悬停状态
       color:yellow;
   }
   a:active{ // 链接的激活状态（鼠标按下）
       color: pink;
   }
   
hover不仅可以表示链接的悬停，其他的标签也可以使用

En segundo lugar, el modelo de caja

• En CSS, cada etiqueta se considera una caja, con una estructura de cuatro capas, a saber, contenido, margen interior (relleno interior), borde y margen exterior.

   1.content 尺寸=width+height
   2.padding 盒子的边缘和内容之间的距离,这段距离会显示背景，不会显示内容
   3.border 边框是指盒子边缘的线条
   4.margin 是指盒子和相邻元素或者父元素之间的距离

   padding-top/bottom/left/right
   boder-top/bottom/left/right
   margin-top/bottom/left/right

   margin:0 auto;  /*块元素水平居中*/

边框简写属性 border:border-width border-style border-color
   border:30px solid black;      
   border-right: 0;   /*去掉边框两种写法*/
   border-left: none;

内边距：
       padding:10px;   上下左右四个方向内边距相同
       padding:10px 20px;  上下     左右
       padding:10px 20px 30px;  上   左右   下
       padding:10px 20px 30px 40px;  上   右  下   左
边框：
       border-width:2px;  设置边框宽度
       border-style:solid;设置边框风格  
           solid/dashed/dotted/double 实/虚/点/双实线  
       border-color:red;  设置边框颜色

       border-top-width: 2px;  设置上边框的宽度
       border-top-style: solid;  设置上边框的风格
       border-top-color: yellow;  设置上边框的颜色

       bottom、left、right三个方向和top同理
外边距：
       margin:10px;   上下左右四个方向外边距相同
       margin:10px 20px;  上下     左右
       margin:10px 20px 30px;  上   左右   下
       margin:10px 20px 30px 40px;  上   右  下   左

       margin:0 auto;  水平居中

   * margin可以设置负值，可以通过负值减少元素的占位，比如margin-top为负值（-50px），元素垂直方向会往上移动，并且减少50px的占位       

En tercer lugar, el problema de la fusión del margen vertical

1. Problema de transferencia de margen vertical superior (relación entre padres e hijos)

   当父元素没有padding\border\float\position\overflow时，给子元素设置margin-top会把父元素一块儿带下来即父元素也会有margin-top
 解决: 
    1. 给父元素添加1px的上padding或者border,子元素margin-top少1px
    2. 可以用父元素的padding-top实现同样式的效果

2. Los márgenes de los elementos adyacentes se fusionan (relación de hermanos)

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

Cuatro, conversión de tipo de caja

   display:block;  设置成块级标签
   display:inline;  设置成行内标签
   display:inline-block;  设置成行内块级标签
   display:none;  隐藏元素,页面上不显示也不占位

5. La distancia en blanco entre los bloques en la fila y el espacio en blanco adicional a continuación (hay un espacio en blanco en las direcciones horizontal y vertical)

   解决方案：
      1. 给父元素设置font-size:0;line-height:0;  
      2. 给子元素重新设置font-size和line-height

Seis, tres características principales de CSS

1. Apilabilidad

• La capacidad de un navegador para manejar conflictos de estilo.
• El estilo no entra en conflicto y no en cascada, el estilo entra en conflicto, sujeto a la última definición (principio de proximidad)

2. Herencia

• El elemento secundario puede usar ciertos estilos del elemento principal, como el texto y la fuente relacionados, siempre que se establezca el elemento principal, el valor predeterminado del elemento secundario es el mismo que el elemento principal.
• El uso adecuado de la herencia puede reducir la complejidad del código

   以下属性默认继承：
   
        text-align
        text-indent
        text-decoration
        color
        font-size
        font-family
        font-style
        font-weight
        line-height 
        letter-spacing
        word-spacing
        
   其他属性通过inherit这个值可以实现手动继承
    
        width:inherit;
        border:inherit;
    
   注意： 块级元素width不是默认继承，背景颜色background-color默认是透明也不是继承
   注意： a标签的颜色和文本修饰默认不会继承，需要选中a标签才能修改

3. Prioridad

• Los estilos en línea tienen la máxima prioridad
• El peso del selector básico, a mayor peso, mayor prioridad

Selector	Peso
* (Comodín)	0
tagName (selector de etiquetas)	1
.class (selector de clase) \ pseudo clase	10
#id (selector de ID)	100
Estilo en línea	1000

• En la mayoría de los casos, los pesos del selector compuesto se agregan a los pesos de los selectores básicos que componen el selector compuesto (caso especial: el selector de grupo es un cálculo único y no se superpone)
• Los pesos del selector son los mismos y la definición posterior entra en vigor

   后代   .box div  (10 + 1 = 11)
   子代   .box>div  (10 + 1 = 11)
   群组   h1,.box  不会相加，单个计算 h1 1   .box 10
   交集   div.box  (1 + 10 = 11)
   
特殊情况：!important 命令可以把样式优先级提升最高，比行内样式优先级更大，不推荐使用加入到代码中。

Siete, alineación vertical

   vertical-align
           baseline  默认值，基线对齐
           middle  中线对齐
           top  顶部对齐
           bottom 底部对齐

1. Alinee la línea central de la imagen y el texto, y establezca alineación vertical: medio para la imagen;

   css:
        .box img{
            width:150px;
            vertical-align: middle;
        }

   html:

   <div class="box">
        文字pgP 
        <img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png" alt="">
   </div>

2. Alinee la línea media de los elementos en la línea, ajuste vertical-align: middle para los dos elementos en la línea;

   css：
        .span1,.span2{
            background-color: red; 
            vertical-align: middle;
        }
        .span1{
            font-size: 30px;
        }
   html:
   <span class="span1">span1</span>
   <span class="span2">span2</span>

3. Alinee la línea central de los elementos del bloque en línea y establezca alineación vertical: medio para ambos bloques en línea;

   css：
        .span3,.span4{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            vertical-align: middle;
        }
   html:
   <span class="span3">span3</span>
   <span class="span4">span4 <br> span44</span>

8. Flotante

• Modo de diseño: flujo de documentos, diseño flotante, diseño de capas (diseño de posicionamiento)
• Flujo de documentos: los elementos se organizan en la página de acuerdo con sus propios atributos, con bloques de arriba a abajo y líneas de izquierda a derecha.

1. Flaot flotante izquierda y derecha: izquierda / derecha

Flotador izquierdo	Flotador derecho: derecho
El elemento flotante a la izquierda irá lo más lejos posible hacia la izquierda hasta que golpee el borde del elemento principal o el elemento flotante adyacente.	El elemento flotante a la derecha irá lo más a la derecha posible hasta que golpee el borde del elemento principal o el elemento flotante adyacente.
Salga del flujo de documentos sin ocupar un lugar	Salga del flujo de documentos sin ocupar un lugar
Varios elementos flotantes a la izquierda están ordenados de izquierda a derecha.	Varios elementos flotantes a la derecha están ordenados de derecha a izquierda.

2. Cancelar flotación flotante: ninguna

• Volver al marcador de posición del flujo de documentos

• Complemento: después de que los elementos flotantes abandonen el flujo del documento, pueden sobrescribir los elementos en el flujo del documento, pero el texto, las imágenes y los elementos del formulario no se sobrescribirán y se organizarán alrededor de los elementos flotantes.

Nueve, claro flotando

• Resuelva el problema de que la altura del padre no se puede admitir después de que el elemento flotante abandona el flujo de documentos

Soluciones (4 tipos)
Al establecer el atributo de altura en el elemento principal, el código tiene escasa escalabilidad (inconveniente de mantener)
Establecer desbordamiento: oculto; para el elemento padre porque desbordamiento: oculto; en sí mismo tiene el efecto de ocultar la parte de desbordamiento del elemento, por lo que no se puede usar en algunos casos
Método de etiqueta adicional: agregue un elemento no flotante después de todos los elementos flotantes y agregue el atributo clear: both. Aumentará el código redundante en la estructura.
Agregue etiquetas por medio de pseudo-elementos (el mismo principio que el método de etiqueta adicional), uso: predefinir la clase .clearfix en la hoja de estilo y agregarla a la etiqueta que debe borrarse (el padre de todos los elementos flotantes) nombre de clase clearfix

样式表中预先定义好.clearfix类--推荐使用

   .clearfix::after{
            content: '';
            display: block;
            clear: both;
    }
   .clearfix{
            *zoom:1;
   }

Diez, el desbordamiento especifica cómo mostrar el desbordamiento del contenido del elemento

   overflow:visible; 溢出显示（默认值）
            hidden;  溢出隐藏，多出的部分被直接截断
            scroll;  始终显示滚动条区域
            auto;    内容溢出显示滚动条，内容不溢出就不显示滚动条

11. Pseudoelementos

Escenario de uso: generalmente se usa para agregar algún procesamiento de estilo a la pieza

• :: after agrega un pseudo elemento al final (dentro) del elemento
• :: before agrega un pseudo elemento al principio (dentro) del elemento

12. Atributos de fondo

1. Taquigrafía para los atributos de fondo

• fondo: repetición de la posición de la imagen en color;
• Se puede ajustar el orden de cada valor en el atributo abreviado y se pueden omitir los atributos que no necesitan establecerse

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

   背景颜色
   background-color:#000;
   background-color:transparent; 透明

   背景图片
   background-image:url("...");

   背景重复
   background-repeat: repeat     默认值，水平和垂直都铺满
                      repeat-x   水平重复
                      repeat-y   垂直重复
                      no-repeat  不重复 

   背景定位
   background-position: 水平  垂直;
        left/center/right top/center/bottom
        x-length  y-length  ,设px, X正右移负左移， y正数下移负上移
        x-%  y-%  ,设%,X 0%-最左边,100%-最右边,50%表-中间，Y 0%-顶部，100%-底部，50%-中间
     
背景定位属性值，如果只设置一个方向，表示另一个方向默认位center

2. La diferencia entre las imágenes de una página web y las imágenes de fondo

Imagen de la página web	Imagen de fondo
En relación con el contenido web, se deben agregar imágenes más importantes mediante etiquetas img	No tiene nada que ver con el contenido, usa una imagen de fondo como patrón decorativo en la página web.
Como imágenes publicitarias, imágenes de productos, imágenes de logotipos ...	Como texturas, pequeños iconos decorativos ... La imagen de fondo no puede contener el tamaño del elemento