css盒子对齐模型 |css半透明遮罩层效果

传统盒子模型的大小由四个方向的边界来决定，分别是：margin(外边距)、border(边框)、padding(内边距)、content(内容)。现代盒子模型同样包含这四个部分，但是大小是由content(内容)和padding(内边距)来决定的。而margin(外边距)和border(边框)则不计入盒子大小。

关于盒子的对齐方式，CSS可以设置水平和垂直两方面的对齐方式。水平对齐方式有三种选择：左对齐、居中对齐、右对齐。而垂直对齐方式也有三种选择：顶部对齐、居中对齐、底部对齐。对于一个盒子而言，其对齐方式可以通过设置盒子的宽度、高度和margin、padding属性来进行设置。

.box {
width: 200px;
height: 200px;
margin: 0 auto; /* 水平居中对齐 */
padding: 50px;
text-align: center; /* 内容居中对齐 */
line-height: 100px; /* 垂直居中对齐 */
border: 2px solid black;
}

上述代码表示了一个宽高为200px的盒子，水平居中对齐、内容居中对齐、垂直居中对齐，并且有一个2px的黑色边框。其中，水平居中的方式是通过将左右margin设置为auto实现的，内容居中对齐的方式是通过设置text-align属性实现的，垂直居中对齐的方式是通过将行高line-height属性设置为盒子高度的一半实现的。

通过对盒子对齐方式的设置，大家可以让网页更为美观、规整。而CSS也提供了多种方式来实现不同的对齐方式，让大家能够更加自由灵活地进行网页设计。