什么是css中的盒子模型？
所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ width:500px; height: 300px; text-align: center; } table, td,th{ border:1px solid skyblue; border-collapse: collapse; } </style> </head> <body> <table align="center" cellspacing="0"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>职业</th> <th>地址</th> </tr> </thead> <tbody> <tr> <td rowspan="2">阿牛</td> <td>男</td> <td>学生</td> <td>冰岛</td> </tr> <tr> <td>wa</td> <td colspan="2">wa</td> </tr> </tbody> </table> </body> </html>
注意：表格属性cellspacing="0"将单元格合并在一起，边框宽度并没有合并，所以边框看起来较粗，border-collapse：collapse；正好解决这一问题。
所以对于表格可以只用border-collapse：collapse;合并单元格。
同时注意：边框也会影响盒子大小，如果你需要宽高特定的盒子，则盒子的宽高属性是减去边框的像素的。例如一个宽高为200px,边框1px的盒子css应该是下面这样：
div{
width: 198px;
height: 198px;
border: 1px solid pink;
}
🍅padding(内边距）
设置边框与内容之间的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #mc{ width: 300px; height: 100px; background-color: purple; } #mc p{ /* 当前块级标签不指定宽高时，padding不会撑大盒子 */ padding: 30px; background-color: skyblue; } </style> </head> <body> <div id="mc"> <p>牛啊啊啊啊啊啊啊啊啊啊啊啊啊 </p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav{ height: 41px; background-color: #fcfcfc; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; line-height: 41px; } .nav>a{ display: inline-block; height:41px; padding: 0 20px;/*盒子未指定宽度，则padding不会撑开盒子宽度大小*/ text-decoration: none; font-size: 12px; color:#4c4c4c; } .nav>a:hover{ background-color: #eee; color: #ff8500; } </style> </head> <body> <div class="nav"> <a href="">新浪导航</a> <a href="">手机新浪网</a> <a href="">移动客户端</a> <a href="">微博</a> <a href="">三个字</a> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; margin:100px auto; background-color: pink; } </style> </head> <body> <div class="demo1"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .demo1{ width: 200px; height: 200px; margin:100px auto; background-color: pink; } .demo2{ width: 200px; height: 200px; margin:100px auto; background-color: pink; } </style> </head> <body> <div class="demo1"></div> <div class="demo2"></div> </body> </html>
这里按代码的理论，两个盒子之间应该有200px距离，而事实却只有100px,
这就是margin定义块元素的垂直外边距时，可能会出现外边距的合并。
🥭嵌套块元素垂直外边距的坍塌
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 嵌套块元素垂直外边距的坍塌 */ .ko{ width: 400px; height: 400px; background-color: royalblue; margin-top: 50px; /* border: 1px solid transparent; 法一 */ /* padding: 1px; 法二 */ /* overflow: hidden; 法三 */ } .ks{ width: 100px; height: 100px; /*margin-top: 100px;*/ background-color: salmon; } </style> </head> <body> <div class="ko"> <div class="ks"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 去掉内外边距 */ *{ padding:0; margin:0; } .demo{ height: 415px; width:298px; margin: 100px auto; background-color: #fff; } .demo p{ height:70px; font-size: 14px; margin-top: 30px; padding: 0 28px; } .appraise{ font-size: 12px; color: #b0b0b0; margin-top:20px; padding: 0 28px; } .info{ font-size: 14px; margin-top: 15px; padding: 0 28px; } .info h4{ display: inline-block; font-weight: 400; } a{ color:#333; text-decoration: none; } #first{ color: #b0b0b0; margin: 0 6px 0 15px; } #last{ color:#ff6700; } </style> </head> <body> <div class="demo"> <img src="123.jpg" style="width:100%" alt=""> <p>哇，这张图片好美呀!我十分喜欢，这是我最喜欢的一张图啦！！！</p> <div class="appraise">来自于 1568749 的评价</div> <div class="info"> <h4><a href="#">redmi airdots真无限蓝...</a></h4> <span id="first"> | </span> <span id="last">99.9元</span> </div> </div> </body> </html>
