CSS–怪异盒子模型
怪异盒子模型
- 标准盒子宽度计算方法(扩张主义)
border-left-width
+width
+padding-left
+padding-right
+border-right-width
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border-left: 8px solid red; border-right: 3px solid red; padding-left: 20px; padding-right: 20px; margin-left:100px; margin-right: 20px; background-color: #368; } </style> </head> <body> <div></div> </body> </html> }
- 怪异盒子模型(压缩主义)
- 当内边距和边框宽度相加 < 内容 width 的时候,总宽度 就是 width 的值,会压缩content内容区域
- 当内边距和边框宽度相加 > 内容 width 的时候,总宽度为 内边距+边框 内容content区域为0
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { box-sizing:border-box; width: 100px; height: 100px; border-left: 8px solid red; border-right: 3px solid red; padding-left: 20px; padding-right: 20px; margin-left:100px; margin-right: 20px; background-color: #368; } </style> </head> <body> <div></div> </body> </html> }
- 两种盒子模型的区别
- 用途:正常盒子模型主要用于pc端。怪异盒子模型主要用于手机端
- 原理:正常盒子模型大小是由内而外的,由内部决定外部大小;而怪异盒子模型是由外而内的。
box-sizing:border-box
开启怪异盒子模型;
常规盒子模型:box-sizing:content-box
怪异盒子模型的应用
- 当父盒子无边框时,子盒子增加 margin 会造成外边距穿透
- 解决方法:给父盒子设置
padding: 10px 0;
- 解决方法:给父盒子设置
- 实现子元素水平居中方法:
- 子元素设置
margin: 10px atuo;
(当子元素多时,该方法耗费计算力,每个子元素都要计算) - 父元素设置
padding: 0 10px;
(该方法需要重新更改父盒子 width 大小) - 调用怪异盒子模型,父元素设置
padding: 0 10px;
,此时不需要更改父盒子 width 大小,但是不能设置内容宽度,此时 width 是总宽度
- 子元素设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="tset">
<mata name="descriptions" conten="This is a website for a test">
<!-- <meta http-quiv="Page-Enter" content="revealTrans(reveal)"> -->
<title>test</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
box-sizing: border-box;
width: 400px;
margin: 30px auto;
padding: 10px 10px;
/* border: 1px solid red; */
background-color: #368;
}
.wrap {
width: 380px;
height: 40px;
margin: 10px 0;
line-height: 40px;
text-align: center;
font-size: 18px;
border: 1px solid black;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
<li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
<li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
<li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
<li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
<li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li>
</ul>
</div>
</body>
</html>
- 正常盒子和怪异盒子的记忆方法
border=皮 padding=肉 content=骨骼- 正常盒子:肉增加,皮有弹性,会撑大,总体增大
- 怪异盒子:皮紧绷,定死,肉增加,会往里压缩骨骼
- 怪异盒子解决的一个问题:
正常盒子下,当增加内边距时,如果想保证盒子和之前一样大,需要手动重新计算 width ,怪异盒子模型则省略该步
- 为什么会采用怪异盒子模型
因为父盒子无边框时子元素增加 margin 会造成外边距穿透,此时需要给父盒子添加 padding ,添加 padding 会增大父盒子,需要手动重新计算父盒子 width ,因此利用怪异盒子模型省略重新计算 width 这一步。