Mastering Box model(Positions,Flexbox,Grid layout) part-2
before going any further ,take a look on those previous articles(lessons)
You can make your entire page scale responsively without any media queries?
como vc alcançaria este resultado?
crie um arquivo index.html e adiciona o seguinte codigo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Rehab</a></li>
<li class="join"><a href="#">Join us</a></li>
</ul>
</nav>
</header>
<main>
<section class="main-content">
<h1>Something big is coming...</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime deserunt ullam voluptatum facere explicabo. Vel quidem, explicabo dignissimos quas molestias impedit consequatur maxime tempora error. Accusantium cum ex deserunt fugit!</p>
</section>
<aside>
<div class="follow-us">
<p><a href="#">Follow us on Facebook</a></p>
<p><a href="#">Follow us on Twitter</a></p>
</div>
</aside>
</main>
</body>
</html>crie um arquivo style.css e adicione o seguinte
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1c1c1c;
color: #ffffff;
}
header {
background-color: #000000;
padding: 10px 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
}
nav ul li.join a {
background-color: #ffffff;
color: #000000;
padding: 5px 15px;
border-radius: 20px;
}
main {
display: flex;
justify-content: space-between;
padding: 20px;
}
.main-content {
background-color: #666666;
padding: 20px;
border-radius: 10px;
width: 65%;
}
aside .follow-us {
background-color: #666666;
padding: 20px;
border-radius: 10px;
width: 30%;
}
.main-content h1 {
font-size: 2rem;
margin-top: 0;
}
.main-content p {
font-size: 1rem;
}
.follow-us p {
margin: 0 0 10px;
}
.follow-us a {
color: #ffffff;
text-decoration: underline;
}Understanding Box-Model at once
Vamos examinar os três métodos mais importantes para alterar o fluxo do documento — floats, flexbox e grid layout. Em seguida, vamos analisar o posicionamento, que é usado principalmente para empilhar elementos uns sobre os outros.
We’ll cover here :
Float layout-based (docment flow)
Flexbox layout-based (document flow)
Grid layout-based (document flow)
Float-base approach- Uma abordagem baseada no float- layout
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #1c1c1c;
color: #ffffff;
}
header {
background-color: #000000;
padding: 10px 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: right;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
}
nav ul li.join a {
background-color: #ffffff;
color: #000000;
padding: 5px 15px;
border-radius: 20px;
}
main {
width: 100%;
overflow: hidden;
padding: 20px;
}
.main-content {
background-color: #666666;
padding: 20px;
border-radius: 10px;
width: 65%;
float: left;
box-sizing: border-box;
}
aside .follow-us {
background-color: #666666;
padding: 20px;
border-radius: 10px;
width: 30%;
float: right;
box-sizing: border-box;
}
.main-content h1 {
font-size: 2rem;
margin-top: 0;
}
.main-content p {
font-size: 1rem;
}
.follow-us p {
margin: 0 0 10px;
}
.follow-us a {
color: #ffffff;
text-decoration: underline;
}Float layout-based (docment flow)
The purpose of floats(O propósito dos floats)
Embora os floats não tenham sido originalmente destinados a construir layouts de página, eles desempenharam bem essa função. No entanto, para entender os floats, devemos primeiro ter em mente seu propósito original.
Floats to alter the document flow
Um float puxa um elemento (frequentemente uma imagem) para um lado de seu contêiner, permitindo que o fluxo do documento se envolva ao seu redor como na imagem abaixo . Esse layout é comum em jornais e revistas, então, os floats foram adicionados ao CSS para alcançar esse efeito.
Esta ilustração mostra um elemento puxado para a esquerda(float: left;), mas você também pode flutuar um elemento para a direita(float: right;). Um elemento flutuante é removido do fluxo normal do documento e puxado para a borda do contêiner. O fluxo do documento então retoma, mas ele se envolverá ao redor do espaço onde o elemento flutuante agora reside. Se você flutuar vários elementos na mesma direção, eles se empilharão lado a lado, como mostrado na imagem abaixo
Se você tem escrito CSS há algum tempo, esse comportamento provavelmente não é novidade para você. Mas o importante a ser notado é o seguinte: nem sempre usamos floats dessa maneira, mesmo que seja o seu propósito original.
Nos primeiros dias do CSS, os desenvolvedores perceberam que poderiam usar essa ferramenta simples para mover seções da página e construir todos os tipos de layouts. Não foi planejada para ser uma ferramenta de layout de página, mas, por quase duas décadas, a utilizamos dessa forma.
Fizemos isso porque era nossa única opção. Eventualmente, a capacidade de usar display: inline-block ou display: table surgiu, oferecendo alternativas, embora limitadas. Até a adição dos layouts de flexbox e grid nos últimos anos, floats permaneceram como nossa principal ferramenta para layout de página. Vamos dar uma boa olhada em como eles funcionam. Como guia, iremos contruir a página mostrada abaixo.
crie um arquivo index.html
baixe duas images e as nomeie , runner.png e shoes.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box model part-2</title>
<link rel="stylesheet" href="../css/css-box-module-2.css">
</head>
<body>
<header>
<h1>Franklin Running Club</h1>
</header>
<main class="main clearfix">
<h2>Running tips</h2>
<div>
<div class="media one">
Main element, the white box, that contains most of the page
<img class="media-image" src="runner.png">
<div class="media-body">
<h4>Strength</h4>
<p>
Strength training is an important part of
injury prevention. Focus on your core—
especially your abs and glutes.
</p>
</div>
</div>
<div class="media two">
<img class="media-image" src="shoes.png">
<div class="media-body">
<h4>Cadence</h4>
<p>
Check your stride turnover. The most efficient
runners take about 180 steps per minute.
</p>
</div>
</div>
<div class="media three">
<img class="media-image" src="shoes.png">
<div class="media-body">
<h4>Change it up</h4>
<p>
Don't run the same every time you hit the
road. Vary your pace, and vary the distance
of your runs.
</p>
</div>
</div>
<div class="media four">
<img class="media-image" src="runner.png">
<div class="media-body">
<h4>Focus on form</h4>
<p>
Run tall but relaxed. Your feet should hit
the ground beneath your hips, not out in
front of you.
</p>
</div>
</div>
</div>
</main>
</body>
</html>Esta listagem fornece a estrutura da página: um cabeçalho e um elemento principal que conterá o restante da página. Dentro do elemento principal está o título da página, seguido por uma div anônima (ou seja, uma div sem classe ou ID). Isso serve para agrupar os quatro elementos de mídia cinza, cada um dos quais contém uma imagem e um elemento de corpo.
DICA: Geralmente, é mais fácil configurar as grandes regiões de uma página primeiro e, em seguida, trabalhar nos elementos menores dentro delas.
Antes de começar a flutuar elementos, você colocará a estrutura externa da página no lugar. Adicione a próxima listagem ao seu arquivo de estilo (stylesheet).
crie um arquivo style.css
:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
Explicação
:root
A pseudo-classe :root representa o elemento raiz do documento, que é o elemento <html>. Ao definir box-sizing: border-box; no :root, estamos configurando que todos os elementos do documento, por padrão, usarão o modelo de caixa border-box.
box-sizing: border-box
Quando um elemento tem box-sizing: border-box, o padding e a borda são incluídos na largura e altura totais do elemento. Por exemplo, se um elemento tem uma largura de 100px e um padding de 10px, a largura total ainda será 100px, ao invés de 120px (como seria no modelo content-box).
*
O seletor universal * seleciona todos os elementos da página.
::before e ::after
Os pseudo-elementos ::before e ::after são usados para inserir conteúdo antes e depois do conteúdo de um elemento. Eles são comumente usados para adicionar elementos decorativos sem precisar adicionar mais marcação HTML.
box-sizing: inherit
Definindo box-sizing: inherit em *, ::before e ::after faz com que todos os elementos, bem como os pseudo-elementos, herdem o valor de box-sizing do elemento pai. Como configuramos :root para usar border-box, todos os elementos herdarão este modelo de caixa.
Resumo
Esse código CSS garante que todos os elementos da página, incluindo pseudo-elementos, usem o modelo de caixa border-box, que é geralmente mais intuitivo e ajuda a evitar problemas comuns de layout relacionados ao padding e borda.
body * + * {
margin-top: 1.5em;
}Explicação
Seletor CSS
body * + * é um seletor combinado que seleciona elementos específicos dentro do documento. Vamos dividir o seletor para entender cada parte:
body: Seleciona o elemento<body>do documento.*: O seletor universal*seleciona todos os elementos filhos dentro do<body>.+: O combinador adjacente+seleciona o próximo elemento irmão que imediatamente segue o primeiro elemento.
Seleção Eficiente
O seletor body * + * significa: selecione todos os elementos dentro do <body> que são precedidos por outro elemento. Em outras palavras, seleciona cada elemento que vem imediatamente após outro elemento dentro do <body>.
header {
padding: 1em 1.5em;
color: #fff;
background-color: #0072b0;
border-radius: .5em;
margin-bottom: 1.5em;
}
.main {
padding: 0 1.5em;
background-color: #fff;
border-radius: .5em;
}
.container {
max-width: 1080px;
margin: 0 auto;
}As margens automáticas esquerda e direita irão crescer para preencher o espaço disponível, centrando o elemento dentro do contêiner externo.
Ao usar max-width em vez de width, o elemento diminui para abaixo de 1080 px se o viewport da tela for menor que isso. Isso quer dizer que, em viewports menores, o contêiner interno preencherá a tela, mas em viewports maiores, ele se expandirá para 1080 px. Isso é importante para evitar a rolagem horizontal(scroll-y) em dispositivos com telas menores.
O colapso de contêiner e o clearfix
No passado, bugs do navegador afetaram o comportamento de floats, principalmente no IE 6 e 7. É praticamente certo que você não precisa mais suportar esses navegadores, então não precisa se preocupar com esses bugs.
Agora você pode confiar que os navegadores lidarão consistentemente com floats. No entanto, ainda há alguns comportamentos de floats que podem surpreendê-lo.
Estes não são bugs, mas sim floats se comportando exatamente como deveriam. Vamos ver como eles funcionam e como você pode ajustar seu comportamento para alcançar o layout desejado.Entendendo o colapso de contêiner Na página, vamos flutuar as quatro caixas de mídia para a esquerda. Os problemas se tornarão imediatamente aparentes.
1- Flutua cada caixa de mídia para a esquerda. 2- Define uma largura para caber duas caixas na página.
O que aconteceu com o fundo branco? Vemos isso atrás do título da página (“Dicas de Corrida”), mas ele para ali em vez de se estender para baixo para abranger as caixas de mídia. Para ver isso na sua página, adicione a seguinte listagem ao seu arquivo de estilo. Depois, vamos analisar por que isso acontece e como você pode corrigir.
.media {
float: left;
width: 50%;
padding: 1.5em;
background-color: #eee;
border-radius: 0.5em;
}Você definiu um fundo cinza claro em cada caixa de mídia, esperando ver o fundo branco do contêiner por trás (ou melhor, ao redor) delas. Em vez disso, o fundo branco parou acima da linha superior das caixas de mídia. Por que isso acontece?
O problema é que, ao contrário dos elementos no fluxo normal do documento, os elementos flutuados não adicionam altura aos seus elementos pais. Isso pode parecer estranho, mas remonta ao objetivo original das floats.
Como você aprendeu no início deste capítulo, as floats são destinadas a permitir que o texto se envolva ao redor delas. Quando você flutua uma imagem dentro de um parágrafo, o parágrafo não cresce para conter a imagem. Isso significa que, se a imagem for mais alta que o texto do parágrafo, o próximo parágrafo começará imediatamente abaixo do texto do primeiro, e o texto em ambos os parágrafos se envolverá ao redor da float. Isso é ilustrado na imagem abaixo.
To read later
Content references
All references in this book are credited to
Keith J. Grant FOREWORD BY Chris Coyier
APA (7th edition)
In-text citation: (Grant, 2018)
Reference list: Grant, K. J. (2018). CSS in depth. Foreword by C. Coyier. Manning.
MLA (8th edition)
In-text citation: (Grant 23)
Works Cited: Grant, Keith J. CSS in Depth. Foreword by Chris Coyier, Manning, 2018.
Chicago (17th edition)
In-text citation (footnote):
- Keith J. Grant, CSS in Depth (Manning, 2018), foreword by Chris Coyier.
Bibliography: Grant, Keith J. CSS in Depth. Foreword by Chris Coyier. Manning, 2018.
Harvard
In-text citation: (Grant, 2018)
Reference list: Grant, K.J., 2018. CSS in Depth. Foreword by C. Coyier. Manning.
