Css 基础样式

Css版本

CSS1: 1996年12月17日成为W3C推荐标准，该版本中提供了有关文字、颜色、位置和文本属性等基本信息。
CSS2: 1998年5月,样式单得到了更多的充实。
CSS3: 1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案。各浏览器厂商对CSS3的支持也在不断的完善中。

(1) 盒子显示和隐藏

display

block 块级
inline 行内, 宽高失效
Inline-block 宽高失效
none 隐藏
Flex(后面学)
table(略)

<style>
   p {
      border: 1px solid;
      width: 200px;
      height: 50px;
   }

   p:nth-child(1) {
      /* 默认block */
      display: block;
   }

   p:nth-child(2) {
      /* inline宽高失效 */
      display: inline;
   }

   p:nth-child(3) {
      /* inline-block 既是行内,又可以设置宽高 */
      display: inline-block;
   }

   p:nth-child(4) {
      display: none;
   }
</style>

<p>我爱web1</p>
<p>我爱web2</p>
<p>我爱web3</p>
<p>我爱web4</p>

visibility

visible
hidden
visibility:hidden和display:none的区别

<!-- demo1 -->
<style>
   p:nth-child(1) {
      visibility: visible;
   }
   p:nth-child(2) {
      visibility: hidden;
   }
</style>

<p>11111</p>
<p>22222</p> 

<!-- demo2 visibility:hidden和display:none的区别 -->

<!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>
      .aa {
         visibility: hidden;
      }

      .bb {
         display: none;
      }
   </style>
</head>

<body>


   <div class="aa">aaaa</div>
   <div>我爱web</div>
   <hr>
   <div class="bb">bbbb</div>
   <div>我爱web</div>
</body>
</html>

(2) 宽高

宽高的几种单位

px
百分比
vw和vh
rem(略)
em(略)

<style>
  /* body {margin: 0;} */
   p {
     border: 1px solid red;
   }
   p:nth-child(1) {
     width: 300px;
     height: 300px;
   }
   p:nth-child(2) {
    /* 父元素的百分比,在这里也就是body */
    width: 50%;
    height: 10%;
   }
   p:nth-child(3) {
     /* 50vw是浏览器(也就是html标签)的50% */
     width: 50vw;
     height: 10vh;
   }
</style>

<p>px</p>
<p>百分比</p>
<p>vw和vh</p>

(3) 字体

1. 字体家庭

font - family属性指定一个元素的字体。
font-family 可以写多个字体, 如果浏览器不支持第一个字体，则会尝试下一个。

<!DOCTYPE html>
<html lang="en">
 <head>
    <style>
       body {
        font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
       }

       p:nth-child(1) {
        font-family: Sans-serif;
       }
       p:nth-child(2) {
        font-family: Monospace;
       }
       p:nth-child(3) {
        font-family: Cursive;
       }
    </style>
 </head>

<body>
    <div> 生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。 </div>
    <p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>3.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
</body>
</html>

2. 字体颜色

颜色英文单词
十六进制记法
rgb
rgba

透明色

 <style>
     p:nth-child(1) {
         color: red;
     }
     p:nth-child(2) {
         /* 可以缩写为#999 */
         color: #999999;
     }
     p:nth-child(3) {
         color: rgb(10, 100, 100);
     }
     p:nth-child(4) {
         color: rgba(0, 0, 0, 0.5);
         background-color: rgba(0, 0, 0, .5);
         font-size: 30px;
     }
     p:nth-child(5) {
         /* 透明色 */
         color: transparent;
     }
 </style>

 <p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
 <p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
 <p>3.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
 <p>4.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
 <p>5.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>

3. 字体大小

font-size

4. 字体粗细

font-weight取值为

bold 加粗
100~900, 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

