css基本样式

1. 背景(background)

1.1 背景图片重复

  • background-repeat:repeat ;默认横向重复, 纵向重复
  • background-repeat: no-repeat; 不重复
  • background-repeat:repeat-x ;横向重复
  • background-repeat:repeat-y; 纵向重复
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
          width: 200px;
          border: 1px solid;
          height: 200px;
          background-image: url(https://www.w3school.com.cn/ui2017/compatible_chrome.png);
        }
        /* 默认和横向重复,纵向重复 */ 
         p:nth-child(1){
            background-repeat: repeat;
         }
       /* 不重复 */ 
         p:nth-child(2){
            background-repeat: no-repeat;
         }
       /* 横向重复 */
         p:nth-child(3){
            background-repeat: repeat-x;
         }
      /* 纵向重复 */
         p:nth-child(4){
            background-repeat: repeat-y;
         }
        </style>
</head>
<body>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
</body>
</html>

1.2 背景图片

  • background-size: contain；保持宽高比例, 长边拉伸至最大。
  • background-size: cover；保持宽高比例, 短边拉伸至最大, 长边多余的会被隐藏
  • background-size:xxpx,xxpx;
  • background-size: xx%, xx%; 不保持宽高比例, 可以设置任意数值或者百分比
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    p {
      width: 600px;
      border: 1px solid;
      height: 400px;
      background-image: url(http://zk.huruqing.cn/assets/bg2.78d35cdc.83c30b86.png);
      background-repeat: no-repeat;
    }
  /* contain；保持宽高比例, 长边拉伸至最大。 */
   p:nth-child(1){
    background-size: contain;
   }
    /* cover；保持宽高比例, 短边拉伸至最大, 长边会被截掉一部分 */
    p:nth-child(2){
    background-size: cover;
   }
    /* (X Y)或者(xx% xx%) 不保持宽高比例, 可以设置任意数值或者百分比 */
    p:nth-child(3){
    background-size: 50%  80%;
   }
  </style>
</head>
<body>
  <p></p>
  <p></p>
  <p></p>
</body>
</html>

1.3 背景图片的位置

  • background-position:x y;使用px,离上面 左边的距离
  • background-position:xx% xx%;使用百分比
  • background-position:right top; 使用两个定位单词,top,botton,left,right
  • background-position:right; 使用一个单词,另一个方位默认居中
<!DOCTYPE html>
<html lang="en"
<head>
<style>
  p {
    height: 100px;
    width: 200px;
    border: 1px solid;
    /* background-image: url(../img/compatible_chrome.png); */
    background-image: url(https://www.w3school.com.cn/ui2017/compatible_chrome.png);
    background-repeat: no-repeat; 
  }
P:nth-child(1) {
    /* 使用px */
    background-position: 10px 10px ;
  }
P:nth-child(2) {
    /* 使用百分比 */
    background-position: 20% 20%;
  }
P:nth-child(3) {
    /* 使用定位单词,两个选项 */
    background-position: right bottom;
  }
P:nth-child(4) {
     /* 使用定位单词, 只有一个选项 ，在上面，左右居中*/ 
     background-position: top;
  }
P:nth-child(5) {
     /* 使用定位单词, 只有一个选项 ，在左面，上下居中*/ 
     background-position: left;
  }
</style>
</head>
<body>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</body>
</html>

1.4 合并写法

  • 第一个值为是否重复，后两个为图片位置
background: url(https://www.w3school.com.cn/ui2017/compatible_chrome.png)no-repeat right bottom;

2. 雪碧图（精灵图）

  • 将所有图片集中放到一张图片上面，设置一个小方框，将大图片上面的指定图标展示再框中，目的是减少网页获取图片时频繁向服务器获取，减少消耗
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>   
    <style>
        span {
          display: inline-block;
          width: 20px;
          height: 20px;
          border: 1px solid #999;
          background: url(http://docs.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png) no-repeat;
          border-radius: 50%;
        }
      /* 显示男图标 */
        .span1 {
           background-position: 4px 3px;
        }
        /* 显示女图标 */
        .span2 {
           background-position: 4px  -23px ;
        }
    /* 显示胜利图片 */
        .span3 {
          background-position: -50px -24px ;
        }
      </style>
      <img src="http://docs.huruqing.cn/assets/1837519-20191107151128254-1992912590.636ffad0.png" alt="" />
       <hr />
      <span class="span1"></span>
      <span class="span2"></span>
      <span class="span3"></span>
</body>
</html>

3. 三角形

  • 宽高设为0
  • 边框设为20px(根据需要)
  • 除底部边框外, 其它边框设为透明色
<!DOCTYPE html>
<html lang="en"> 
<head>
    <style>
       div {
          width: 0px;
          height: 0px;
          border: 50px solid red;
          border-top-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
       }
    </style>
</head> 
<body>
    <div></div>
</body> 
</html>

4. 元素溢出

4.1 overflow 溢出消失

当元素里的内容大于元素的宽度或者高度的时候, 内容就会溢出
  • overflow: hidden; 隐藏
  • overflow: scroll;滚动条
  • overflow: auto;自动选择是否显示滚动条
  • 文字出现空格后会自动换行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 150px;
            height: 50px;
            border: 1px solid red;
        }
        p:nth-child(1) {
           /*溢出隐藏*/
           overflow: hidden;
        }
        p:nth-child(2) {
           /*水平方向溢出用滚动条*/
           overflow-x: scroll;
        }
        p:nth-child(3) {
           /*垂直方向溢出用滚动条*/
           overflow-y: scroll;
           
        }
        p:nth-child(4) {
           /*自动选择垂直方向溢出是否用滚动条*/
            overflow: auto;
        }
        p:nth-child(5) {
           /*自动选择水平方向溢出是否用滚动条*/
            overflow: auto;
        }
        p:nth-child(6) {
           /*垂直方向溢出用滚动条，文字不够多，不出现滚动条*/
            overflow: auto;
        }

    </style>
</head>
<body>
    <!-- hidden 隐藏 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
    <!-- scroll 滚动条 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
    <!-- scroll 没有溢出时,同样会有滚动条的'轨道'' -->
    <p> pppppppp </p> 
    <!-- auto 自动 -->
    <p> ppppppppppppppppppppppppppppppppppppppppppppp </p>
    <p> pppppppp pppppp ppppp ppppp pppp pppppp pppppp pp ppp </p>
     <!-- auto 不溢出时没有滚动条 -->
    <p> ppppppppppp </p>
</body>
</html>

4.2 溢出用省略号显示

4.2.1 多行文本溢出
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <style>
         p {
           width: 300px;
           border: 1px solid;
           line-height: 20px;
           height: 40px; 
                 /* 展示字体 */
            display: -webkit-box;
            /* 超出隐藏 */
            overflow: hidden;
            /* 超出部分用省略号 */
            -webkit-box-orient: vertical;
            /* 超出两行的进行隐藏 */
            -webkit-line-clamp: 2;
         }
       </style>
     </head>
     <body>
       <p>
           哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
           哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
           哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
           哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
           哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
       </p>
     </body>
   </html>
4.2.2 单行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      p {
         width: 300px;
         border: 1px solid;
         height: 50px; 
         /*内容溢出隐藏*/
         overflow: hidden;
         /*遇到空白怎么处理: 不换行*/
         white-space: nowrap;
         /*文字溢出设置*/
         text-overflow: ellipsis;
      }
   </style>
</head>
<body>
   <p>
      哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
   </p>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容