Displays Display, Floats, Posições

  • Display
  • Floats
  • Posições

Display

.d-i - display: inline;
.d-ib - display: inline-block;
.d-b - display: block;
.d-g - display: grid;
.d-ig - display: inline-grid;
.d-t - display: table;
.d-tr - display: table-row;
.d-tc - display: table-cell;
.d-f - display: flex;
.d-if - display: inline-flex;
.d-fr - display: flow-root; 

              
                
                    <div class="d-b e1 bg-principal">
                        d-b espaço 1
                    </div>
                    <div class="d-i ex2 bg-noturno t-bran">
                        d-i espaço esquerdo e direito 3
                    </div>
display block espaço 1
display inline espaço esquerdo e direito 3


Conteúdo Centralizado

.d100 - Criara uma div 100% largura e 100% altura;
.dcenter - Defina a Height e você tera um objeto centralizado, tanto altura como largura.


Center
              
                
                    <div class="dcenter bg-verd10" style="height: 270px;">
                        Center
                    </div>

Float

.float-e - float: left - Esquerda;
.float-d - float: right - Direita;
.float-f - float: inline-end - Final;
.float-t - float: inline-start - Topo;
.float-n - float: none;


Essas classes de utilitários flutuam um elemento para a esquerda ou direita, ou desabilitam a flutuação, com base no tamanho atual da viewport usando a propriedade float do CSS.

!important é incluído para evitar problemas de especificidade. Eles usam os mesmos pontos de interrupção da viewport que nosso sistema de grade. Esteja ciente de que os utilitários float não têm efeito em itens flexíveis.



Float Esquerda



Float Direita


              
                
                    <div class="float-e">Float Esquerda</div>
                    <div class="float-d">Float Direita</div>
                    <div class="float-t">Float Topo</div>
                    <div class="float-b">Float Final</div>
                    <div class="float-n">Float None</div>

Posição [ Position ]

.posi-a - position: absolute;
.posi-r - position: relative;
.posi-f - position: fixed;
.posi-s - position: static;


Organize elementos facilmente com os utilitários de posicionamento de bordas. Divide nas seguintes categorias:


.d Elemento dentro da linha


.de-0 - Esquerda no topo;
.de-5 - Esquerda no centro;
.de-10 - Esquerda no final;
.dd-0 - Direita no topo;
.dd-5 - Direita no centro;
.dd-10 - Direita no final;
.dc-0 - Centro no topo;
.dc-5 - Centro no meio;
.dc-10 - Centro em baixo;



1
2
3
4
5
6
7
8
9
              
                
                    <div class="posi-r" style="height: 140px;">
                        <div class="posi-a de-0">1</div>
                        <div class="posi-a de-5">2</div>
                        <div class="posi-a de-10">3</div>
                        <div class="posi-a dc-0">4</div>
                        <div class="posi-a dc-5">5</div>
                        <div class="posi-a dc-10">6</div>
                        <div class="posi-a dd-0">7</div>
                        <div class="posi-a dd-5">8</div>
                        <div class="posi-a dd-10">9</div>
                    </div>

.l Elemento na linha

.le-0 - Esquerda no topo;
.le-5 - Esquerda no centro;
.le-10 - Esquerda no final;
.ld-0 - Direita no topo;
.ld-5 - Direita no centro;
.ld-10 - Direita no final;
.lc-0 - Centro no topo;
.lc-5 - Centro no meio;
.lc-10 - Centro em baixo;


1
2
3
4
5
6
7
8
9
              
                
                    <div class="posi-r" style="height: 130px;">
                        <div class="posi-a le-0">1</div>
                        <div class="posi-a le-5">2</div>
                        <div class="posi-a le-10">3</div>
                        <div class="posi-a lc-0">4</div>
                        <div class="posi-a lc-5">5</div>
                        <div class="posi-a lc-10">6</div>
                        <div class="posi-a ld-0">7</div>
                        <div class="posi-a ld-5">8</div>
                        <div class="posi-a ld-10">9</div>
                    </div>

.f Elemento Fora da linha


.fe-0 - Esquerda no topo;
.fe-5 - Esquerda no centro;
.fe-10 - Esquerda no final;
.fd-0 - Direita no topo;
.fd-5 - Direita no centro;
.fd-10 - Direita no final;
.fc-0 - Centro no topo;
.fc-5 - Centro no meio;
.fc-10 - Centro em baixo;


1
2
3
4
5
6
7
8
9
              
                
                    <div class="posi-r" style="height: 130px;">
                        <div class="posi-a fe-0">1</div>
                        <div class="posi-a fe-5">2</div>
                        <div class="posi-a fe-10">3</div>
                        <div class="posi-a fc-0">4</div>
                        <div class="posi-a fc-5">5</div>
                        <div class="posi-a fc-10">6</div>
                        <div class="posi-a fd-0">7</div>
                        <div class="posi-a fd-5">8</div>
                        <div class="posi-a fd-10">9</div>
                    </div>