Css 布局基础积累-CFANZ编程社区

1、<a> 常用属性

属性	作用
`text-decoration: none;`	`去掉下划线`
`border-bottom: none;`	`去掉下边框（用text-decoration:` `none;没有用是时候加上）；`
a:link	正常的未被访问过的链接
a:visited	已经访问过的链接
a:active	正在点击的链接
a:hover	鼠标划过(停留)的链接

2、文本居中

列举：三种情景，1、标签元素是块级元素；2、标签元素是行内元素；3、标签元素是块级元素包裹行内元素；

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>示例</title>
<style>

h1{
text-align: center;
   background-color: rgba(102, 102, 102, .4);
}

.span1{
  display:block;
  text-align: center;
}

div{
   text-align: center;
}

</style>
</head>
  <body>
    <h1>
      HELLO
    </h1>
     <span class="span1">
      HELLO
    </span>
    <div>
       <span>
      HELLO DIV
    </span>
    </div>
  </body>

在线示例https://codepen.io/mengyaosai/pen/WNdowKd

3、标签元素添加分割线（通过:before方式）

示例：(注意：1、元素必须要添加 position: relative; 2、元素:before 要必须添加 position: absolute; )

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>示例</title>

<style>

.div1{
   background-color: #fbf9f5;
    width: 130px;
    height: 130px;
  padding:20px;
}

.div2{
 position: relative;
  background-color: #ff0000;
  width: 100px;
    height: 100px;
}

 .div2:before {
 content: " ";
 position: absolute;
 right: 0;
 width: 2px;
 height: 90px;
 background-color: blue;
        }
</style>

</head>
  <body>
     
    <div class="div1">
      <div  class="div2">
        ss
      </div>
    </div>
    
  </body>

在线示例https://codepen.io/mengyaosai/pen/vYpyGoy

4、列表获取子元素方式

属性	作用
元素:nth-child(n){}; 例： div:nth-child(2)/ div:nth-child(2n)	获取div元素里面第二个子元素/ 获取div元素里面是2的倍数子元素
元素:first-child {} 例： div:first-child	获取div元素里面第一个子元素
元素:last-child {} 例： div:last-child	获取div元素里面最后一个子元素

5、超出一行省略号显示

<h6 class="onlySingleText ">你好你好你好你好你好你好你好你好你好你好</h6>

/*超过一行显示省略号*/
.onlySingleText {

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

6、指定行数省略号显示

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>示例</title>

<style>
.div1{
   background-color: #fbf9f5;
    width: 130px;
    height: 48px;
   line-height: 16px;
   overflow: hidden;
    text-overflow: ellipsis;
    font-size:12px;
    display: -webkit-box;
     -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
</style>

</head>
  <body>
     
    <div class="div1">
      3月21日14时38分许，东方航空公司MU5735航班执行昆明—广州任务时，在广西梧州市上空失联并坠毁。机上载有乘客123人、机组人员9人。
    </div>
         
 
    
  </body>

在线示例https://codepen.io/mengyaosai/pen/wvpoWgX