Modelo de caja CSS
1. El concepto del modelo de caja
El modelo de caja, como su nombre indica, es un contenedor en el que se pueden colocar contenidos, como cajas express, vasos, etc.
En html, por ejemplo: una etiqueta, una etiqueta span, etc. se puede colocar en un div
En palabras oficiales: el modelo de caja CSS es esencialmente una caja que encapsula los elementos HTML circundantes, incluidos márgenes, bordes, relleno y contenido real. Hay dos modelos de caja de uso común:
content-box es un modelo de caja que cumple con el estándar w3c y también es el modelo de caja predeterminado
Border-box es un modelo de caja que no se ajusta al estándar w3c, también llamado caja extraña
2. Propiedades del modelo de caja
Echemos un vistazo a varias propiedades del modelo de caja:
- Margen - Limpia el área fuera del borde, el margen es transparente.
- Borde: un borde alrededor del margen interior y fuera del contenido.
- Relleno -Clear el área alrededor del contenido, el relleno es transparente.
- Contenido: el contenido del cuadro, que muestra texto e imágenes.
Ahora veamos un ejemplo:
①Modelo de caja estándar: tamaño de caja: caja de contenido;
ancho / alto = contenido (ancho / alto) + borde + relleno
En el modelo de caja estándar, el ancho y el alto son tanto el ancho como el alto del contenido.
<!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 caja extraño (modelo de caja IE): tamaño de caja: caja de borde
ancho / alto = ancho / alto (contenido + borde + relleno) + margen
El ancho / alto en el extraño modelo de caja es (contenido + borde + margen interior ancho / alto) => (contenido + borde + relleno)
<!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>
