2018/1/24 溢出容器，打点展示

1.溢出容器，要打点展示
        1)单行文本
            p{
            width:300px;
            height: 20px;
            line-height: 20px;
            border:ipx solid black;
            white-space: nowrap;/*让文本失去换行功能功能*/
            overflow: hidden;
            text-overflow: ellipsis;/*溢出部分以...展示*/

            }

        2)多行文本:手敲... height = 2 * line-height ,表示只能放两行

    2.背景图片属性
        background-image: url();
        background-size:100px 100px;
        background-repeat:no-repeat;
        background-position: center top;

    3.行级元素只能嵌套行级元素
      块级元素可以嵌套任何元素
        特殊：p 标签内不能嵌套 div 标签
              a 标签内不能嵌套 a 标签
    4.拉动网页显示屏大小，内容区不变

.wrapper{
    height: 30px;
    background-color: gray;
}
.content{
    margin: 0 auto;/*上下不变，左右自适应*/
    width: 1200px;
    height: 30px;
    background-color: purple;
}

<divclass="wrapper"> <div class="content"> </div> </div> 2018/1/24 溢出容器，打点展示

5.inline inline-block ->> 文本类元素，有文字分隔符（即空格） 2018/1/24 溢出容器，打点展示

img 也是文本类元素：margin-left解决太过残暴，放在服务器上会出现问题，不用解决，容忍这一bug,放到服务器后会自动压缩.

6.一旦一个行级块元素里边包含文字，则它外边的文字会和里边的文字底对齐

2018/1/24 溢出容器，打点展示

如何调对齐线： vertical-align: middle;中对齐

2018/1/24 溢出容器，打点展示

相关推荐