HTML + CSS Knowledge Points-Week 4.md

1. O espaço em branco abaixo da imagem

• Um espaço em branco de 4 pixels aparecerá abaixo da imagem por padrão (diferente do tamanho da fonte do pai)

Solução 1	Adicione o tamanho da fonte ao pai da imagem: 0; altura da linha: 0
Solução 2	Adicione o atributo de alinhamento vertical à imagem, o valor não é a linha de base
Solução 3	Converta a imagem em uma exibição de elemento de nível de bloco: bloco

2. Visibilidade do elemento

• visibilidade: visível; o elemento é visível por padrão

• visibilidade: oculto; o elemento é invisível, oculto, mas ocupando

• exibir: nenhum; ocultar o elemento, não exibir ou ocupar um lugar

Três, uma única linha de texto transborda para exibir as reticências

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

Quatro, o texto de várias linhas transborda para exibir reticências

• Método 1: use os atributos estendidos do kernel do webkit (porque apenas o kernel do webkit oferece suporte, o efeito é bom e a compatibilidade não é boa)

   .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 o pseudoelemento para simular reticências, a compatibilidade é relativamente boa, mas o efeito não é muito bom

   .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色*/-添加渐变色使文字逐渐隐藏
    }

Quinto, as regras de aninhamento de tags

1. Elementos de bloco, elementos embutidos e blocos embutidos podem ser aninhados em elementos de bloco (caso especial: algumas tags de bloco semântico especiais não podem mais aninhar tags de bloco, por exemplo: as tags h1-h6 e p não podem mais aninhar divs, algumas fixas Tags correspondentes, outras tags não podem ser aninhadas arbitrariamente, como: ul, ol, o elemento filho direto só pode ser li)

2. Elementos in-line não podem aninhar elementos de nível de bloco, elementos de bloco in-line e in-line podem ser aninhados (uma tag (elemento in-line) pode aninhar elementos de bloco, uma tag não pode ser aninhada em uma tag, é exibido como um relacionamento de irmão e não pode ser um pai)

Seis, BFC

1. Conceito BFC (o que é?)

Contexto de formatação de bloco Contexto de formatação de bloco

O Contexto de Formatação refere-se a uma área de renderização na página e possui um conjunto de regras de renderização, que determina como as submarcas são posicionadas, bem como a relação e função com outras marcas.

BFC, contexto de formatação de nível de bloco, refere-se a uma área de renderização na página, apenas BOX de nível de bloco (caixa de nível de bloco) participa, esta área tem um conjunto de regras de renderização para restringir o layout da caixa de nível de bloco, e não tem nada a ver com o exterior.

2. Como gerar BFC

• As seguintes situações são o que aprendi até agora que podem gerar BFC:

  • Html do elemento raiz

  • O valor do atributo float não é nenhum (ul, li float em si também é um bfc terá uma altura de ul sem clearfix)

  • O valor da propriedade de estouro não é visível

  • O valor do atributo de exibição é inline-block

  • O valor do atributo de posição é absoluto / fixo

3. Características do BFC

• ①, as etiquetas do bloco interno serão colocadas uma a uma na direção vertical

• * ②, a distância vertical é determinada pela margem, as margens de duas etiquetas adjacentes pertencentes ao mesmo BFC se sobreporão

• ③. A margem esquerda de cada etiqueta está em contato com o limite esquerdo do bloco que o contém, com a margem esquerda, mesmo que a etiqueta seja flutuante

• * ④, a área BFC não se sobrepõe à área do rótulo do flutuador (.box1 flutua à esquerda. Box2 não se sobrepõe ao lado direito. Ele não define a largura e preenche automaticamente uma linha para remover o largura de .box1 para obter o efeito adaptativo à direita)

• * ⑤. Ao calcular a altura do BFC, os subelementos flutuantes também participam do cálculo (ul set overflow: oculto significa que haverá uma altura, e haverá uma altura de li)

• ⑥. BFC é um contêiner isolado e independente na página. As subtags no contêiner não afetarão as tags externas. Pelo contrário, as tags externas não afetarão as tags internas do bfc.

4. Que problema o BFC resolve?

• 1) Dobrando as margens externas

## 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)

De acordo com o artigo complementar ②, as margens de dois rótulos adjacentes pertencentes ao mesmo BFC se sobreporão (sobreposição de margem pai-filho, sobreposição de margem irmão)

Solução: mantenha as tags em diferentes áreas BFC para que não se sobreponham

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

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

