js学习-显示不下的内容

1、overflow属性

1、overflow: hidden / scroll / auto / visible ;
hidden: 隐藏超出范围的文字
scroll: 水平与垂直方向同时出现滚动条
auto：根据需要出现水平或者垂直滚动条
visible: 与不使用overflow属性时的效果一样
还可以使用overflow-x和overflow-y属性，单独指定x轴和y轴方向的值
2、text-overflow: ellipsis;
使超出显示部分的文字呈"…"形式

hidden效果：

scroll效果：

auto效果：

visible效果：

text-overflow效果:

div{
    overflow: hidden;
    text-overflow: ellipsis; /*使超出显示部分的文字呈“...”状态*/
    white-space: nowrap;/*使文字在一行，不受网页宽度大小限制*/
    width: 300px;
    border: solid 2px #e8198b;
}

显示效果：
3、盒阴影
与文字阴影相似
box-shadow: length length length color;
第一个和第二个length可以设置负数，可以实现向左、向右绘制阴影
还可以对盒内的子元素进行绘制阴影，如div里的span子元素
可以对第一个文字或者第一行使用阴影
表格使用阴影

box-shadow: -15px -15px 15px color;

子元素绘制阴影：

div span{
    margin-left: 30px;
    background: #f46d72;
    box-shadow: -15px -15px 15px #a186a0;
    width: 300px;
    height: 200px;
}

第一行或第一个字母:

table{
    border-spacing: 12px;
    box-shadow: 5px 5px 5px #f46d72;
}
td{
    background-color: #e8198b;
    box-shadow: 4px 4px 4px #000000;
    padding: 10px;
}

显示效果：

4、box-sizng属性
box-sizing: content-box(默认) / border-box;
content-box：宽度与高度不包括内补白区域以及变边框宽度高度
border-box：宽度与高度包括内补白区域以及变边框宽度高度

div{
    width: 150px;
    border: solid 80px #e8198b;
    padding: 100px;
    background-color: #b224ef;
    margin: 100px auto;
}
div#a{
    box-sizing：border-box;
}
div#b{
    box-sizing: content-box;
}