CSS核心属性(下)
- padding 内边距 元素内容到元素边框的距离
- padding-top 上方向
- padding-right 右方向
- padding-bottom 下方向
- padding-left 左方向
- 可以使用复合写法，不可设置负值
div{ padding:10px 20px 30px 40px; } - margin 外边距 元素外面的空白区域
- margin-top 上方向
- margin-right 右方向
- margin-bottom 下方向
- margin-left 左方向
- 可以使用复合写法，可以设置负值
div{ margin:10px 20px 30px 40px; } - 元素的大小计算
- 宽度计算 元素宽度+左右padding+左右border+左右margin
- 高度计算 元素高度+上下padding+上下border+上下margin
- 文档流和脱离文档流的margin计算区别
- 脱离文档流margin是上下叠加和左右叠加
- 文档流margin是上下重合取较大的margin值,左右叠加
- 容器溢出属性
- ovsible 默认，内容不会被修剪，呈现在元素框之外
- hidden 内容会被修剪，并且其余内容不可见
- scroll 内容会被修剪，但是浏览器会显示滚动条，XY轴2条都会显示
- auto 内容会被修剪，但是浏览器会显示滚动条，根据实际情况显示单条或2条滚动条
- inherit 规定从父元素继承overflow的属性
div{ overflow: hidden; } - 文本空白空间
- normal 默认，多余空白会被浏览器忽略只保留一个空格
- pre 空白会被浏览器保留
- pre-wrap 保留一部分空白符序列，但是正常的进行转换
- pre-line 合并空白符序列，但是保留换行符
- nowrap 文本不会换行，文本会在同一行上继续，直到遇到br标签为止
div{ white-space:nowrap } - 文本溢出属性
- clip 不显示省略号，而是简单裁剪
- ellipsis 当文本溢出时，显示省略号标记
- 使用ellipsis属性的前置条件
- 必须设置容器宽度 widht：value；(px|%皆可)
- 必须设置文本一行显示 white-space: nowrap;
- 必须设置隐藏溢出内容 overflow: hidden;
div{ width: 500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