• 2). Realize o layout adaptativo de duas ou três colunas (de acordo com as características ④)

Layout de duas colunas, largura fixa à esquerda, auto-adaptável à direita (reduzir e aumentar com alterações no tamanho do navegador)

Layout de três colunas, as colunas esquerda e direita têm larguras fixas e a coluna do meio é adaptável (encolher e aumentar conforme o tamanho do navegador muda)

   <!-- 两栏 :  
        .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) Impedir que o texto seja arranjado ao redor da imagem (de acordo com as características ④)

Os elementos flutuantes cobrirão os elementos não flutuantes e o texto será organizado ao redor da imagem. Defina o rótulo onde o texto está localizado como BFC para evitar quebra de linha

• 4), flutuação clara

De acordo com as características do Artigo ⑤, ao calcular a altura do BFC, os elementos filhos flutuantes também estão envolvidos no cálculo, de forma que o flutuante pode ser apagado através do bfc, por exemplo, adicionando overflow: escondido para o pai do flutuante elemento;

Sete, plano de layout

1. Adaptável de duas colunas

• Método 1: estouro de configuração adaptativa do lado direito do BFC: oculto;

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

• Método 2: posicionamento absoluto esquerdo - preenchimento adaptativo - esquerdo + subelemento de nível de bloco interno à direita

.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. Adaptável de três colunas

• Método 1: BFC- Flutuar no lado esquerdo, flutuar no lado direito, definir overflow no meio adaptativamente: 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: Layout do Santo Graal

Primeiro o meio, depois a esquerda e a direita, a largura do meio é cerca de 100% da largura fixa, todos os três são flutuantes à esquerda, a esquerda e a direita são definidas como margem esquerda, o principal do meio cobrirá as partes esquerda e direita - três em uma

Defina as margens internas esquerda e direita do contêiner para a largura da indentação dos lados esquerdo e direito

Posição de posicionamento relativa: relativa nos lados esquerdo e direito; deslocamento para os lados esquerdo e direito - eversão

• Para fazer o conteúdo principal carregar primeiro, a ordem das tags é .main .left .right

• a largura do .main é definida como 100%, a largura do .esquerdo é 200px e a largura do .right é de 240px

• .main, .left, .right todas as três colunas flutuam para a esquerda

• .left add margin-left: -100%; puxar para a extrema esquerda, .right add margin-left: -240 px; puxar para a direita das três colunas, .main é coberto pelos lados esquerdo e direito

   圣杯布局解决覆盖问题：

 - 给父级.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 três: layout de asa voadora dupla

Primeiro o meio, depois a esquerda e a direita, a largura do meio é cerca de 100% da largura fixa, todos os três são flutuantes à esquerda, a esquerda e a direita são definidas como margem esquerda, o principal do meio cobrirá as partes esquerda e direita - três em uma

Defina o elemento interno do bloco no meio do principal e defina os valores das margens esquerda e direita para interno

• Para fazer o conteúdo principal carregar primeiro, a ordem das tags é .main .left .right

• a largura do .main é definida como 100%, a largura do .esquerdo é 200px e a largura do .right é de 240px

• .main, .left, .right todas as três colunas flutuam para a esquerda

• .left add margin-left: -100%; puxar para a extrema esquerda, .right add margin-left: -240 px; puxar para a direita das três colunas. Main é coberto pelas barras laterais esquerda e direita

   双飞翼解决覆盖的问题：

 - 给.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. Layout de contorno

Layout de várias colunas, uma das colunas fica mais alta e as outras colunas têm a mesma altura

Método 1: use o princípio de compensar as margens interna e externa para definir cada coluna

• acolchoamento inferior: 9999px;

• margin-bottom: -9999px;

• Faça o fundo grande o suficiente para compensar o espaço de preenchimento

• Vantagens: estrutura simples, melhor compatibilidade

• Desvantagens: pseudo contorno, necessidade de controlar razoavelmente o preenchimento inferior, margem inferior

   .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: adicione um pai comum multicamada correspondente a cada coluna múltipla e, em seguida, defina a margem esquerda

• Para várias colunas, adicione vários níveis de nível pai, defina cores de fundo diferentes para o nível pai, ajuste a posição de vários níveis de nível pai por meio da margem e escalone o plano de fundo de várias colunas. Por fim, ajuste a coluna de conteúdo ao plano de fundo correspondente por meio de uma margem negativa.

• Vantagens: Altura realmente igual, boa compatibilidade

