浅谈浅谈CSS中盒模型的理解中盒模型的理解
今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下
( 摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助 )
1.基本的盒模型知识基本的盒模型知识
CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距
(margin)几个要素。如图:
为了方便大家理解和尝试,我写了一个小Demo放上来方便大家尝试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 显示盒模型 */
/* 盒模型计算规则
元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;
元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。
元素的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + border的左右宽度;
元素的总高度 = 元素(element)的height + padding的上下边距的值 + border的上下宽度。
*/
.box{
/* 高度和宽度 */
height: 100px;
width: 100px;
background-color: yellow;
/* 边框的宽度 */
border: 10px solid green;
/* 内边距 */
padding: 10px;
/* 外边距*/
margin: 100px;
}
/* 此处引入子div只是为了显示content的区域 */
.child{
height: 100%;
width: 100%;
background-color: red;