2021-05-14

盒模型
1.内填充：padding-left/right/top/bottom
取值：
4个值：上 右 下 左
3个值：上 （左右） 下
2个值：上下 左右
1个值：上下左右
padding作用在父标签上，设置的是盒子里面的距离内容（文字或标签）

注意点：内填充不可以去负值

1、外间距：margin-left/right/top/bottom
取值：
4个值：上 右 下 左
3个值：上 （左右） 下
2个值：上下 左右
1个值：上下左右
margin：盒子外边的间距，作用在盒子本身上，设置盒子外的间隙

特点:
1.上下外间距重叠，左右外间距塌陷
2.子标签设置向上外间距，父标签移动（子标签或父标签不设置任何浮动及定位的属性，或父标签不设置边框的情况下）

盒模型的组成：
content（内容）
padding（内填充）
border（边框）
margin（外间距）
width
height:—内容区（css设置宽高围城区域是内容区）
width（页面显示）=width（css设置宽度）+padding-left+padding-right+border-left+border-right

单行省略号：
width：100px;设置宽度
display：inline-block;//转化元素类型，设置宽度
white-space：nowrap;//文字不换行
overflow：hidden；//超出部分隐藏
text-overflow：ellipsis；//添加省略号
text-overflow:clip//不显示省略号

多行省略号：
display:-webkit-box;----开启弹性盒子（老版本）
-webkit-box-orient:vertical; 改变弹性盒子元素的排列方式（竖排）
-webkit-line-clamp:2; 添加省略号的行数
overflow:hidden;
text-overflow: ellipsis;

溢出属性：overflow：visible/hidden/scroll/auto/inherit
取值：
visible:默认值，溢出内容会显示在元素之外
hidden:溢出内容隐藏
scroll:滚动，溢出内容以滚动方式显示
auto:有溢出则添加滚动条，无溢出则正常显示
inherit:规定应该遵从父元素继承overflow 属性的值
overflow-x:x轴溢出
overflow-y:y轴溢出