【十三】CSS常用样式

前言

本篇章主要讲述CSS常用的样式，如清除浮动、文字换行、隐藏、吸顶等，以及懒加载、上拉加载、下拉刷新等。

面试回答

1.伪类与伪元素：伪类和伪元素都是用来表示DOM树以外的元素，在HTML源文件中看不到这两个东西。不同的是，伪类是用于指定元素的特殊状态，比如:hover、:first-child。而伪元素是修改元素抽象部分的样式，比如元素中所包含的content。语法上，从css3中伪类使用:，而伪元素使用::。
2.样式隐藏：主要有三种方式，第一种是设置display为none，这种方式不占空间，不会触发点击事件。第二种是设置visibility为hidden，这种方式占据空间，不会触发点击事件。第三种是设置opacity为0，这种方式占据空间，且可以触发点击事件。
3.CSS实现一个平行四边形：可以用transform的skew属性，倾斜角度设置为30deg。

知识点

1.清除浮动

添加样式，clear:both
BFC，如overflow:hidden

伪元素，如下去除clearfix后，会出现高度坍塌

<body>
  <div id="container" class="clearfix">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>

<style type="text/css">
  #container {
    border: 2px solid red;
    width: 400px;
  }
  #container .box {
    float: left;
    width: 100px;
    height: 100px;
    margin: 2px;
    background-color: green;
  }
  .clearfix:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
</style>

2.文字两端对齐

<body>
  <div class="box">大富翁</div>
</body>

<style type="text/css">
  .box {
    width: 100px;
    text-align: justify;
    text-align-last: justify;
  }
</style>

3.文字换行

<body>
  <div class="box">1111111111111111111111111111111111111111111</div>
</body>

<style type="text/css">
  .box {
    width: 100px;
    word-wrap: break-word;
  }
</style>

4.文本超出隐藏

单行：
<body>
  <div class="box">11111111111111111111111111111111111111111111111111111</div>
</body>

<style type="text/css">
  .box {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
  }
</style>

多行：
<body>
  <div class="box">
    对对对对对对多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多对对对对对对多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多对对对对对对多多多多多多多多多多多多多多多多多多多多多多多多多多多111111111对对对对对对多多多多多多多多多多多
  </div>
</body>

<style type="text/css">
  .box {
    width: 100px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
</style>

5.隐藏

<body>
  <div class="box1">11</div>
  <div class="box2">22</div>
  <div class="box3">33</div>
  <div class="box4">44</div>
</body>

<style type="text/css">
  .box1 {
    width: 100px;
    z-index: -1; /* 元素仍然存在，只是被遮挡了 */
  }
  .box2 {
    width: 100px;
    opacity: 0; /* 元素仍然存在，只是被隐藏了，点击事件，布局仍然生效 */
  }
  .box3 {
    width: 100px;
    visibility: hidden; /*   不改变布局，但点击事件不会生效 */
  }
  .box4 {
    width: 100px;
    display: none;/* 元素不存在 */
  }
</style>

6.吸顶效果

<div class="header">
  <p>这是头部</p>
</div>
<div class="nav">
  <p>导航</p>
</div>
<div class=" main">
  <p>我是主题1</p>
  <p>我是主题2</p>
  <p>我是主题3</p>
  <p>我是主题4</p>
  <p>我是主题5</p>
  <p>我是主题6</p>
  <p>我是主题7</p>
  <p>我是主题8</p>
  <p>我是主题9</p>
  <p>我是主题10</p>
  <p>我是主题11</p>
  <p>我是主题12</p>
  <p>我是主题13</p>
  <p>我是主题14</p>
  <p>我是主题15</p>
  <p>我是主题16</p>
  <p>我是主题17</p>
  <p>我是主题18</p>
  <p>我是主题19</p>
  <p>我是主题20</p>
  <p>我是主题21</p>
  <p>我是主题22</p>
  <p>我是主题23</p>
  <p>我是主题24</p>
  <p>我是主题25</p>
  <p>我是主题26</p>
  <p>我是主题27</p>
  <p>我是主题28</p>
  <p>我是主题29</p>
  <p>我是主题30</p>
</div>
<div class="footer">
  <p>我是底部</p>
</div>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }
  .header,
  .nav,
  .main,
  .footer {
    border: 2px solid #000;
    margin: 5px;
  }
  .header {
    height: 200px;
  }
  .nav {
    /* 设置盒子 根据浏览器顶部边缘，多少时，开始吸顶 */
    position: sticky;
    /* sticky 粘性定位(吸顶效果)（兼容性，目前大部分场景，通过js模式效果实现的） */
    /* 距离顶部多少开始吸顶 */
    top: 0;
    background-color: orange;
    z-index: 999;
  }
</style>

7.小于12px的字体设置

p{
    font-size:10px;
    -webkit-transform:scale(0.8);//0.8是缩放比例
}

8.CSS实现一个平行四边形

<div class="test">
    11
</div>

<style>
.test{
    background-color: blanchedalmond;
    width:100px;
    transform: skew(150deg)
}
</style>

9.懒加载

定义

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。

用处

提升用户体验：如图片数量过多，等待加载时间长，影响用户体验
减少无效资源加载：不影响用户使用前提下，减少了服务器的压力和流量，也可以减少浏览器的负担
防止并发加载的资源过多阻塞js的加载，影响正常使用

原理

默认图片（img）的src属性为空，监听页面滚动，判断是否进入可视区域，若满足则设置src属性。

插件

vue-lazyload

10.上拉刷新、下拉加载

原理

上拉加载的本质是页面触底或者快触底时触发的动作，公式：scrollTop （当前位置）+ clientHeight （元素内容宽度） >= offsetTop（总高度）

下拉加载的本事是页面置于顶部时，继续下拉触发的动作，通过监听touchstart（初始值）、touchmove（滑动差值）、touchend（离开值）来进行判断。

插件

mescroll、better-scroll等

11.浏览器兼容

由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以产生了的一种解决方式在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。

渐进增强：

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级：

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用CSS3的特性构建了一个应用，然后逐步针对各大浏览器进行hack使其可以在低版本浏览器上正常浏览。

最后

走过路过，不要错过，点赞、收藏、评论三连~

【十三】CSS常用样式

前言

面试回答

知识点

1.清除浮动

2.文字两端对齐

3.文字换行

4.文本超出隐藏

5.隐藏

6.吸顶效果

7.小于12px的字体设置

8.CSS实现一个平行四边形

9.懒加载

定义

用处

原理

插件

10.上拉刷新、下拉加载

原理

插件

11.浏览器兼容

渐进增强：

优雅降级：

最后

驰骥

引用和评论

【二十五】模块化

Vue.js-Vue实例

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

使用CSS给标题添加书名号并超出省略

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

原生electron起步-从零到一完成构建和打包