四种浏览器盒子模型详解

一、盒子模型是什么？

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

二、使用步骤

1.W3C盒子模型

标准盒模型下盒子的大小 = width ( content ) + border + padding + margin
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.怪异盒模型

怪异盒模型下盒子的大小=width（content + border + padding） + margin

3.弹性盒子(Flex Box)

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

几种div盒子上下居中方式的一种

.fu{
	display: flex;
    justify-content: center;
    align-items: center;
}

灵魂问题：项目中什么情况用到flex？除了这种方式还有哪些方式可以居中？响应式布局还可以怎么做？

3.colomn布局盒子

<style>
.columns{
    -webkit-columns:200px 3;  /*列宽是200像素，列数为3。*/
    -webkit-column-gap:30px;   /*列与列之间的间距是30像素*/
    -webkit-column-rule:2px solid green;  /*列与列之间的边框颜色是2像素的绿色。*/
    text-overflow: ellipsis;  /*用省略符号来代表被修剪的文本。*/
    white-space: nowrap;    /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
    word-wrap: break-word;   /*在长单词或 URL 地址内部进行换行。*/
    box-sizing: border-box;}   /*规定两个并排的带边框的框*/
</style>

总结

good morning