<style>
  p {
    width: 800px;
    height: 100px;
    border: 1px solid;
    font-family: cursive;
    /* 字体大小 */
    font-size: 20px;
  }
  p:nth-child(1) {
    /* 字体粗细 */
    font-weight: bold;
  }
  p:nth-child(2) {
      /* 可以是100~900 */
    font-weight: 500;
  }
</style>

<p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
<p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>

5. 文本对齐

text-align, 取值为left, center, right

<style>
   p {
       width: 500px;
       border: 1px solid;
       height: 50px;
   }
   p:nth-child(1) {
       text-align: left;
   }
   p:nth-child(2) {
    text-align: center;
   }
   p:nth-child(3) {
    text-align: right;
   }
</style>

<p>1.生如蝼蚁, 当立鸿鹄之志</p>
<p>2.生如蝼蚁, 当立鸿鹄之志</p>
<p>3.生如蝼蚁, 当立鸿鹄之志</p>

6. 文本行高

line-height 取值为数值
line-height 取值为倍数
当文字只有一行, line-height = 元素高度时, 文本垂直居中

<style>
   p {
       width: 200px;
       border: 1px solid;
       height: 100px;
   }
   p:nth-child(1) {
       line-height: 30px;
   }
   p:nth-child(2) {
        line-height: 2;
   }
   p:nth-child(3) {
    width: 500px;
    line-height: 100px;
    text-align: center;
   }
</style>

<p>1.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>
<p>2.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>
<p>3.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>

(4) 背景

例子所用图片

1. 背景颜色

background-color:gray; , 若只设置背景颜色也可以直接使用background: gray;

2. 背景图片重复

background-repeat 取值

repeat 默认横向重复, 纵向重复, 不写效果也一样
no-repeat 不重复
repeat-x 横向重复
repeat-y 纵向重复

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

<p></p>
<p></p>
<p></p>
<p></p>

3. 背景图片大小(背景拉伸)

background-size: contain；保持宽高比例, 长边拉伸至最大。
background-size: cover；保持宽高比例, 短边拉伸至最大, 长边会被截掉一部分
background-size: xx%, xx%; 不保持宽高比例, 可以设置任意数值或者百分比

