前端学习第5天：盒模型

第五天

1.盒模型

1.1盒模型组成

​ margin ：外边距 ~>盒子与盒子之间的距离

​ padding：内边距 ~>盒子边框到内容的距离

1.2 相邻块外边距合并问题（margin塌陷）

​ 上下两个相邻盒子分别使用 margin-bottom 和 margin-top 时，实际的外边距距离为较大的一个值，并不会相加。

1.3嵌套块垂直外边距合并问题

​ 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

​ 解决方法：

​ 1.可以为父元素定义1像素的上边框或上内边距

​ 2.可以为父元素添加 overflow:hidden

1.4 盒子总高度和宽度

​ 总宽度= width + padding-right + padding-left + boreder-right + border-right + margin-right + margin-left

​ 总高度= height + padding-top +padding-bottom +margin-top margin-bottom + border-top + border-bottom

2.文本溢出相关属性

2.1溢出属性（容器的）

​ 语法：

overflow:hidden(隐藏)/visible(默认值)/scroll(溢出部分隐藏，不论溢出否都会有滚动条)/auto(若内容溢出，自动撑出滚动条)/inherit(继承父元素overflow属性值)。

2.2省略号显示

​ 语法：

text-overflow:clip/ellipsis
/*
	clip:不显示省略号，直接剪切掉溢出内容
	ellipsis:对象文本溢出时，显示省略号(...)
	text-overflow: 属性仅是当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义
*/

2.3要实现当行文本溢出时产生省略号的效果还需定义

1、容器宽度：width：value；

2、强制文本在一行内显示:white-space：nowrap;

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号：text-overflow：ellipsis;

拓展：方法2

1、给当前设置省略号的元素加上<nobr></nobr>强制不换行标签

2、给当前元素设置overflow：hidden；text-overflow：ellipsis;等属性