盒模型
box:盒子，每个元素在页面中都会生产成一个矩形区域（盒子）
盒子类型
1.行盒，display等于inline的元素
2.块盒，dipplay等于block的元素
- 行盒在页面中不换行、块盒独占一行。
- 浏览器默认样式表设置的块盒：容器元素、h1~h6、p
- 常见的行盒：span 、a 、img、 video、 audio
盒子的组成部分
- Margin(外边距) – 清除边框外的区域，外边距是透明的。
- Border(边框) – 围绕在内边距和内容外的边框。
- Padding(内边距) – 清除内容周围的区域，内边距是透明的。
- Content(内容) – 盒子的内容，显示文本和图像。
无论行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
; 1.内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的 内容盒 content-box
2.填充(内边距) padding
盒子边框到盒子内容的距离。
属性
该属性是以下属性的简写：
语法
/* 应用于所有边 */
padding: 1em;
/* 上边下边 | 左边右边 */
padding: 5% 10%;
/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;
/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;
/* 全局值 */
padding: inherit;/* inherit：继承父元素padding */
padding: initial;/* initial：设置padding属性为它的默认值（IE 不支持） */
padding: unset;/* unset：不设置padding */
padding 属性接受 1~4 个值。每个值可以是 length 或 percentage。取值不能为负。
以固定值为内边距。
相对于包含块的 宽度，以百分比值为内边距。
填充区域+内容区 = 填充盒 padding-box
3.边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
边框 + 填充区+内容区 = 边框盒 border-box
边距的样式未设置默认为字体颜色
4.外边距 margin
边框到其他盒子（其他边缘）的距离
属性
*
*
*
上、下外边框的设置对不内联元素，如 ]span) 和 [，无效。
备注： 外边距控制的是元素外部空出的空间。相反，padding 操作元素 _内部_空出的空间。
语法
/* 应用于所有边 */
margin: 1em;
margin: -3px;
/* 上边下边 | 左边右边 */
margin: 5% auto;
/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;
/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;
/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;
margin 属性接受 1~4 个值。每个值可以是 length，或 auto。取值为负时元素会比原来更接近临近元素。
简写属性：
Margin 和 Padding 属性
margin 和 padding 值的简写版本类似。下面的 CSS 声明：
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left，与”trouble”的辅音字母顺序相同）。
margin: 10px 5px 10px 5px;
Margin 对于多个值有以下的简写规则：
- 当只有 一个值声明时，该值会用于所有 四个值。
- 当只有 两个值声明时，第一个值用于 上边距和 下边距，第二个值用于 左边距和 右边距。 （上下 左右）
- 当有 三个值声明时，第一个值用于 上边距，第二个值用于 左边距和 右边距，第三个值用于 下边距。 （上 左右 下）
- 当有 四个值声明时，其会按顺序用于 上、 右、 下、 左边距（按顺时针方向）。 （上 右 下 左）
盒模型应用
改变宽高范围
衡量设计稿尺寸的时候，往往使用的是边框盒，但是设置width和height的
css3属性 改变宽高的影响范围 box-sizing:
改变背景覆盖范围：
默认情况下,背景会覆盖边框盒，可以通过 background-clip 属性进行修改
CSS3 background-clip 属性
background-clip: border-box|padding-box|content-box;
background-clip: border-box; // 默认值。背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
内容溢出
当div设置了宽高时候，
overflow，控制溢出边框盒后的处理方式。
断词处理
word-break ，会影响文字在什么位置被截断换行 ，指定非CJK脚本的断行规则。
word-break: normal|break-all|keep-all;
word-break: normal; //普通,CJK字符（文字位置截断），非CJK字符（单词位置截断）.使用浏览器默认的换行规则。
word-break: break-all;//截断所有，所有字符都在文字处截断。允许在单词内换行。
word-break: keep-all;//保存所有，所有文字都在单词之间截断。 只能在半角空格或连字符处换行。
提示:CJK脚本是中国，日本和韩国（”中日韩”）脚本。
空白处理
单行文本
网页上显示信息，显示不了
单行文本超出隐藏,用…显示
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;/*文字溢出超出省略*
多行文本
多行文本超出隐藏
-webkit内核才有作用，而移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；
"p2">
这是一个div里面的多行文本。如果值为 hidden，当点击hidden时，滚动机制关闭，内容会被修剪，但是浏览器不会显示供查看内容的滚动条，默认值是 visible。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
CSS
#p2{
width: 220px;
height: 58px;
overflow:hidden;
text-overflow:ellipsis;
background: greenyellow;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；
display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ；
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ；
text-overflow: ellipsis 以用来多行文本的情况下，用省略号”…”隐藏超出范围的文本。
Original: https://blog.csdn.net/beiluoL/article/details/127808850
Author: 我有满天星辰
Title: 【 盒模型】css盒模型学习
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/657910/
转载文章受原作者版权保护。转载请注明原作者出处！