Modelo de caixa CSS
1. O conceito do modelo de caixa
O modelo de caixa, como o nome sugere, é um contêiner no qual podem ser colocados conteúdos, como caixas expresso, xícaras, etc.
Em html, por exemplo: uma tag, tag span, etc. podem ser colocados em um div
Em palavras oficiais: o modelo de caixa CSS é essencialmente uma caixa que encapsula os elementos HTML circundantes, incluindo margens, bordas, preenchimento e conteúdo real. Existem dois modelos de caixa comumente usados:
content-box é um modelo de caixa em conformidade com o padrão w3c e também é o modelo de caixa padrão
Border-box é um modelo de caixa que não está em conformidade com o padrão w3c, também chamado de caixa estranha
2. Propriedades do modelo de caixa
Vamos dar uma olhada em várias propriedades do modelo de caixa:
- Margem - Limpe a área fora da borda, a margem é transparente.
- Borda-A borda ao redor da margem interna e fora do conteúdo.
- Preenchimento - Limpe a área ao redor do conteúdo, o preenchimento é transparente.
- Conteúdo - O conteúdo da caixa, exibindo texto e imagens.
Agora vamos ver um exemplo:
①Modelo de caixa padrão: tamanho da caixa: caixa de conteúdo;
largura / altura = conteúdo (largura / altura) + borda + preenchimento
No modelo de caixa padrão, largura e altura são a largura e a altura do conteúdo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style type="text/css">
* {
box-sizing: content-box; //IE盒模型
/* box-sizing: border-box; */ //怪异盒子
}
.wrapper {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 50px;
/* margin: 50px; */
}
.item {
background-color: red;
width: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
<script type="text/javascript">
(function() {
//获取父元素的宽度
let wrapperWidth = document.querySelector('.wrapper').offsetWidth;
//获取子元素的宽度
let itemWidth = document.querySelector('.item').offsetWidth;
console.log(wrapperWidth,'wrapperWidth')
// 220 = (100) + (100) + (20) = ((paddingLeft+paddgingRight)+(content)+(borderLeft+borderRight)
console.log(itemWidth,'itemWidth') // 20 = width
})()
</script>
② Modelo de caixa estranha (modelo de caixa do IE): tamanho da caixa: caixa de borda
largura / altura = largura / altura (conteúdo + borda + preenchimento) + margem
A largura / altura no modelo de caixa estranha é (conteúdo + borda + largura / altura da margem interna) => (conteúdo + borda + preenchimento)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style type="text/css">
* {
/* box-sizing: content-box; */ //IE盒模型
box-sizing: border-box; //怪异盒子
}
.wrapper {
width: 100px;
height: 100px;
border: 10px solid red;
padding: 50px;
/* margin: 50px; */
}
.item {
background-color: red;
width: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
<script type="text/javascript">
(function() {
//获取父元素的宽度
let wrapperWidth = document.querySelector('.wrapper').offsetWidth;
//获取子元素的宽度
let itemWidth = document.querySelector('.item').offsetWidth;
console.log(wrapperWidth,'wrapperWidth') // 120 = 100 +20 = (100) + (0) + (20)
((paddingLeft+paddgingRight)+(content)+(borderLeft+borderRight)
console.log(itemWidth,'itemWidth') // 20 = width
})()
</script>
