A imagem do efeito Jiugongge a ser realizada é a seguinte:
estilo público:
div{
width: 300px;
height: 300px;
}
ul{
padding: 0;
width: 100%;
height: 100%;
}
li{
list-style: none;
text-align: center;
line-height: 100px;
margin: 3px;
background-color: #243F49;
color: white;
border: 1px solid white;
font-weight: bolder;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
1. Layout da grade
grid-template-columns é usado para definir a largura de cada coluna; grid-template-rows é usado para definir a altura de cada linha; grid-gap define o espaçamento entre linhas e colunas da grade
ul{
padding: 0;
width: 100%;
height: 100%;
/*设置为grid网格布局*/
display: grid;
/*设置三行高度都为100px；*/
grid-template-rows:100px 100px 100px ;
/*设置三行宽度都为100px；*/
grid-template-columns: 100px 100px 100px;
置网格的行间距、列间距都为3px
/*grid-gap: 3px;*/
}
2. layout flexível
Calcule a largura e altura de cada li, a largura e altura total são 300px, então a largura e altura de cada li é 300px/3=100px Mas como cada li tem uma margem de 3px então: a largura de cada li = 100px
- (margem esquerda + margem direita) = 100 - (3+3) = 94px Definimos a largura de cada li como 94px.
A altura de cada li = 100px - (margem superior + margem inferior) = 100-6 = 94px Acabamos de definir a altura de cada li para 94px.
Depois de determinar a largura e altura total do div e a largura e altura de cada li, use o layout flexível para quebrar a linha.
Claro, é mais rápido determinar a altura das três caixas, largura * 3 + espaçamento * 2 * 3 = largura/altura total .
ul{
padding: 0;
width: 100%;
height: 100%;
/*设置布局方式为flex布局*/
display: flex;
/*换行*/
flex-wrap: wrap;
}
li{
/*固定设置每个li的宽度和高度*/
width: 94px;
height: 94px;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
border: 1px solid white;
font-weight: bolder;
}
3. posicionamento flutuante flutuante
Defina uma largura e altura fixas para o div total, calculeAltura e largura total = três caixas 3 + espaçamento 2 * 3 e, em seguida, defina a largura e altura fixas de cada li e use float para envolvere, em seguida, limpe o posicionamento flutuante do elemento pai overflow: oculto.
A largura e altura de cada li é 94px, a margem é 3px, a altura e largura total do div=94 3+3 2*3=300px.
ul{
padding: 0;
width: 100%;
height: 100%;
/*清除浮动*/
overflow: hidden;
}
li{
/*固定设置每个li的宽度和高度*/
width: 94px;
height: 94px;
/*第三种方法：浮动定位进行换行*/
float: left;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
font-weight: bolder;
}
4.bloco embutido + espaçamento entre letras属性/tamanho da fonte: 0
Consistente com os dois anteriores, primeiro calcule a largura e a altura, defina a largura e a altura de cada li e, em seguida, use display: inline-block para envolver o li e, em seguida, use o valor negativo do atributo letter-spacing para reduzir o espaço entre caracteres
A propriedade letter-spacing serve para aumentar (o valor é positivo) ou diminuir (o valor é negativo) o espaçamento entre caracteres (espaço entre caracteres);
ul{
padding: 0;
width: 100%;
height: 100%;
/*减少字符间的空白*/
letter-spacing: -5px;/*这里使用font-size:0;也可*/
}
li{
/*设置每个li的固定宽度和高度*/
width: 94px;
height: 94px;
display: inline-block;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
font-weight: bolder;
}
5. Layout da mesa
Defina o elemento pai para exibir: layout de tabela, para que o elemento seja exibido na forma de uma tabela e, em seguida, defina o espaçamento da borda da célula. Em seguida, defina a exibição do formulário de linha da tabela correspondente: linha da tabela; e exibição do formulário da célula: célula da tabela
<style>
ul{
width: 300px;
height: 300px;
/*元素作为块级表格来显示 padding失效*/
display: table;
/*设置相邻单元格的边框间距*/
border-spacing: 5px;
}
li{
list-style: none;
text-align: center;
background-color: #243F49;
color: white;
font-weight: bolder;
/*此元素会作为一个表格行来显示 margin和padding都失效*/
display: table-row;
}
div{
line-height: 90px;
text-align: center;
/*元素以单元格形式来显示 Margin失效*/
display: table-cell;
}
<ul>
<li>
<div>1</div>
<div>2</div>
<div>3</div>
</li>
<li>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>7</div>
<div>8</div>
<div>9</div>
</li>
</ul>
Renderizações:
