HTML基础知识点（三）

14.文本溢出容器，打点处理

• 单行文本

white-space:nowrap;          /* 不换行 */
overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; 

• 多行文本

width: 200px;
border: 1px solid red;
overflow: hidden;/*首先是溢出隐藏，不可或缺*/
display: -webkit-box;/*弹性盒模型显示*/
-webkit-box-orient: vertical;/*盒模型元素的排列方式*/
-webkit-line-clamp: 3;/*显示行数*/

.text {
    width: 200px;
    height: 40px;
    line-height: 20px;
    position: relative;
    border: 1px solid red;
    overflow: hidden;
}
/*第二种：利用伪元素*/
.text::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 20px;
    background: -webkit-linear-gradient(left, transparent, red 50%);
    /* background: -o-linear-gradient(left, transparent, red 50%); */
    /* background: -moz-linear-gradient(left, transparent, red 50%); */
    /* background: linear-gradient(left, transparent, red 50%); */
}

15.背景图片处理

img {
width: 200px;
height: 200px;
border: 1px solid black;
background-image: url(img.jpg);
background-size: 100px 100px;
background-position: center center/*50% 50%*/
}

16.行级标签只能嵌套行级标签，块级可以嵌套任何标签，a标签不能嵌套a标签

     inline;inline-block文本类元素(凡是带有inline都有文本特点)
17.如何处理logo   eg.(<a href="http://www.taobao.com" target="_blank">淘宝网</a>)

{ 
/* css无法加载时，不影响正常功能的使用 */
/*     第一种： */
    text-indent: 200px;   /* 首行缩进 1em  */
    white-space: nowrap;
    overflow:hidden;
/*     第二种 */
    padding-top:90px;
    overflow:hidden;
}

18.块级元素水平居中

{margin: 0 auto;}

19.一旦一个行级块元素内包含文字，外面的文字回合里面的文字低对齐

{vertical-align: 10px //调对齐线}