Diretório de artigos
1. Conhecimento básico do núcleo HTML
1.1. Escrevendo a primeira página HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>我是lx，我喜欢java</span><br/>
<span>我喜欢唱，跳，rap，篮球</span><br/>
</body>
</html>
- Tecla de atalho para gerar modelo HTML
!+回车
- significado do rótulo
| nome da etiqueta | definição | ilustrar |
|---|---|---|
| Etiquetas HTML | A maior tag da página, a tag raiz | |
| cabeçalho do documento | Observe que a tag que devemos definir na tag head é o título | |
| título do documento | Deixe a página ter um título próprio | |
| corpo do documento | elemento contém todo o conteúdo do documento, conteúdo da página |
1.2. Hiperlink de um rótulo e caminho
(1) um uso de rótulo
- a é uma tag de linguagem HTML.
- A tag a define um hiperlink, que é usado para vincular de uma página a outra.
- O atributo mais importante do elemento a é o atributo href, que especifica o destino do link.
跳转：<a href="xxx">链接文本</a>
锚点：<a href="#xxx"></a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
(2) caminho
- A julgar pelo tipo de recurso, geralmente o caminho absoluto é usado para recursos externos e o caminho relativo é usado para recursos internos
- Caminho absoluto: o caminho completo desde o início do disco até este arquivo
- Caminho relativo: relativo ao caminho do arquivo atual
- ./ representa o diretório atual
- .../ representa o diretório pai
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="D:\vscodeProject\1.HTML核心基础知识\1.编写第一个html网页.html">绝对路径</a>
<a href="./1.编写第一个html网页.html">相对路径</a>
</body>
</html>
- Todos eles podem pular para a página 1.
1.3. Uso da tag img da imagem
- Propriedades comuns
- fonte
- caminho da imagem
- alternativo
- O texto exibido quando a imagem não foi carregada ou carregada
- título
- O texto exibido acima da imagem
- fonte
- fonte da imagem
- Imagem local: estável
- Fotos online: fotos são fáceis de perder
- Imagem Base64
- Vantagens: Imagens pequenas ocupam menos memória, não solicitam o servidor e reduzem os recursos e o acesso do servidor
- Desvantagem: Imagens grandes aumentam a pressão no servidor de banco de dados
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./1.png" alt = "图片显示失败" title="图片"/>
</body>
</html>
- Coloque as fotos no mesmo diretório
1.4. Uso de tags de tabela
- Estrutura básica da mesa
- Consiste em uma ou mais linhas de dados de célula
| Nome | gênero | idade |
|---|---|---|
| Zhang San | macho | 18 |
| Li Si | fêmea | 18 |
-
Como expressá-lo em HTML
-
tabela: tabela HTML
-
tr: linha da tabela de definição de elemento
-
th: a célula do cabeçalho nos dados
-
td: representa a célula
-
-
Atributos comumente usados em elementos de tabela
- fronteira (fronteira)
- cellpacing (especifique o espaço entre as células)
- cellpadding (especifica o espaço entre a borda da célula e seu conteúdo)
- colspan (para mesclar colunas)
- rowspan (para mesclar linhas)
-
Primeiro inicialize um formulário
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>李祥</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
</html>
- definir uma fronteira
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>李祥</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</table>
- Especifica o espaçamento das células em branco entre as células
<table border="1" cellspacing = "0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>李祥</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</table>
- Especifica o preenchimento de célula em branco entre a borda da célula e seu conteúdo
<table border="1" cellspacing = "0" cellpadding = "7">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>李祥</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</table>
- mesclar coluna colspan
<table border="1" cellspacing = "0" cellpadding = "7">
<tr>
<th colspan = "2">姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>李祥</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</table>
- Mesclar linha rowspan
<table border="1" cellspacing = "0" cellpadding = "7">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td rowspan = "2">李祥</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>男</td>
<td>18</td>
</tr>
</table>
1.5. Listar uso de rótulos ul, ol, dl
- lista ordenada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>手机数码</li>
<li>生活用品</li>
<li>水果生鲜</li>
<li>绝味零食</li>
</ol>
</body>
</html>
- lista não ordenada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>手机数码</li>
<li>生活用品</li>
<li>水果生鲜</li>
<li>绝味零食</li>
</ul>
</body>
</html>
- lista personalizada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>手机数码</dt>
<dd>iphone14</dd>
<dd>macbook pro</dd>
<dd>huawei 14</dd>
<dt>生活用品</dt>
<dd>米</dd>
<dd>醋</dd>
<dd>西红柿</dd>
</dl>
</body>
</html>
1.6. Uso de tags de formulário
- entrada do elemento principal (elemento principal)
<body>
<form>
<input type="text">
</form>
</body>
- rótulo (para melhorar a experiência interativa)
<body>
<form>
<input type="checkbox" id = "isagree">
<label for="isagree">同意</label>
</form>
</body>
- selecione (caixa suspensa)
<body>
<form>
<select>
<option value="1">男</option>
<option value="2">女</option>
</select>
</form>
</body>
- área de texto
<body>
<form>
<textarea>文本域</textarea>
</form>
</body>
- botão (botão)
<body>
<form>
<button>提交</button>
</form>
</body>
- formulário (elemento do formulário, envie o conteúdo de cada item do formulário)
1.7. Uso de tags de bloco e tags inline
-
elemento div
- O elemento div é um elemento de nível de bloco que pode ser usado como contêiner para agrupar outros elementos HTML.
- O elemento div não tem significado específico. Além disso, por ser um elemento de nível de bloco, o navegador exibirá uma quebra de linha antes e depois dele
- Quando usado com CSS, o elemento div pode ser usado para definir propriedades de estilo em grandes blocos de conteúdo.
- Outro uso comum do elemento div é o layout do documento
-
elemento span
- O elemento span é um elemento embutido que pode ser usado como um contêiner para texto
- O elemento span também não tem significado específico.
- Quando usado com CSS, o elemento span pode ser usado para definir propriedades de estilo para seções de texto.
-
elemento de nível de bloco
-
Elementos em nível de bloco geralmente começam (e terminam) em uma nova linha quando exibidos pelo navegador
<h1>, <p>, <ul>, <table>,<div>
-
-
elemento embutido
-
Os elementos embutidos geralmente são exibidos sem iniciar uma nova linha
<b>, <td>, <a>, <img>,<span>
-
<style>
.lixiang{
color: blue;
}
.zhangsan{
color: brown;
}
.wangwu{
color: chartreuse;
}
</style>
<body>
<div>
<span class="lixiang">李祥</span>
</div>
<div>
<span class="zhangsan">张三</span>
</div>
<div>
<span class="wangwu">王五</span>
</div>
</body>
2. Noções básicas de CSS
2.1. Seletor de rótulo CSS + layout da janela de visualização
(1) O que é um seletor de rótulo
- O seletor de rótulo tem como objetivo principal definir o estilo de um determinado rótulo na página. Seu escopo de ação é todo o conteúdo escrito no rótulo desta página. O seletor de rótulo pode definir o estilo de vários rótulos.
- gramática
<style>
标签名{
属性:属性值;
}
</style>
- O caso
<style>
div{
width: 200px;
height: 200px;
background-color: burlywood;
}
</style>
<body>
<div></div>
</body>
(2) O que é layout da janela de visualização
- O navegador móvel coloca a página em uma “janela” virtual (viewport), geralmente a “janela” virtual (viewport) é mais larga que a tela.
- Dessa forma, em vez de comprimir cada página da web em uma pequena janela e sem quebrar o layout das páginas da web que não estão otimizadas para navegadores móveis, os usuários podem deslocar e ampliar para ver diferentes partes da página da web.
- A versão móvel do navegador Safari introduziu recentemente a meta tag da janela de visualização, permitindo que os desenvolvedores da web controlem o tamanho e o zoom da janela de visualização, e outros navegadores móveis também basicamente a suportam.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.2. Vários métodos de escrita de estilo CSS
-
redação
-
folha de estilo interna
- Escrito na tag de estilo do elemento
<style> div{ width: 200px; height: 200px; background-color: burlywood; } </style> <body> <div></div> </body> -
folha de estilo embutida
- Escrito no atributo estilos
<body> <div style="width: 100px; height: 100px; background-color: azure;"></div> </body> -
folha de estilo externa
- A tag link introduz recursos CSS em
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <style> </style> <body> <div></div> </body> </html>div{ width: 200px; height: 200px; background-color: burlywood; }
-
-
Por que escolher uma folha de estilos externa
- Resolva o problema de estilos repetidos na página
- Separação de código, propícia à manutenção e leitura de código
- O navegador irá armazená-lo em cache, melhorando a velocidade de resposta da página e tornando-a mais rápida
2.3. Uso de seletores CSS comuns
(1) Seletor de elemento (rótulo)
- Os seletores CSS mais comuns são seletores de elementos. Em outras palavras, o elemento do documento é o seletor mais básico.
- Se você estiver estilizando HTML, o seletor geralmente será um elemento HTML como p, h1, em, a ou até mesmo o próprio html.
- html {color:black;} h1 {color:blue;} h2 {color:silver;} pode alternar um estilo de um elemento para outro.
div{
width: 200px;
height: 200px;
background-color: burlywood;
}
(2) Seletor combinado
- Os elementos da página são mais complexos e há vários aninhamentos. Para selecionar elementos na página de forma mais flexível, o CSS também fornece um seletor combinado.
- Um seletor composto conecta vários seletores básicos por meio de certas regras para formar um seletor complexo.
h1,p
{
color:red;
}
(3) Seletor de classe
- Combinando seletores de tags
h1.lixiang
{
color:red;
}
- seletor multiclasse
- Os estilos das duas classes estão todos em vigor
<style>
.lixiang{
color:red;
}
.background{
background-color: blueviolet;
}
</style>
<body>
<div class="lixiang background"></div>
</body>
- Encadear vários seletores de classe
.xiaodi.background
{
color:red;
background-color:black
}
(4) seletor de id
声明：#important{}
属性：id="important
注意：一个id选择器的属性值在html文档中只能出现一次，避免写js获取id时出现混淆
<style>
#lixiang{
color: greenyellow;
background-color: cornsilk;
}
</style>
<body>
<div id="lixiang">李祥</div>
</body>
(5) Seletor curinga
Seletores curinga são *definidos para representar todas as tags na página de seleção. Tem a prioridade mais baixa e geralmente é usado quando a página é inicializada ou em alguns casos especiais, como limpar as margens internas e externas da página.
*{
margin: 0;
padding: 0;
}
(6) Seletor derivado
- Seletor descendente, a tag p em h1 ficará vermelha
<style>
h1 p{
color: red;
}
</style>
<body>
<h1>
<p>张三</p>
</h1>
<p>李祥</p>
</body>
- Seletor de elemento filho, selecione a tag p em h1
<style>
h1>p{
color: gray;
}
</style>
<body>
<h1>
<p>张三</p>
</h1>
</body>
- seletor adjacente (irmão)
h1+p{
background-color:pink;
}
2.4. Uso de seletores especiais CSS
- Não altera nenhum conteúdo do DOM. Basta inserir alguns elementos da classe modificadora
(1): primeiro filho {} primeiro item
<style>
li:first-child{
color: red;
}
</style>
<body>
<ul>
<li>李祥</li>
<li>张三</li>
<li>王五</li>
</ul>
</body>
(2): último filho {} último item
<style>
li:last-child{
color: red;
}
</style>
<body>
<ul>
<li>李祥</li>
<li>张三</li>
<li>王五</li>
</ul>
</body>
(3): enésimo-filho (n) {} o enésimo item
<style>
li:nth-child(2){
color: red;
}
</style>
<body>
<ul>
<li>李祥</li>
<li>张三</li>
<li>王五</li>
</ul>
</body>
(4): n-ésimo filho(2n+1){} item de número ímpar
<style>
li:nth-child(2n+1){
color: red;
}
</style>
<body>
<ul>
<li>李祥</li>
<li>张三</li>
<li>王五</li>
</ul>
</body>
(5): n-ésimo filho(2n) {} item par
<style>
li:nth-child(2n){
color: red;
}
</style>
<body>
<ul>
<li>李祥</li>
<li>张三</li>
<li>王五</li>
</ul>
</body>
(6): not() nega a pseudoclasse, exceto para o enésimo item
<style>
li:not(nth-child(2n)){
color: red;
}
</style>
<body>
<ul>
<li>李祥</li>
<li>张三</li>
<li>王五</li>
</ul>
</body>
(7)::primeira letra a primeira
<style>
p::first-letter{
color: red;
}
</style>
<body>
<p>
我是李祥。<br/>
我来自中国。<br/>
我喜欢编程。
</p>
</body>
(8):::first-line A primeira linha só pode ser usada para elementos de nível de bloco
<style>
p::first-line{
color: red;
}
</style>
<body>
<p>
我是李祥。<br/>
我来自中国。<br/>
我喜欢编程。
</p>
</body>
(9):::antes de adicionar conteúdo no início
<style>
p::before{
content: '开头';
color: red;
}
</style>
<body>
<p>
我是李祥。<br/>
我来自中国。<br/>
我喜欢编程。
</p>
</body>
(10)::after Adicionar conteúdo na posição final
<style>
p::after{
content: '结尾';
color: red;
}
</style>
<body>
<p>
我是李祥。<br/>
我来自中国。<br/>
我喜欢编程。
</p>
</body>
2.5. Modelo box de conceitos básicos de CSS
(1) Qual é o modelo da caixa
- Em CSS, todos os elementos HTML podem ser considerados como uma caixa
(2) Conteúdo da caixa (conteúdo)
- tamanho do elemento
(3) A margem interna da caixa (preenchimento)
padding-left:10px //左边距10px
padding-top:10px //上边距10px
padding-right:10px //右边距10px
padding-bottom:10px //下边距10%，相对于父级元素的width
padding:10px 10px 10px 10% //等同于上面四行 百分比是对应父标签的大小
padding:5px 10px //上下边距5px、左右边距10px
padding:5px 10px 20px //上边距 左右边距 下边距
padding:10px //上下左右边距10px
(4) A borda da caixa (borda)
border-left:3px solid #000 //左边距10px dotted dashed
border-top:3px solid #000 //上边距10px
border-right:3px solid #000 //右边距10px
border-bottom:3px solid #000 //下边距10%，相对于父级元素的width
border:3px solid #000 //等同于上面四行
(5) A margem externa da caixa (margem)
margin-left:10px //左边距10px
margin-top:10px //上边距10px
margin-right:10px //右边距10px
margin-bottom:10% //下边距10%，相对于父级元素的width
margin:10px 10px 10px 10% //等同于上面四行
margin:5px 10px //上下边距5px、左右边距10px
margin:10px //上下左右边距10px
(6) Modelo estranho de caixa
- Modelo de caixa padrão W3C (modelo de caixa padrão)
boxWidth=contentWidth
- Modelo de caixa padrão do IE (modelo de caixa estranha)
box-sizing:border-box //声明
boxWidth=contentWidth+border+padding
(7) Colapso da margem externa
-
As margens das caixas irmãs superior e inferior são positivas e maiores, e ambas são negativas e menores, somando uma positiva e uma negativa
-
As margens das caixas dos elementos pai e filho (assumindo que não haja preenchimento ou borda separando as margens externas) também serão mescladas;
Somente as margens verticais das caixas de bloco no fluxo normal do documento terão margens recolhidas. As margens entre caixas embutidas, caixas flutuantes ou posicionamento absoluto não são mescladas
解决父子边距合并：
父元素{
overflow:auto;
}
父元素::before{
display: table;
content: "";
}
2.6.Atributos comuns em CSS
(1) A localização e tamanho da caixa
- tamanho
宽度 width: ⻓度|百分⽐|auto
⾼度 height
边界 margin padding 上右下左|上下左右
- disposição
浮动：float
定位：position
弹性布局：flex
盒⼦内容超出部分：overflow：hidden | scroll | auto
(2) aparência, estilo
background-image：属性设置一个或多个背景图像
background-repeat：属性设置如何平铺背景图像
background-size：属性规定背景图像的尺寸
background-position：属性设置背景图像的起始位置
background-color：属性设置元素的背景颜色
(3) Atributos de texto
字体⼤⼩：font-size
是否加粗：font-weight
是不是斜体：font-style
字体是什么：font-family
3. Posicionamento de layout avançado CSS
3.1. Pré-conhecimento de layout em CSS
(1) Como fazer o layout de elementos normais
- Por padrão, a largura do conteúdo de um elemento no nível do bloco é 100% de seu elemento pai e sua altura é consistente com a altura do conteúdo
- A largura e a altura dos elementos embutidos são determinadas de acordo com o conteúdo (a largura e a altura dos elementos embutidos não podem ser definidas)
- O atributo display pode ser definido para definir o tipo de elemento (css3 define o layout)
Por exemplo: <span>rótulos, elementos de nível de linha
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<span>我叫李祥。</span>我是一名IT工程师。
</body>
Mesmo se definirmos o tamanho de altura e largura para ele, ele não será exibido.
Se quiser que a tag span se torne um elemento de nível de bloco, você precisa definir o atributo display.
span{
width: 100px;
height: 100px;
display: block;
}
(2) Como os elementos interagem entre si?
- Fluxo normal de layout de documento
- Cada elemento no nível do bloco iniciará uma nova linha abaixo do elemento anterior
- Elementos embutidos não iniciarão uma nova linha
3.2. Layout flutuante em CSS
usar flutuador
float: none; //默认值，元素不浮动
float: left; //元素像左浮动
float: right; //元素像右浮动
Características:
- Os elementos flutuantes sairão do fluxo documental e não ocuparão mais o espaço do fluxo documental
- Os elementos flutuantes são organizados da esquerda para a direita entre si e a largura excede uma linha e é quebrada automaticamente
- Quando o elemento na frente do elemento flutuante não está flutuando, o elemento flutuante não pode ser movido para cima
- Tanto os elementos de nível de bloco quanto os elementos embutidos tornam-se elementos de nível de bloco embutidos após a flutuação
- Os elementos flutuantes não cobrirão o texto, você pode definir o efeito de quebra de texto
flutuação clara
clear:both;
content:'';
display:block;
(1) Duas divs, deixe a div inferior ir para o canto superior direito
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: brown;
float: left;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
(2) Duas divs, deixe a div inferior ir para o canto superior direito
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: blue;
float: right;
}
.div2{
width: 200px;
height: 200px;
background-color: brown;
float: right;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
(3) Dois divs alcançam o efeito de sobreposição de camadas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.div2{
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
3.3. Layout flexível em CSS
O W3C propôs uma nova solução – Layout Flex, que pode implementar vários layouts de página de maneira simples, completa e responsiva. Atualmente é compatível com todos os navegadores, o que significa que agora é seguro usar esse recurso.
Flex é a abreviatura de Caixa Flexível, que significa “layout elástico”, que é utilizado para proporcionar máxima flexibilidade ao modelo de caixa.
Código de teste:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.f{
width: 400px;
height: 400px;
background-color: blanchedalmond;
}
.a1{
width: 100px;
height: 100px;
background-color: gold;
}
.a2{
width: 100px;
height: 100px;
background-color: gray;
}
.a3{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="f">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
</body>
</html>
Atributos do contêiner do elemento pai
(1) atributo de direção flexível
A propriedade flex-direction possui 4 valores:
- linha (padrão) : o eixo principal é horizontal e o ponto inicial está na extremidade esquerda (os itens são organizados da esquerda para a direita)
- row-reverse : O eixo principal é horizontal e o ponto inicial está na extremidade direita (os itens são organizados da direita para a esquerda)
- coluna : O eixo principal é vertical e o ponto inicial está na borda superior (os itens são organizados de cima para baixo)
- column-reverse : O eixo principal é vertical e o ponto inicial está parte inferior (os itens são organizados de baixo para cima)
/* 决定主轴的方向（即项目的排列方向）*/
flex-direction: row | row-reverse | column | column-reverse;
(2) propriedade flex-wrap
Por padrão, os itens são organizados ao longo de uma linha (também conhecida como "eixo"). O atributo flex-wrap define como quebrar se uma linha de eixo não couber.
A propriedade flex-wrap possui 3 valores:
- nowrap (padrão) : Não quebra linhas (colunas).
- wrap : Quando o eixo principal é horizontal: envolve de cima para baixo. Quando o eixo principal for vertical: altere as colunas da esquerda para a direita.
- wrap-reverse : Quando o eixo principal é horizontal: envolve de baixo para cima. Quando o eixo principal for vertical: altere as colunas da direita para a esquerda.
Código de teste:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.f{
width: 400px;
height: 400px;
background-color: blanchedalmond;
display: flex;
flex-direction:row;
}
.a1{
width: 100px;
height: 100px;
background-color: gold;
}
.a2{
width: 100px;
height: 100px;
background-color: gray;
}
.a3{
width: 100px;
height: 100px;
background-color: aqua;
}
.a4{
width: 100px;
height: 100px;
background-color: green;
}
.a5{
width: 100px;
height: 100px;
background-color: red;
}
.a6{
width: 100px;
height: 100px;
background-color: silver;
}
.a7{
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="f">
<div class="a1">a1</div>
<div class="a2">a2</div>
<div class="a3">a3</div>
<div class="a4">a4</div>
<div class="a5">a5</div>
<div class="a6">a6</div>
<div class="a7">a7</div>
</div>
</body>
</html>
/* 是否换行 */
flex-wrap: nowrap | wrap | wrap-reverse;
(3) atributo flex-flow
O atributo flex-flow é uma abreviação para o atributo flex-direction e o atributo flex-wrap, e o valor padrão é row nowrap.
flex-flow: <flex-direction> <flex-wrap>;
(4) atributo justificar-conteúdo
A propriedade ustify-content define o alinhamento do item no eixo principal.
O atributo justificar-content possui 5 valores:
- flex-start (padrão) : Alinha ao início do eixo principal.
- flex-end : Alinha ao final do eixo principal.
- centro : Alinha com o ponto médio do eixo principal.
- espaço entre : os pontos inicial e final do eixo principal estão alinhados em ambas as extremidades e os intervalos entre os itens são iguais.
- space-around : espaçamento igual em ambos os lados de cada item. Assim, o espaçamento entre os itens é duas vezes maior que o espaçamento entre os itens e a borda.
/* 定义水平方向对齐方式 */
justify-content: flex-start | flex-end | center | space-between | space-around;
(5) atributo de alinhamento de itens
O atributo align-items define como os itens são alinhados no eixo cruzado. O eixo transversal vertical é sempre de cima para baixo e o eixo transversal horizontal é sempre da esquerda para a direita.
O atributo align-items possui 5 valores:
- flex-start : O ponto inicial do eixo cruzado está alinhado.
- flex-end : Alinhe o final do eixo transversal.
- center : O ponto médio do eixo cruzado está alinhado.
- linha de base : o alinhamento da linha de base da primeira linha de texto do item.
- stretch (padrão) : Se o item não tiver altura definida ou estiver definido como automático, o item ocupará toda a altura do contêiner.
/* 定义垂直方向对齐方式 */
align-items: flex-start | flex-end | center | baseline | stretch;
(6) atributo de alinhamento de conteúdo
O atributo align-content define o alinhamento de vários eixos. Esta propriedade não tem efeito se o item tiver apenas um eixo.
O atributo align-content possui 6 valores:
- flex-start : Alinha ao início do eixo transversal.
- flex-end : Alinha ao final do eixo transversal.
- center : Alinha ao ponto médio do eixo transversal.
- espaço entre : Alinhe com ambas as extremidades do eixo transversal e o intervalo entre os eixos será distribuído uniformemente.
- space-around : O espaçamento em ambos os lados de cada eixo é igual. Portanto, a distância entre os eixos é duas vezes maior que a distância entre os eixos e o quadro.
- esticar (padrão) : O eixo principal preenche todo o eixo transversal.
Propriedades de contêineres de elementos filhos
(1) atributo de pedido
O atributo order define a ordem de classificação dos itens. Quanto menor o valor, maior será a classificação e o padrão é 0.
/* 定义子元素的排列顺序，默认为0 */
order: -10 | -1 | 0 | 1 | 10;
(2) propriedade flex-grow
O atributo flex-grow define a proporção de ampliação do item, e o padrão é 0, ou seja, se sobrar espaço não será ampliado.
/* 定义子元素的放大比例，默认为0 */
flex-grow: 0 | 1 | 2 | 3;
(3) atributo flexível
A propriedade flex-basis define quanto espaço um item ocupa no eixo principal (tamanho principal) antes de alocar o espaço em excesso . Com base nesta propriedade, o navegador calcula se há espaço extra no eixo principal. Seu valor padrão é automático, que é o tamanho original do item.
/* 定义了在分配多余空间之前，项目占据的主轴空间 */
flex-basis: <length> | auto;
(4) atributo flexível
A propriedade flex é uma abreviação de flex-grow, flex-shrink e flex-basis, e o valor padrão é 0 1 auto. Os dois últimos atributos são opcionais.
/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;
Escolher layout flutuante ou layout flexível?
A recomendação é usar layout flexível, que é fácil de usar e abrangente. A intenção original do float é obter o efeito de quebra automática de texto, e a flutuação precisa ser desmarcada. Agora quase todos os cenários de uso de produtos da empresa estão no navegador ie9 ou superior.
3.4. Posicionamento de posição em CSS
(1) estático: O valor padrão, posicionamento estático, significa que não há posicionamento e o elemento será exibido na posição normal.Neste momento, os quatro atributos de posicionamento superior, inferior, esquerdo e direito não serão aplicados .
(2) relativo: posicionamento relativo, ou seja, posicionamento relativo à posição normal do elemento. Você pode definir o deslocamento do elemento em relação à posição normal por meio dos quatro atributos superior, direito, inferior e esquerdo. Neste processo, não afeta outros elementos.
(3) Absoluto: Posicionamento absoluto, posicionamento relativo ao primeiro elemento pai de posicionamento não estático, você pode definir o deslocamento do elemento em relação à posição do elemento pai por meio dos quatro atributos superior, direito, inferior e esquerdo. Se não houver nenhum elemento pai que satisfaça a condição, ele será posicionado em relação à janela do navegador. Um elemento posicionado de forma absoluta não afeta outros elementos.
(4) fixo: posicionamento fixo, posicionamento relativo à criação do navegador, você pode usar os quatro atributos superior, direito, inferior e esquerdo para definir a posição do elemento em relação à janela do navegador. Elementos que utilizam posicionamento fixo A posição do elemento é fixa independentemente de como a janela do navegador é rolada.
(5) pegajoso: posicionamento pegajoso, é uma combinação de relativo e fixo, pode ter uma linha sólida semelhante ao efeito de adsorção, ao rolar a página, seu efeito é o mesmo que relativo, ao rolar para fora da tela, ele se tornará automaticamente um efeito fixo.
Código de teste:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1{
width: 200px;
height: 200px;
background-color: red;
}
.a2{
width: 200px;
height: 200px;
background-color: green;
}
.a3{
width: 200px;
height: 200px;
background-color: blue;
}
.a22{
width: 50px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2">
<div class="a22"></div>
</div>
<div class="a3"></div>
</body>
</html>
(1) Deixe o bloco preto correr para a extrema direita do bloco verde
(2) Defina uma janela flutuante
(3) Caixa de posicionamento pegajosa
3.5. Implementação de layout de três colunas em CSS
(1) implementação flutuante
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
width: 200px;
height: 300px;
background-color: red;
float: left;
}
.right {
width: 200px;
height: 300px;
background-color: blue;
float: right;
}
.center {
height: 300px;
background-color: green;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
(2) realização de posição
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
width: 200px;
height: 300px;
background-color: red;
position: absolute;
left: 0;
}
.right {
width: 200px;
height: 300px;
background-color: blue;
position: absolute;
right: 0;
}
.center {
height: 300px;
background-color: green;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
(3) realização flexível
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
width: 200px;
height: 300px;
background-color: red;
}
.right {
width: 200px;
height: 300px;
background-color: blue;
}
.center {
flex: 1;
height: 300px;
background-color: green;
}
.father {
display: flex;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
Demonstração de efeito:
3.6. Centralização horizontal e vertical em CSS
(1) Elementos de bloco embutidos
Realizado por line-height, text-align: center .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
span{
width: 200px;
height: 200px;
background-color: cadetblue;
display: inline-block;
text-align: center;
line-height: 200px;
font-size: 30px;
}
</style>
<body>
<span>
李祥
</span>
</body>
</html>
Realizado por display: flex, justify-content: center, align-items: center .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
span{
width: 200px;
height: 200px;
background-color: cadetblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
</style>
<body>
<span>
李祥
</span>
</body>
</html>
resultado em execução:
(2) Elementos de nível de bloco
implementação de posição + transformação
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1 {
width: 500px;
height: 500px;
background-color: cadetblue;
position: relative;
}
.a2 {
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="a1">
<div class = "a2"></div>
</div>
</body>
</html>
implementação flexível
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1 {
width: 500px;
height: 500px;
background-color: cadetblue;
display: flex;
justify-content: center;
align-items: center;
}
.a2 {
width: 100px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div class="a1">
<div class = "a2"></div>
</div>
</body>
</html>
resultado em execução:
3.7. BFC de pontos de conhecimento avançado de CSS
-
definição
- O Block Formatting Context (BFC) é uma parte da renderização visual CSS da página da Web. É a área onde ocorre o processo de layout da caixa de bloco e também é a área onde os elementos flutuantes interagem com outros elementos.
- Ou seja: forma-se uma área fechada e podem ser detectados elementos da área que estão fora do fluxo do documento
-
características
- O atributo oculto em css não será coberto por elementos flutuantes após ser ativado
- Elementos BFC podem conter elementos flutuantes
- O elemento filho do elemento BFC não se sobrepõe à margem do elemento pai
-
Ativado (todos têm efeitos colaterais)
- Defina o elemento como float float: left
- Definir para exibição de elemento de bloco embutido: bloco embutido
- overflow: oculto (recomendado)
-
efeito
- Limpe os efeitos da flutuação
- Resolva o problema do colapso da margem (o colapso da margem só acontecerá entre elementos de nível de bloco pertencentes ao mesmo BFC)
4. Explicação das propriedades comuns do CSS3
4.1. Estilos de borda CSS3
(1) Borda arredondada
border-radius: adicione uma borda arredondada ao elemento
Quatro valores: raio da borda: 30px 20px 30px 10px; (cada valor representa o valor do raio do canto arredondado, defina o raio horizontal e vertical de cada canto para o valor correspondente) canto superior esquerdo (10px), canto superior direito (20px)
, canto inferior direito (30px), canto inferior esquerdo (10px)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
border: 3px solid red;
border-radius: 10px;
}
</style>
<body>
<div></div>
</body>
</html>
resultado em execução:
(2) A propriedade box
-shadow aceita um valor que consiste em até cinco partes diferentes.
box-shadow: posição de cor de dispersão de desfoque offset-x offset-y;
Seletor de objeto {box-shadow: deslocamento do eixo X deslocamento do eixo Y sombra desfoque raio extensão da sombra raio sombra cor método de projeção }
Ao contrário de outras propriedades, como border, cujo valor aceito pode ser dividido em uma série de subpropriedades, a propriedade box-shadow não possui subpropriedades. Isto significa que é ainda mais importante lembrar a ordem destes componentes, especialmente aqueles de valores de comprimento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: cadetblue;
box-shadow: 2px 2px 10px black;
}
</style>
<body>
<div></div>
</body>
</html>
(3) Imagem limite
O atributo border-image pode dividir uma imagem em 9 partes separadas por meio de algumas regras simples, e o navegador usará automaticamente a parte correspondente para substituir o estilo padrão da borda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
border: 20px solid red;
border-image: url('https://gw.alicdn.com/imgextra/i3/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg');
}
</style>
<body>
<div></div>
</body>
</html>
4.2. Estilo gradiente CSS3
A função linear-gradient() é usada para criar uma imagem com um gradiente linear.
Descrição: background: linear-gradient(direction, color-stop1, color-stop2,…);
direção: especifica a direção do gradiente com um valor de ângulo.
- Valor de direção: comumente usados são para cima, para baixo, para a esquerda, para a direita, para cima à direita e assim por diante.
- Valor do ângulo: 0 graus, 180 graus, etc.
coler: Use palavras-chave como vermelho, rgba e outros valores de cores (a transparência também pode ser definida).
stop: É a posição final deste bloco de cores, ou seja, é a área ocupada por este bloco de cores.
(1) Gradiente de cima para baixo (por padrão)
background: linear-gradient(#e66465, #9198e5);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background: linear-gradient(#e66465, #9198e5);
}
</style>
<body>
<div></div>
</body>
</html>
(2) Gradiente da esquerda para a direita
background: linear-gradient(to right, red , yellow);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background: linear-gradient(to right, red , yellow);
}
</style>
<body>
<div></div>
</body>
</html>
(3) Gradiente Diagonal
background: linear-gradient(to bottom right, red, yellow);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background: linear-gradient(to bottom, red , yellow);
}
</style>
<body>
<div></div>
</body>
</html>
(4) Ângulo de cima para baixo
background: linear-gradient(180deg, red, yellow);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background: linear-gradient(180deg, red, yellow);
}
</style>
<body>
<div></div>
</body>
</html>
(5) Ângulo da esquerda para a direita
background: linear-gradient(90deg, red, yellow);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background: linear-gradient(90deg, red, yellow);
}
</style>
<body>
<div></div>
</body>
</html>
(6) Configurações de transparência
background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
<body>
<div></div>
</body>
</html>
(7) Defina a área de gradiente repetida
background: repeating-linear-gradient(red, yellow 10%, green 20%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 200px;
height: 200px;
margin: 0 auto;
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</style>
<body>
<div></div>
</body>
</html>
4.3. Efeitos de texto CSS3
(1) Sombra do Texto
text-shadow: 5px 5px 5px #FF0000;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
span{
font-size: 50px;
text-shadow: 5px 5px 5px #FF0000;
}
</style>
<body>
<span>
李祥
</span>
</body>
</html>
(2) Texto excedendo mais de 1 linha omitido
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 100px;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<body>
<div>
晚风吹人醒，万事藏于心
</div>
</body>
</html>
(3) O texto excede mais de 2 linhas e é omitido
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 100px;
font-size: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
<body>
<div>
晚风吹人醒，万事藏于心
</div>
</body>
</html>
4.4. Layout de grade CSS3
O layout de grade, como o nome indica, é um layout semelhante a uma grade, como uma rede. Em um contêiner, podemos cortar muitas linhas e colunas para formar uma grade, para que essas grades possam ser classificadas regularmente e usadas para obter nosso complexo efeito de layout de página.
O layout Grid é um pouco semelhante ao layout Flex, sendo que ambos podem especificar as posições de vários itens dentro do contêiner. No entanto, eles também apresentam diferenças importantes.
Semelhante ao layout em grade da página inicial do Bilibili.
Carregue diretamente o código e implemente-o usando Grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
width: 800px;
height: 400px;
background-color: cadetblue;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50% 50%;
}
.child{
width: 200px;
height: 200px;
background-color: darkgoldenrod;
border: 1px solid yellow;
box-sizing: border-box;
}
</style>
<body>
<div class="box">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
resultado em execução:
OK, até agora os pontos de conhecimento de HTML + CSS foram resolvidos. Se o blogueiro escreve bem, lembre-se de fornecer três links!