• Desvantagens: estrutura complexa, 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. Tratamento de problemas comuns de compatibilidade

1. Problema de borda da imagem em ie

A imagem, ou seja, é colocada na marca e exibirá a borda

• Solução

    img{
        border:none;
    }

2. A sintaxe do atributo abreviado do plano de fundo é compatível abaixo de ie8

Um espaço deve ser adicionado entre cada valor do atributo de abreviação de fundo. Se os seguintes espaços ausentes ocorrerem, o navegador padrão pode ser exibido normalmente, mas os navegadores de ie8 e abaixo não podem exibir a imagem.

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

• Solução: de acordo com a sintaxe padrão, adicione espaços entre vários valores

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

3. Compatibilidade de transparência

• rgba () cor transparente, ou seja, a versão baixa não suporta

• opacidade: 0,5; compatível com navegadores padrão, não compatível com versões anteriores do ie

• filtro: alfa (opacidade = 50) ou seja, suporte

4. Problemas de compatibilidade com versões inferiores do ie (entender)

① Em navegadores de ie6 e abaixo, a caixa com uma pequena altura definida é inválida

• Solução

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

② No navegador ie6, o rótulo flutuante produz margens duplas.

• Solução: adicione _display: inline; ao elemento flutuante

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

③ Em navegadores ie7 e inferiores, o posicionamento relativo do elemento filho é definido, e o estouro: oculto; do elemento pai é inválido

• Solução: também adicione posição: relativa; ao elemento pai

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

④ Em navegadores de ie7 e abaixo, o elemento de bloco é alterado para o bloco na linha e não é exibido em uma linha

• Solução

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

⑤ Em navegadores de ie7 e abaixo, quando dois ou mais subelementos flutuam em li, haverá um problema em branco entre li

• Solução: adicione alinhamento vertical: topo; para li

   li{
        vertical-align:top;
   }

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

Ten, tecnologia CSS Hack

O CSS Hack usa alguns métodos especiais para lidar com problemas de compatibilidade entre navegadores diferentes. Em alguns casos, o uso do CSS Hack para lidar com a compatibilidade pode obter o dobro do resultado com metade do esforço. O abuso de hack de CSS afetará o desempenho da página e é difícil de manter, portanto, um grande número de técnicas de hack de CSS deve ser evitado.

1, condição Hack

• O IE da versão 10 e superior não suporta hack condicional, então o código a seguir só será exibido no IE9 e anteriores

    <!--[if ie]>

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

    <![endif]-->

• Palavra-chave

Maior que gt maior ou igual a gte

    <!--[if gt ie 8]>

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

    <![endif]-->

Menor que lt menor ou igual a lte

    <!--[if lt ie 8]>

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

    <![endif]-->

igual

    <!--[if ie 8]>

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

    <![endif]-->

2. Hack de nível de atributo

O hack de nível de atributo é adicionar símbolos especiais aos atributos css para lidar com a compatibilidade de diferentes versões de navegadores

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

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

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


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

3. Selecione hack de nível de símbolo

* html selecione ie6 e navegadores abaixo

* + html selecione apenas o navegador ie7

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

11. Tecnologia de porta deslizante

Para fazer com que o fundo da forma especial se adapte ao conteúdo do texto no elemento, surge a tecnologia da porta deslizante. Como a navegação WeChat.

Use principalmente o posicionamento do fundo e o preenchimento para sustentar a largura da caixa.

Implementação específica: primeiro rotule a, defina a imagem de fundo de a à esquerda, adicione um preenchimento adequado da esquerda a a, em seguida, adicione um rótulo de extensão a a, defina a etiqueta de extensão para a mesma posição de plano de fundo à direita, adicione preenchimento- direito ao span (a e span devem ser convertidos para o nível de bloco)

   <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;
   }

Doze, configurações web tdk

• Configuração do título: o título da página da web, tente enfatizar o conteúdo principal, a página inicial geralmente escreve o título e a visão geral de todo o site, outras páginas resumem o tema desta página, (nota: não têm o título de cada página )

• configuração da descrição: descrição da página da web, necessidade de resumir altamente o conteúdo da página da web, evitar empilhamento excessivo, não muito longo e cada página não pode ser a mesma (não é necessário definir, de acordo com os requisitos específicos da página)

• configuração de palavras-chave: palavras-chave da página da web, lista palavras-chave importantes em várias páginas

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

• Configurações do ícone do site

• Gerar ícone de ícone http://www.bitbug.net/

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