1.盒模型及其应用（溢出、外边距塌陷）

本文主要是介绍1.盒模型及其应用（溢出、外边距塌陷），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、盒模型

 盒模型详解-CSDN博客

CSS学习笔记3：CSS三大特性、盒子模型-CSDN博客

1.盒模型组成

（1）padding

padding和border都会撑大盒子，margin不会.

如果没有指定盒子的width/height，那么padding不会撑大盒子。

（2） border

2.标准盒模型-怪异盒模型

标准盒子模型和怪异盒子模型（详解）_怪异盒子模型和标准盒子模型-CSDN博客

2.0 尺寸计算

解决方案：

2.1标准盒模型，W3C标准盒模型

标准盒模型又称W3C标准盒模型，标准盒模型的 width 或 height 决定 content 的宽或高。

计算盒子宽：width(content) + padding + border

计算盒子高：heigth(content) + padding + border 

样式设置：box-sizing: content-box;

box1：设置的 width 和 height 决定了 content 的大小，设置 padding 和 border 会把盒子撑大，margin 不会。

所以计算实际宽高要加上padding和border

2.2怪异盒模型，IE盒模型

怪异盒模型又称IE盒子模型，怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高。

计算盒子宽：width(content + padding + border)

计算盒子高：heigth(content + padding + border)

样式设置：box-sizing: border-box;

box2：设置的 width 和 height 决定了盒子的大小，设置 border 和 padding 只会压缩 content ，所以怪异盒子模型的模型两个字会被挤出去（容纳不下了）。

所以实际宽高就是设置的宽高，不用加上其他的。

 小结：怪异盒子模型的宽高是定死的，设置 padding 或 border 不会影响页面布局。

二.盒子模型应用

2.1版心居中

设置margin:0 auto；前提是盒子一定要有宽度！ 

2.2内容溢出overflow属性

2.3文本溢出省略号显示

 单行文本：

        /* 超出部分隐藏 */overflow: hidden;/* 强制1行显示 */white-space: nowrap;/* 超出部分省略号显示 clip裁剪掉 */text-overflow: ellipsis;

多行文本：

        /* 超出部分隐藏 */overflow: hidden;/* 超出部分省略号显示 */text-overflow: ellipsis;/* 弹性伸缩盒子模型展示 */display: -webkit-box;/* 限制显示行数 */-webkit-line-clamp: 2;/* 设置子元素排列方式：垂直排列vertical 默认horizontal横向 inherit继承父元素 */-webkit-box-orient: vertical;

伪元素实现;（如果有英文就使用word-break:break-all，使单词换行能够拆分）

.box{width: 200px;/* */height: 100px;background-color: pink;overflow: hidden;/* 溢出隐藏 */line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */text-align: justify;/* 设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末尾文字时才能对齐*/position: relative;/* 子绝父相，这里是为了给伪元素设置定位*/}/* 因为省略号是放在文本最后面的，所以使用伪元素after */.box::after{content: "...";/* 省略号是放在文本最后面的 */width: 1em;/* 设置伪元素的宽度为1em，是为了遮盖的时候正好遮盖中原来的一个字的大小*/background-color: pink;/* 设置与父元素相同的背景颜色，同理，也是为了和原来的内容样式保持一致*/position: absolute;/*设置定位，其位置就是文本的右下角 */right: 0;bottom: 0;

对比display:-webkit-box和伪元素

-webkit-box：兼容webkit内核的浏览器，移动端常用

伪元素;兼容性比较好，响应式截断，根据不同宽度做出调整

 2.4外边距塌陷问题解决

（1）取消子级margin 添加父级padding

            /* 方法一 */padding-top: 30px;box-sizing: border-box;

（2）父盒子添加overflow:hidden

            /* 方法二 *//* 其实是让浏览器找到了父盒子的正确边缘 */overflow: hidden;

 （3）父盒子添加border-top

            /* 方法三 *//* 其实也是让浏览器找到了父盒子的正确边缘 */border-top: 1px solid #000;

这篇关于1.盒模型及其应用（溢出、外边距塌陷）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---