<style>
     p {
       width: 600px;
       border: 1px solid;
       height: 400px;
     }
     p:nth-child(1) {
       background-image: url(http://fresh.huruqing.cn/img/bg2.78d35cdc.png);
       background-repeat: no-repeat;
       background-size: contain;
     }
     p:nth-child(2) {
       background-image: url(http://fresh.huruqing.cn/img/bg2.78d35cdc.png);
       background-repeat: no-repeat;
       background-size: cover;
     }
     p:nth-child(3) {
       background-image: url(http://fresh.huruqing.cn/img/bg2.78d35cdc.png);
       background-repeat: no-repeat;
       background-size: 100px 100px;
     }
     p:nth-child(4) {
       background-image: url(http://fresh.huruqing.cn/img/bg2.78d35cdc.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
   </style>
   
   <p></p>
   <p></p>
   <p></p>
   <p></p>

4. 背景图片位置

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<style>
p {
 height: 100px;
 width: 200px;
 border: 1px solid;
 background-image: url(http://zl.huruqing.cn/assets/bg2.78d35cdc.83c30b86.png);
 background-repeat: no-repeat;
 background-size: 20% 30%;
}

P:nth-child(1) {
 background-position: 20px 20px;
}

P:nth-child(2) {
 background-position: 10% 10%;
}

P:nth-child(3) {
 background-position: top right;
}

P:nth-child(4) {
 background-position: center center;
}
</style>

<body>
<p></p>
<p></p>
<p></p>
<p></p>
</body> 
</html>

5. 背景合并写法

<style>
  p {
    width: 400px;
    border: 1px solid;
    height: 200px;
    background: url(http://fresh.huruqing.cn/img/bg2.78d35cdc.png)no-repeat right bottom;
    background-size: 50% 50%;
  }
</style>

<p></p>

6. 雪碧图(精灵图)

<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: 3px -21px;
  }
  .span3 {
    background-position: 3px -46px;
  }
</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>

盒模型相关: 宽高、边框、内外边距

(5) 边框

1. 边框设置

第一个选项: 边框大小
第二个选项: solid(实线)或虚线
第三个选项: 边框颜色,
取值为none时, 没有边框
边框是可以分开写
- border-top 上边框
- border-bottom 下边框
- border-left 左边框
- border-right 右边框

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            height: 100px;
            width: 100px;
           
        }
        P:nth-child(1) {
            border: 1px solid red;
        }
        p:nth-child(2) {
            border-top: 1px solid;
            border-bottom: 1px solid;
        }
    </style>
</head>
<body>
    <p></p>
    <p></p>
</body>
</html>

2. 圆角

使用border-radius设置元素的圆角, 取值可以使用px或者百分比
当border-radius的值为50%的时候, 元素是个圆(前提是元素宽高相等)

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            height: 100px;
            width: 100px;
           border: 1px solid;
        }
        P:nth-child(1) {
            border-radius: 10px; 
        }
        p:nth-child(2) {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <p></p>
    <p></p>
</body>
</html>

3. 三角形

宽高设为0
边框设为20px(根据需要)

除底部边框外, 其它边框设为透明色

<!DOCTYPE html>
<html lang="en"> 
<head>
    <style>
        p {
            height: 0;
            width: 0;
            border-top: 20px solid transparent;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid red;
        }
    </style>
</head> 
<body>
    <p></p>
</body> 
</html>

4. 边框图片

边框图片css3新增-了解

(6) 内边距padding

我们用padding样式来设置元素边缘跟元素内容之间的空白, padding的取值有

padding-top 上
padding-bottom 下
padding-left 左
padding-right 右

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        p {
            width: 200px;
            border: 1px solid;
        }

        p:nth-child(1) {
            /* 分开写 */
            padding-top: 15px;
            padding-right: 15px;
            padding-bottom: 15px;
            padding-left: 15px;
        }

        /* 合并写法: 1个选项 */
        p:nth-child(2) {
            padding: 15px;
        }

        /*  合并写法: 4个选项上-右-下-左(顺时针) */
        p:nth-child(3) {
            padding: 10px 20px 30px 40px;
        }
         /*  合并写法: 3个选项上-左右-下 */
         p:nth-child(4) {
            padding: 10px 20px 30px;
        }
         /*  合并写法: 2个选项上下-左右 */
         p:nth-child(5) {
            padding: 20px 30px;
        }
    </style>
</head>

<body>
    <p>
        1.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        2.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        3.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        4.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p>
    <p>
        5.天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </p> 
</body> 
</html>

(7) 外边距margin

知识点:

外边距设置
外边距合并写法
外边距合并
外边距塌陷
元素居中

1. 外边距设置

<!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>
            div {
              height: 200px;
              border: 1px solid;
              margin-left: 10px;
          	/* 可以使用负值 */      
              margin-top: 10px;
              margin-right: 10px;
              margin-bottom: 10px;
            }
          </style>
        </head>
        <body>
          <div></div>
        </body>
      </html>

2. 外边距合并写法

<!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>
    <head>
        <style>
            div { 
                height: 200px;
                border: 5px solid;
                margin-top: 20px;
                margin-left: 20px;
                margin-right: 20px;
                padding: 15px;
            }
        </style>
    </head>

<body>
    <div>
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
        天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤 天道酬勤
    </div>
</body> 
</html>

3. 外边距合并

两个元素的margin进行合并的时候不是简单的相加

<!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>
    <head>
        <style>
            div { 
                width: 200px;
                height: 200px;
                border: 5px solid; 
            }
            div:nth-child(1) {
                margin-bottom: 20px;
            }
            div:nth-child(2) {
                margin-top: 30px;
            }
        </style>
    </head>

<body>
    <div> </div>
    <div> </div>
</body> 
</html>

4. 外边距塌陷

塌陷现象

当我们给子元素设置margin-top的时候, 子元素与父元素并没有产生距离, 但是父元素往下"掉"了, 这种现象我们称之为margin-top塌陷, 原因是因为父元素和子元素在margin-top上进行了合并, 合并后的margin-top只作用于父元素上。

解决的办法：

给父元素添加边框
给父元素添加padding-top
给父元素添加overflow

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .aa {
            margin-top: 10px;
            width: 300px;
            height: 300px;
            background-color: gray;
            /* border-top: 1px solid transparent; */
            /* padding-top: 1px; */
            overflow: auto;
        }
        .aa .bb {
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="aa">
        <div class="bb"></div>
    </div>
</body> 
</html>

5. 元素居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p {
       width: 300px;
       height: 100px;
       border: 1px solid;
       margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <p>
        生活总是两难，再多执着，再多不肯，最终不得不学会接受。从哭着控诉，到笑着对待，到头来，不过是一场随遇而安。
    </p>
  </body>
</html>

(8) 盒模型

(9) 固定定位

知识点:

固定定位示例
固定定位导致元素塌陷
固定定位元素"位置之争"
固定定位的应用
- 背景遮罩层
- loading和弹窗

1. 固定定位示例

将元素设置为 position:fixed 元素可以固定在屏幕的任何一个位置
元素设置为固定定位之后, 元素的不再是块级元素, 而是变成 "行内块级", 若是元素没有内容, 且没有设置宽度, 那么它的宽度为0。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p {
        width: 100px;
        height: 100px;
        background-color: gray;
        position: fixed;
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>
</html>

2. 固定定位导致元素塌陷

元素设置为固定定位之后, 元素会脱离文档流，和它在同一个位置的普通元素，会“陷进去”

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      nav {
         height: 50px;
         background-color: rgb(9, 9, 9,.5);
         position: fixed;
         top: 0;
         width: 100%;
         color:#fff;
         line-height: 50px;
         text-align: center;
      }
      div {
          /* margin-top: 50px; */
          height: 100px;
          background-color: green;
          width: 50%;
      }
    </style>
  </head>
  <body>
    <nav>导航栏</nav>
    <div>hello web前端</div>
  </body>
</html>

3. 固定定位元素"位置之争"

两个元素都设置了固定定位, 并且重叠在了一起, 可以使用z-index来调整它们的前后顺序, 规则是谁设置的数值大, 谁就在上面

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        position: fixed;
      }
      .aa {
        height: 100px;
        width: 100px;
        background-color: green;
        z-index: 1;
      }
      .bb {
        margin: 20px;
        height: 200px;
        width: 200px;
        background-color: gray;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <div class="aa"></div>
    <div class="bb"></div>
  </body>
</html>

4.固定定位的应用

顶部导航栏和底部导航栏(略)
半透明遮罩层
屏幕正中间的对话框(弹窗)
- 设置为固定定位
- top:50%, left: 50%;
- margin-left: 元素宽度一半(取负数), margin-top: 元素高度一半(取负数)

<!-- 遮罩层 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .pop {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
      }
    </style>
  </head>
  <body>
    <img src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png" alt="">
    <div class="pop"></div>
  </body>
</html>

<!-- 弹窗 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .pop {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
      }

      .dialog {
        box-sizing: border-box;
        height: 50px;
        line-height: 50px;
        text-align: center;
        width: 200px;
        background-color: #fff;
        z-index: 2;
        position: fixed; 
        left: 50%;
        top: 50%;
        margin-top: -25px;
        margin-left: -100px;
      }
    </style>
  </head>
  <body>
    <img
      src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png"
      alt=""
    />
    <div class="pop"></div>
    <div class="dialog">这是一个对话框</div>
  </body>
</html>

(10) 相对定位和绝对定位

1. 绝对定位元素特征

给元素设置为绝对定位之后, 元素拥有和固定定位类似的特征:

元素变成"行内块级"
脱离文档流, 跟在其后面的元素会"陷进去"
也可以使用z-index来调整元素的叠放顺序

2. 定位子元素在父元素中的位置

可以使用相对定位和绝对定位把子元素放置到父元素的任意一个位置, 步骤:

把父元素设置为相对定位
把子元素设置为绝对定位
设置子元素在父元素中的位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
       .aa {
           height: 300px;
           width: 300px;
           border: 1px solid;
           position: relative;
       }
       .bb {
           height: 50px;
           width: 50px;
           background-color: gray;
           position: absolute;
           bottom: 10px;
           right: 10px;
       }
    </style>
  </head>
  <body>
    <div class="aa">
        <div class="bb"></div>
    </div>
  </body>
</html>

(10) 元素内容溢出

1. 溢出处理overflow

当元素里的内容大于元素的宽度或者高度的时候, 内容就会溢出, 我们使用overflow(overflow-x, overflow-y)样式来处理溢出, 它的取值

hidden 隐藏
scroll 滚动
auto 自动

注: 当内容是没有空格的字母时, 不会自动换行, 比如 ppppppppppp

<!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-x: hidden;
        }
        p:nth-child(2) {
            overflow-x: scroll;
        }
        p:nth-child(3) {
            overflow-x: scroll;
        }
        p:nth-child(4) {
            overflow-x: auto;
        }

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


<!-- overflow对于内容是元素, 也是一样的道理 -->
<!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>
        .aa {
            width: 100px;
            height: 100px;
            border: 1px solid;
            /* overflow-x: scroll; 
            overflow-y: hidden; */
            overflow: auto;
        }
        .aa .bb {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, .5);
        }

    </style>
</head>
<body>
     <div class="aa">
         <div class="bb"></div>
     </div>
</body>
</html>

2. 溢出用省略号显示

单行文本溢出
多行文本溢出

<!-- 单行文本溢出 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p {
        width: 300px;
        border: 1px solid;
        line-height: 20px;
        height: 30px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <p>
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
    </p>
  </body>
</html>

<!-- 多行文本溢出 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p {
        width: 300px;
        border: 1px solid;
        line-height: 20px;
        height: 40px; 
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; 
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <p>
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
    </p>
  </body>
</html>

作业

用css编写一个倒三角形, 一个尖角朝左的三角形和一个尖角朝右的三角形
编写四个按钮(要一样大), 依次显示新浪微博图标, 橙色点赞图标, 红包图标
完成下面的效果图

第1节 Css选择器

第3节 css进阶

Css 基础样式 #

Css版本 #

(1) 盒子显示和隐藏 #

(2) 宽高 #

(3) 字体 #

1. 字体家庭 #

2. 字体颜色 #

3. 字体大小 #

4. 字体粗细 #

5. 文本对齐 #

6. 文本行高 #

(4) 背景 #

1. 背景颜色 #

2. 背景图片重复 #

3. 背景图片大小(背景拉伸) #

4. 背景图片位置 #

5. 背景合并写法 #

6. 雪碧图(精灵图) #

(5) 边框 #

1. 边框设置 #

2. 圆角 #

3. 三角形 #

4. 边框图片 #

(6) 内边距padding #

(7) 外边距margin #

1. 外边距设置 #

2. 外边距合并写法 #

3. 外边距合并 #

4. 外边距塌陷 #

5. 元素居中 #

(8) 盒模型 #

(9) 固定定位 #

1. 固定定位示例 #

2. 固定定位导致元素塌陷 #

3. 固定定位元素"位置之争" #

4.固定定位的应用 #

(10) 相对定位和绝对定位 #

1. 绝对定位元素特征 #

2. 定位子元素在父元素中的位置 #

(10) 元素内容溢出 #

1. 溢出处理overflow #

2. 溢出用省略号显示 #

作业 #