Day04_2019-08-23

CSS核心属性(下)

1. padding 内边距 元素内容到元素边框的距离
   • padding-top 上方向
   • padding-right 右方向
   • padding-bottom 下方向
   • padding-left 左方向
   • 可以使用复合写法，不可设置负值

   div{
       padding:10px 20px 30px 40px;
   }
   

2. margin 外边距 元素外面的空白区域
   • margin-top 上方向
   • margin-right 右方向
   • margin-bottom 下方向
   • margin-left 左方向
   • 可以使用复合写法，可以设置负值

   div{
       margin:10px 20px 30px 40px;
   }
   

3. 元素的大小计算
   • 宽度计算 元素宽度+左右padding+左右border+左右margin
   • 高度计算 元素高度+上下padding+上下border+上下margin
4. 文档流和脱离文档流的margin计算区别
   • 脱离文档流margin是上下叠加和左右叠加
   • 文档流margin是上下重合取较大的margin值,左右叠加
5. 容器溢出属性
   • ovsible 默认，内容不会被修剪，呈现在元素框之外
   • hidden 内容会被修剪，并且其余内容不可见
   • scroll 内容会被修剪，但是浏览器会显示滚动条，XY轴2条都会显示
   • auto 内容会被修剪，但是浏览器会显示滚动条，根据实际情况显示单条或2条滚动条
   • inherit 规定从父元素继承overflow的属性

   div{
       overflow: hidden;
   }
   

6. 文本空白空间
   • normal 默认，多余空白会被浏览器忽略只保留一个空格
   • pre 空白会被浏览器保留
   • pre-wrap 保留一部分空白符序列，但是正常的进行转换
   • pre-line 合并空白符序列，但是保留换行符
   • nowrap 文本不会换行，文本会在同一行上继续，直到遇到br标签为止

   div{
       white-space:nowrap
   }
   

7. 文本溢出属性
   • clip 不显示省略号，而是简单裁剪
   • ellipsis 当文本溢出时，显示省略号标记
   • 使用ellipsis属性的前置条件
     1. 必须设置容器宽度 widht：value；(px|%皆可)
     2. 必须设置文本一行显示 white-space: nowrap;
     3. 必须设置隐藏溢出内容 overflow: hidden;

   div{
       width: 500px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }