前端和盒模型包括两种 分别是W3c盒模型和IE盒模型
W3C盒模型包括content、padding、border、margin 其中width = content
IE盒模型包括content、padding、border、margin 其中width = content+padding+border
在之后后来W3C在CSS3中新增了box-sizing的样式 属性包含content-box和border-box也就是box-sizing:content-box就是默认(在设置时候)的样式(W3C盒模型)box-sizing: border-box(IE盒模型)是width包含了content+padding+boder。
(1)标准盒模型 content-box 元素的总宽度width=content+padding+border
<template>
<!-- 标准盒模型 -->
<div class="box">
123
</div>
<!-- border padding width 100+20+10 = 130-->
</template>
<style scoped>
.box{
width: 100px;
height: 100px;
border: 10px solid red;
padding: 5px;
}
</style>
实际元素的宽度为:width=100+20+10 = 130
实际元素的高度为:height=100+20+10 = 130
(2)IE怪异盒模型 box-sizing: border-box 元素的总宽度width=width(用样式指定的宽度)
context=设置是元素宽度-border-padding
<template>
<!-- 怪异盒模型 -->
<div class="box">
123
</div>
</template>
<style scoped>
.box{
width: 200px;
height: 200px;
border: 5px solid red;
padding: 10px;
//设置怪异盒模型加这个
box-sizing: border-box;
}
</style>
实际元素的宽度为:width=200
实际元素的高度为:height=200