盒布局（2）

盒布局（2）

1.显示文本的内容
overflow属性

值	说明
hidden	超出容纳范围的文字将被隐藏起来
scroll	在div元素中出现水平与垂直的滚动条，超出的内容被滚动显示
auto	当文字超出div元素的容纳范围时，根据需要出现水平滚动条或者是垂直滚动条，滚动显示超出的范围
visible	和不使用的overflow时候的显示一样，超出容纳范围的文字按原样显示

使用：
overflow:hidden;

overflow-x属性与overflow-y属性
单独指定水平或垂直的内容显示方式

text-overflow属性
在盒末尾显示一个代表省略的符号“……”，只在水平方向上超出盒的容纳范围有效

超出内容以省略号显示

div{
        width:300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* white-space: nowrap;文本不换行 */
        border: solid 1px green;
    }

2.盒阴影
box-shadow属性
box-shadow:length length length color
文字阴影离开文字的横坐标，纵坐标，半径距离和颜色

div{
      background-color: rgb(165, 247, 165);
      box-shadow: 10px 10px 10px green;
    }

对第一个文字或第一行使用阴影
first-letter、first-line

 div::first-letter{
      background-color: rgb(165, 247, 165);
      box-shadow: 10px 10px 10px green;
    }

box-sizing属性
box-sizing可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内补空白区域以及边框的宽度和高度。
可以给box-sizing属性指定的属性值为content-box属性值与border-box属性值
content-box属性值表示元素的宽度与高度不包括内补白区域及边框的宽度高度（总宽度=width+2margin+2padding）
border-box属性值表示元素的宽度与高度包括内补白区域以及边框的宽度与高度，在没有使用box-sizing属性的时候，默认值是content-box属性值（总宽度=width）

div{
        width: 300px;
        border: solid 30px green;
        padding: 30px;
        background-color: aqua;
        margin: 20px auto;
    }

   div#div1{
        box-sizing: border-box;
    }

    div#div2{
        box-sizing: content-box;
    }