CSS3学习笔记——display属性、overflow属性、text-overflow属性、box-shadow属性、box-sizing属性

1.display属性

css中，使用display属性来定义盒的类型；

属性值分别有：

1) block;

2) inline;

3) inline-block：可以设置宽高，块元素可以并排显示；

4) inline-table：如果将table元素中的diaplay属性设置为inline-table类型，就可以让表格与其他文字处在同一行；

    但在各个浏览器中，对于文字与表格的对齐方式并不完全相同；

5) list-item：可以将元素作为列表来显示，同时在元素的开头加上列表的标记；

    list-style-type：用来设置列表标记的形状；可以是circle；

6) run-in：如果元素后面还有block类型的元素，run-in类型的元素将被放置在后面block类型的元素内部；

7) compact：如果元素后面还有block类型的元素，则compact类型的元素将被放置在block类型的元素的左边；

8) none：元素将不会显示

2.overflow属性

overflow属性用来指定对于盒中容纳不下的内容的显示方法；

超出的内容可以是x方向的也可以是y方向的，分别用overflow-x和overflow-y表示；

overflow的属性值有：

  1）scroll：div中将出现固定的水平滚动条与垂直滚动条；

  2）auto：当文字超出div范围时根据需要出现水平滚动条或垂直滚动条，并且滚动显示超出的内容；

  3）visible:超出内容的文字按原样显示；

  4）hidden：超出容纳范围的文字将被隐藏起来；

3.text-overflow属性

    当把over-flow属性的值设定为“hidden”时，如果使用text-overflow属性，可以在盒的末尾显示一个代表省略的符号“……”，但是该属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效。

div{
  overflow:hidden;
  text-overflow:ellipsis;
  /**使得盒的右端的内容不能换行显示**/
  white-space:nowrap;
  width:300px;
  border:solid 1px orange;
}

 4.box-shadow属性

box-shadow属性让盒在显示时产生阴影效果；

  1）box-shadow：length length length color；

  三个length分别指阴影离开横方向、纵方向的距离，还有阴影的模糊半径（如果横纵向的距离为负数，则阴影的方向会与原来的相反。阴影半径如果为0，则将绘制不向外的模糊的阴影），color 指的是阴影的颜色；

 2）创建盒内阴影

    box-shadow:inset length length   length      length      color;

                                                         模糊半径  展开半径  

 要对那个部分使用阴影就指直接指定那个标签元素即可；比如：table、td、span、某个盒子的第一行：div:first-line;某个盒子的第一个字：div:first-letter{}

5.box-sizing属性

  box-sizing可以指定width属性与height属性分别指定的宽度值与高度值是否包含元素内部补白区域与边框的宽度与高度；

  有两个属性值：

     1）content-box：不包括；

     2）border-box：包括；

     3）在Firefox浏览器中，还可以在box-sizing属性中指定指定属性为padding-box。指定的宽度与高度包括内容的宽度与高度和内部补白区域的宽度与高度；

为什么要用box-sizing属性？

 因为该属性的目的是对元素的总宽度做一个控制，如果不使用 该属性，样式中默认的是content-box属性值；利用该属性值会使得页面的布局更加方便；