在css中,所有元素都被一个个盒子 box 所包围。
在了解盒模型前,需要知道盒模型所针对的两种常用盒子,块级盒子(block box) 和 内联盒子(inline box)。
css的box模型有一个外部显示类型,来决定盒子是块级还是内联,另一个内部显示类型决定了该盒子内部元素的布局,常用display属性来修改盒子的显示类型。
display属性的下列取值,用于改变元素的外部显示类型:
display属性的下列取值,用于改变元素的内部显示类型:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { background-color: darkblue; margin: 20px; } span { background-color: darkcyan; padding: 30px; } </style> </head> <body> <div>123</div> <span>456</span> </body> </html>
完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。此外,盒模型有两种形式:标准的和替代(IE)的。
一个元素的尺寸和位置经常受其包含块(containing block)的影响。包含块通常是这个元素最近的祖先块级元素的内容区,但不总是这样。
确定一个元素的包含块,由该元素的position属性决定:
1.width 设置盒子的宽度,默认值为auto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #dcdcdc; } .box { width: 400px; border: 3px solid red; padding: 0 50px; } .box1 { width: auto; height: 100px; background: pink; padding: 0 50px; margin: 0 50px; border-width: 0 50px; border-style: solid; border-color: green; } .box2 { width: 100%; height: 100px; background: gold; padding: 0 50px; margin: 0 50px; border-width: 0 50px; border-style: solid; border-color: green; } </style> </head> <body> <div class="box"> <div class="box1">box1</div> <div class="box2">box2</div> </div> </body> </html>
2.height 设置盒子的高度,默认值为auto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #dcdcdc; } .box { width: 400px; border: 3px solid red; padding: 0 50px; } .box1 { width: auto; height: 100px; background: pink; padding: 0 50px; margin: 0 50px; border-width: 0 50px; border-style: solid; border-color: green; } .box2 { width: 100%; height: 100px; background: gold; padding: 0 50px; margin: 0 50px; border-width: 0 50px; border-style: solid; border-color: green; } </style> </head> <body> <div class="box"> <div class="box1">box1</div> <div class="box2">box2</div> </div> </body> </html>
1.一个元素的内边距区域指的是其内容与其边框之间的空间。
2.使用padding属性控制元素的内边距大小,取值不能为负
/* 应用于所有边 */ padding: 1em; /* 上边下边 | 左边右边 */ padding: 5% 10%; /* 上边 | 左边右边 | 下边 */ padding: 1em 2em 2em; /* 上边 | 右边 | 下边 | 左边 */ padding: 5px 1em 0 2em;
3.padding值的类型
4.padding为下列属性的简写:
1.border属性用于设置元素所有边框,是border-color、border-style、border-width的简写属性。
2.可以使用以下属性为每条边框设置不同的样式,用法类似于border
3.border-width
(1) 指定一个明确的值
(2) 使用全局关键字
(3) 使用作用于 border-width 的关键字
4.border-style
(1) 指定不同数目的值
(2) 可选值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 100px; height: 40px; border: 2px solid red; border-collapse: collapse; } .b1 { border-style: none; } .b2 { border-style: dotted; } .b3 { border-style: hidden; } </style> </head> <body> <table> <tr> <td class="b1">none</td> <td class="b2">dotted</td> <td class="b3">hidden</td> </tr> </table> </body> </html>
5.border-color
6.border-image
(1) 用于在元素边框上绘制图像或实现渐变效果,使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式,然规范要求使用 border-image 时边框样式必须存在,但一些浏览器可能没有实现这一点。
(2) border-image是下列属性的简写形式
(3) border-image的用法,即border-image: source slice width outset repeat|initial|inherit;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #gradient { border: 30px solid; border-image: linear-gradient(red, yellow) 10; padding: 20px; } </style> </head> <body> <div id="gradient">The image is stretched to fill the area.</div> </body> </html>
1.使用margin属性控制元素的外边距大小,取值可以为负
2.margin值的类型
3.margin为下列属性的简写:
4.外边距重叠
(1) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为边距折叠。
(2) 有三种情况会形成外边距重叠:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 100px; width: 500px; margin: 50px 0; } div:first-child { background-color: darkcyan; } div:nth-child(2) { background-color: darkgoldenrod; } </style> </head> <body> <div>123</div> <div>456</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上边界重叠</title> <style> .father { width: 300px; height: 200px; background-color: darkgoldenrod; } .son { width: 200px; height: 200px; background-color: darkmagenta; margin: 20px 0; } .outer { width: 100px; height: 100px; background-color: darkgreen; } </style> </head> <body> <div class="outer"></div> <div class="father"> <div class="son">123</div> </div> </body> </html>
b.下边界重叠,父元素不设置高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上边界重叠</title> <style> .father { width: 300px; background-color: darkgoldenrod; } .son { width: 200px; height: 200px; background-color: darkmagenta; margin-bottom: 20px; } .outer { width: 100px; height: 100px; background-color: darkgreen; } </style> </head> <body> <div class="father"> <div class="son">123</div> </div> <div class="outer"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 300px; height: 100px; background-color: darkmagenta; } .test { margin: 100px 0; } </style> </head> <body> <div class="box"></div> <div class="test"></div> <div class="box"></div> </body> </html>
5.margin为下列属性的简写:
.box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black; }
.box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black; }
CSS中width和height的默认值auto与%案例详解:https://www.jb51.net/css/747255.html
MDN盒模型:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model