第五天
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;等属性