艾莉宝贝
艾莉宝贝

css3新单位vw、vh、vmin、vmax的使用详解

css3新单位vw、vh、vmin、vmax的使用详解

1，vw、vh、vmin、vmax 的含义

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

 

（2）具体描述如下：

  • vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  • vh：视窗高度的百分比
  • vmin：当前 vw 和 vh 中较小的一个值
  • vmax：当前 vw 和 vh 中较大的一个值

 

2，vw、vh 与 % 百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。

（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

 

3，vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

 

4，浏览器兼容性

（1）桌面 PC

  • Chrome：自 26 版起就完美支持（2013年2月）
  • Firefox：自 19 版起就完美支持（2013年1月）
  • Safari：自 6.1 版起就完美支持（2013年10月）
  • Opera：自 15 版起就完美支持（2013年7月）
  • IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

 

（2）移动设备

  • Android：自 4.4 版起就完美支持（2013年12月）
  • iOS：自 iOS8 版起就完美支持（2014年9月）

 

二、一个简单的样例

1，页面代码

视窗（Viewport）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。下面使用 vw 设置字体大小来实现响应式文字。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<html>

  <head>

    <meta charset="utf-8">

    <title>hangge.comtitle>

    <style>

      html, body, div, span, h1, h2, h3 {

        margin: 0;

        padding: 0;

        border: 0;

      }

 

      .demo {

       width: 100vw;

       font-size: 5vw;

       margin: 0 auto;

       background-color: #50688B;

       color: #FFF;

      }

 

      .demo2 {

       width: 80vw;

       font-size: 5vw;

       margin: 0 auto;

       background-color: #ff6a00;

      }

 

      .demo3 {

       width: 50vw;

       height: 50vh;

       font-size: 1vw;

       margin: 0 auto;

       background-color: #ff006e;

       color: #FFF;

      }

    style>

  head>

  <body>

      <div class="demo">

          <h1>宽度100％, 字体5％h1>

      div>

      <div class="demo2">

          <h2>宽度80％, 字体5％h2>

      div>

      <div class="demo3">

          <h3>宽度50％, 高度50％, 字体1％h3>

      div>

  body>

html>

2，效果图

css3新单位vw、vh、vmin、vmax的使用详解_第1张图片

 

三、实现完整覆盖的遮罩层

有时为了突出弹出框，或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩，这个使用 vw、vh 就可以很轻易地实现。

1，样例代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<html>

  <head>

    <meta charset="utf-8">

    <title>hangge.comtitle>

    <style>

      html, body, div, span, button {

        margin: 0;

        padding: 0;

        border: 0;

      }

 

      button {

        width: 120px;

        height: 30px;

        color: #FFFFFF;

        font-family: "微软雅黑";

        font-size: 14px;

        background: #28B995;

      }

 

      #mask {

        width: 100vw;

        height: 100vh;

        position: fixed;

        top: 0;

        left: 0;

        background: #000000;

        opacity: 0.5;

        display: none;

      }

    style>

  head>

  <body>

      <button onclick="document.getElementById('mask').style.display='inline'">点击显示遮罩button>

      <div id="mask" onclick="document.getElementById('mask').style.display='none'"/>div>

  body>

html>

 

2，效果图

css3新单位vw、vh、vmin、vmax的使用详解_第2张图片 css3新单位vw、vh、vmin、vmax的使用详解_第3张图片

 

四、实现居中显示的弹出框

1，弹出框大小随内容自适应

（1）样例效果图

  • 点击弹出按钮后，会显示一个在整个屏幕上居中显示的弹出框。
  • 弹出框的大小根据内容的大小自适应（logo 图片），同时弹出框后面还有个覆盖整个屏幕的半透明遮罩层。
  • 点击关闭按钮后，则隐藏弹出框。

 

css3新单位vw、vh、vmin、vmax的使用详解_第4张图片

 

（2）样例代码

遮罩层使用 vw、vh 实现全屏覆盖。弹出框添加到遮罩层中并居中。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

<html>

  <head>

    <meta charset="utf-8">

    <title>hangge.comtitle>

    <script type="text/javascript" src="js/jquery.js">script>

    <style>

      html, body, div, span, button {

        margin: 0;

        padding: 0;

        border: 0;

      }

 

      button {

        width: 120px;

        height: 30px;

        color: #FFFFFF;

        font-family: "微软雅黑";

        font-size: 14px;

        background: #28B995;

      }

 

      .dialog-container {

        display: none;

        width: 100vw;

        height: 100vh;

        background-color: rgba(0,0,0,.35);

        text-align: center;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 10;

      }

 

      .dialog-container:after {

        display: inline-block;

        content: '';

        width: 0;

        height: 100%;

        vertical-align: middle;

      }

 

      .dialog-box {

        display: inline-block;

        border: 1px solid #ccc;

        text-align: left;

        vertical-align: middle;

        position: relative;

      }

 

      .dialog-title {

        line-height: 28px;

        padding-left: 5px;

        padding-right: 5px;

        border-bottom: 1px solid #ccc;

        background-color: #eee;

        font-size: 12px;

        text-align: left;

      }

 

      .dialog-close {

        position: absolute;

        top: 5px;

        right: 5px;

        font-size: 12px;

      }

 

      .dialog-body {

        background-color: #fff;

      }

    style>

  head>

  <body>

      <button onclick="$('#dialogContainer').show();">点击显示弹出框button>

      <div id="dialogContainer" class="dialog-container">

          <div class="dialog-box">

              <div class="dialog-title">居中弹出框div>

              <a onclick="$('#dialogContainer').hide();" class="dialog-close">关闭a>

              <div class="dialog-body">

                <img src="logo.png" class="demo-image" />

              div>

          div>

      div>

  body>

html>

 

2，弹出框大小随视窗大小改变

（1）样例效果图

  • 点击弹出按钮后，会显示一个在整个屏幕上居中显示的弹出框。
  • 弹出框的大小不再由内容的大小决定，而是随视窗大小改变（宽高均为屏幕可视区域的 80%）。
  • 点击关闭按钮后，则隐藏弹出框。

 

css3新单位vw、vh、vmin、vmax的使用详解_第5张图片css3新单位vw、vh、vmin、vmax的使用详解_第6张图片

 

（2）样例代码

遮罩层使用 vw、vh 实现全屏覆盖。而弹出框的尺寸位置同样使用 vw、vh 设置。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

<html>

  <head>

    <meta charset="utf-8">

    <title>hangge.comtitle>

    <script type="text/javascript" src="js/jquery.js">script>

    <style>

      html, body, div, span, button {

        margin: 0;

        padding: 0;

        border: 0;

      }

 

      button {

        width: 120px;

        height: 30px;

        color: #FFFFFF;

        font-family: "微软雅黑";

        font-size: 14px;

        background: #28B995;

      }

 

      .dialog-container {

        display: none;

        width: 100vw;

        height: 100vh;

        background-color: rgba(0,0,0,.35);

        text-align: center;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 10;

      }

 

      .dialog-box {

        top:10vh;

        left:10vw;

        width: 80vw;

        height: 80vh;

        text-align: left;

        position: absolute;

        border: 1px solid #ccc;

        display: flex;

        flex-direction: column;

      }

 

      .dialog-title {

        line-height: 28px;

        padding-left: 5px;

        padding-right: 5px;

        border-bottom: 1px solid #ccc;

        background-color: #eee;

        font-size: 12px;

        text-align: left;

      }

 

      .dialog-close {

        position: absolute;

        top: 5px;

        right: 5px;

        font-size: 12px;

      }

 

      .dialog-body {

        background-color: #fff;

        flex:1;

        overflow: auto;

      }

    style>

  head>

  <body>

      <button onclick="$('#dialogContainer').show();">点击显示弹出框button>

      <div id="dialogContainer" class="dialog-container">

          <div class="dialog-box">

              <div class="dialog-title">居中弹出框div>

              <a onclick="$('#dialogContainer').hide();" class="dialog-close">关闭a>

              <div class="dialog-body">

                <img src="logo.png" class="demo-image" />

              div>

          div>

      div>

  body>

html>

 

五、显示大图时限制其最大尺寸

我们还可以通过视图单位来限制一些元素的最大宽度或高度，避尺寸过大而超出屏幕。

 

1，效果图

（1）点击按钮，在屏幕中央显示原始图片的大图。

（2）如果图片原始宽高均不超过屏幕宽高的 90%，则显示图片的默认大小。

（3）如果图片原始宽高均超过屏幕宽高的 90%，则限制为屏幕的 90%，使其能够完全显示。

css3新单位vw、vh、vmin、vmax的使用详解_第7张图片

css3新单位vw、vh、vmin、vmax的使用详解_第8张图片

 

2，样例代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<html>

  <head>

    <meta charset="utf-8">

    <title>hangge.comtitle>

    <script type="text/javascript" src="js/jquery.js">script>

    <style>

      html, body, div, span, button {

        margin: 0;

        padding: 0;

        border: 0;

      }

 

      button {

        width: 120px;

        height: 30px;

        color: #FFFFFF;

        font-family: "微软雅黑";

        font-size: 14px;

        background: #28B995;

      }

 

      .dialog-container {

        display: none;

        width: 100vw;

        height: 100vh;

        background-color: rgba(0,0,0,.35);

        text-align: center;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 10;

      }

 

      .dialog-container:after {

        display: inline-block;

        content: '';

        width: 0;

        height: 100%;

        vertical-align: middle;

      }

 

      .dialog-box {

        display: inline-block;

        text-align: left;

        vertical-align: middle;

        position: relative;

      }

 

      .demo-image {

        max-width: 90vw;

        max-height: 90vh;

      }

    style>

  head>

  <body>

      <button onclick="$('#dialogContainer').show();">点击显示大图button>

      <div id="dialogContainer" class="dialog-container" onclick="$('#dialogContainer').hide();">

          <div class="dialog-box">

              <img src="image.jpg" class="demo-image" />

          div>

      div>

  body>

html>

 

六、实现 Word 文档页面效果

1，效果图

（1）使用 vh 单位，我们可把 web 页面做得像 Office 文档那样，一屏正好一页。改变浏览器窗口尺寸，每页的大小也会随之变化。

（2）拖动滚动条，我们可以一直往下看到最后一页。

css3新单位vw、vh、vmin、vmax的使用详解_第9张图片css3新单位vw、vh、vmin、vmax的使用详解_第10张图片

 

2，样例代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<html>

  <head>

    <meta charset="utf-8">

    <title>hangge.comtitle>

    <script type="text/javascript" src="js/jquery.js">script>

    <style>

      html, body, div, span, button {

        margin: 0;

        padding: 0;

        border: 0;

      }

 

      body {

        background-color: #789BC9;

      }

 

      page {

        display: block;

        height: 98vh;

        width: 69.3vh;

        margin: 1vh auto;

        padding: 12vh;

        border: 1px solid #646464;

        box-shadow: 0 0 15px rgba(0,0,0,.75);

        box-sizing: border-box;

        background-color: white;

        position: relative;

      }

 

      page:after {

        content: attr(data-page);

        color: graytext;

        font-size: 12px;

        text-align: center;

        bottom: 4vh;

        position: absolute;

        left: 10vh;

        right: 10vh;

      }

 

      a {

        color: #34538b;

        font-size: 14px;

      }

    style>

    <script type="text/javascript">

      $(document).ready(function(){

        var lenPage = $("page").length;

        //自动添加每页底部的页码

        $("page").each(function(i){

          $(this).attr("data-page", "第 "+ (i+1) +" 页，共 "+ lenPage +" 页");

        });

      });

    script>

  head>

  <body>

    <page><a href="http://hangge.com">欢迎访问 hangge.coma>page>

    <page>page>

    <page>page>

  body>

html>

你可能感兴趣的:(css3)

  • 【大咖力荐 新手必备】软件开发入门，这300篇文章就够了！ 高校俱乐部 软件开发新手必备数据编码IP
    小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助
  • 页面垂直居中实现方法（HTML/CSS） TdMaster csshtml前端
    在网页设计中，垂直居中是一个常见的需求。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。方法一：使用Flexbox布局Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。下面是一个使用Flexbox布局实现页面垂直居中的示例代码：body,html{height:100%;margin:0;display:flex;align-
  • CSS3DRenderer, CSS3DObject, OrthographicCamera API 结合使用案例 小豆包3D世界 css3前端javascript
    CSS3DRenderer,CSS3DObject,OrthographicCameraAPI结合使用案例three.jscss3d-orthographicbody{background-color:#f0f0f0;}a{color:#f00;}#info{color:#000000;}three.jscss3d-orthographic{"imports":{"three":"../build
  • 网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子 weixin_39905500
    1Flex布局首先聊聊Flex布局，Flex布局又称“弹性布局”，任何容器都可以指定为Flex布局，设置Flex布局会使得子元素的float、clear、vertical-align失效1.1Flex属性1.1.1flex-direction：决定项目的排列方向，默认自左向右水平排列.box{flex-direction:row|row-reverse|column|column-reverse;
  • HTML5+CSS3小实例：3D分层图像悬停效果 艾恩小灰灰
    实例：3D分层图像悬停效果技术栈：HTML+CSS效果：源码：【html】3D分层图像悬停效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*弹性布局居中*/display:flex;justify-content:center;align-items:center;overflow:hidden;/*渐变背景*/
  • IntelliJ IDEA 的安装、配置与使用 坏孩子充电自习室 开发经验大数据
    一、IntelliJIDEA介绍–EclipseIBM1.JetBrains公司介绍IDEA(https://www.jetbrains.com/idea/)是JetBrains公司的产品，公司旗下还有其它产品，比如：WebStorm：用于开发JavaScript、HTML5、CSS3等前端技术；PyCharm：用于开发pythonPhpStorm：用于开发PHPRubyMine：用于开发
  • css3-水波浪球起伏效果 正在修炼web的小芮 css3css3
    body样式css样式*{margin:0;padding:0;list-style:none;}html,body{width:100%;height:100%;}body{display:grid;justify-content:center;align-content:center;background-color:#fff;}.circle{width:150px;height:150px
  • css3夜晚星空 苦逼的猿宝 html+csscss3前端css
    css3动画*{margin:0;padding:0;}.container{width:100vw;height:100vh;background-color:#000;}.moon{width:100px;height:100px;border-radius:50%;background-color:#F5FFFA;box-shadow:0060px#F5FFFA;position:absol
  • css单位中px、em、rem的区别 慢羊羊头上没草 css前端css3
    1、px像素（Pixel）。px是相对于显示器屏幕的分辨率来的，是一个虚拟的长度大单位，是计算机系统的数字化图像的长度单位2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸为被人为的设置，则相对于浏览器的默认字体尺寸，他会继承父级元素的字体大小因此并不是一个固定值3、rem是css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然时相对大小，但相对的只是HT
  • CSS3新特性和CSS3动画 css3
    CSS3的新特性1.选择器：（1）属性选择器：[属性名][属性名=属性值][属性名^=属性值][属性名$=属性值][属性名*=属性值]（2）伪类选择器：为特定状态的元素添加样式，例如:hover、:active、:visited。（3）伪元素选择器：选择特定部分的元素，例如::before、::after。（4）多重选择器：使用逗号分隔来同时选择多个元素，例如element1,element2。2
  • VSCode设置左侧资源管理器字体大小
    1.进入安装目录MicrosoftVSCode\resources\app\out\vs\workbench2.打开文件workbench.desktop.main.css3.搜索.monaco-workbench.part>.content4.修改font-size的值，默认是13px，我改为15px5.保存，重启VSCodeps：想调整行间距，但是不知道怎么改
  • 面试前端性能优化八股文十问十答第二期 程序员小白条 面试八股文系列面试前端性能优化八股文面试必备职场和发展项目实战
    面试前端性能优化八股文十问十答第二期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！⭐点赞⭐收藏⭐不迷路！⭐1）如何优化动画？优化动画可以通过以下几个方面进行：使用CSS动画：利用CSS3提供的transition和animation属性来实现动画效果，因为CSS动画是由浏览器来执行的，通常比JavaScript动画性能更高。使用硬件加速：通过CS
  • css+动画优化,css3动画性能优化--针对移动端卡顿问题 影子的覆盖 css+动画优化
    一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器(除了IE6、IE7、IE8)，画出来的图形可以直接保存为.png或者.jpg的图形；缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API(依靠事件和定时器更新)；由于在canvas上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。2.cs
  • web CSS3伪类选择器 :nth-child() worldzhy CSS
    :nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：:nth-child(length);/*参数是具体数字*/:nth-child(n);/*参数是n,n从0开始计算*/:nth-child(n*length)/*n的倍数选择，n从0开始算*/:nth-child(n+length);/*选择大于length后面的元素*/:nth-child(-n+lengt
  • HTML5+CSS3小实例：有点小酷的input输入框动画 艾恩小灰灰
    HTML5+CSS3实现有点小酷的input输入框动画，带动画的输入框，总是让人忍不住去点它。先看效果：源代码：您的姓名*{margin:0;padding:0;outline:none;/*这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的*/box-sizing:border-box;}body{/*弹性布局水平垂直居中*/display:flex;align-items:cen
  • webpack5介绍及基本使用（一） 前端咸鱼翻身 webpackwebpack前端
    文章目录前言简单介绍1.webpack作用2.webpack语法规范安装依赖及基本配置loader(加载器)1、处理ts/js文件1.1babel配置文件1.2browserslist配置文件2、处理图片、字体、图标等资源文件3、处理**less、scss、css**文件3.1css文件分离3.2处理less/sass文件3.3css3属性添加兼容前缀3.4css的压缩3.5示例代码4、处理htm
  • HTML5+CSS3小实例：广告灯牌效果的loading动画 艾恩小灰灰
    实例：广告灯牌效果的loading动画技术栈：HTML+CSS效果：源码：【html】广告灯牌效果的loading动画拼命加载中...【css】*{/*初始化*/margin:0;padding:0;/*box-sizing:border-box;*/}body{/*100%窗口高度*/min-height:100vh;/*弹性布局水平+垂直居中*/display:flex;justify-con
  • php mysql html5_HTML5&CSS3&JavaScript&PHP&MySQL学习笔记 Jakcwin phpmysqlhtml5
    1、在文字间添加一条水平线使用注意该符号不是成对出现的2、用来标记于段落中的较短引用，浏览器会在它之间的语句两端加上双引号。3、可以包含设计者的联系方式或者电话等。P444、链接是由百度一下产生，其中href指定要链接到的地址。P665、如果希望链接网页在新网页中打开，那么需要在第4点中设置target=”_blank”P756、当需要跳转到页面的某个位置时，可使用id属性。P767、新建一个Em
  • CSS3定位与字体 树懒pray htmlhtml5css
    1.定位定位是一种更加高级的布局手段通过定位可以将元素摆放到页面-使用position属性来设置定位可选值：static默认值，元素是静止的没有开启定位relative开启元素的相对定位absolute开启元素的绝对定位fixed开启元素的固定定位sticky开启元素的粘滞定位通过定位可以将元素摆放到页面的任意位置1.1相对定位当元素的position属性值设置为relative时则开启了元素的相
  • css3盒子 ldd_eb csscss3前端css
    盒子模型一.看透网页布局本质二.认识盒子三.盒子的边框（border）1.概念2.简写及分开写法3.合并问题（会相加）4.边框会影响盒子实际大小四.盒子的内边距（padding）1.概念2.简写3.内边距会影响盒子实际大小4.特殊情况（内边距不影响盒子实际大小）5.实际应用（导航栏）五.盒子的外边距（margin）1.概念2.简写（和内边距一样）3.典型应用（使块元素水平居中）4.合并问题（取大）
  • Itext生成pdf文件，html转pdf时中文一直显示不出来 小池先生 pdfhtml前端
    之前使用freemark模板渲染ftl页面,转出的pdf中，css2有些样式好像不支持，比较常用的居中样式都没有效果，text-align:center改造成使用html页面来转pdf，css2的样式可以生效,itext是不支持css3的弹性布局的ITextRendererpdfRenderer=newITextRenderer();//添加字体设置ITextFontResolverfontRes
  • CSS position属性sticky 天外天-亮 csscssjavascript前端
    在开发时，经常会碰到需要这样一种情况——网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css3属性position:sticky可以简单实现，省去了繁琐的计算position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky
  • CSS3学习（二） 学习不止，掉发不停 CSS3学习css前端
    目录：1.字体属性1.1字体系列1.2字体大小1.3字体粗细1.4文字样式1.5字体复合属性1.6总结2文本属性2.1文本颜色2.2对齐文本2.3装饰文本2.4文本缩进2.5行间距2.6总结1.字体属性1.1字体系列使用font-family属性定义文本的字体系列，如果有多个字体，各个字体之间用英文逗号隔开。1.2字体大小使用font-size属性定义字体大小。px（像素）是常用的单位，谷歌浏览器
  • [总结]CSS/CSS3常用样式与web移动端资源 weixin_30662011 移动开发javascript前端ViewUI
    CSS/CSS3常用样式与知识点IE条件注释条件注释简介IE中的条件注释（Conditionalcomments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。条件注释只能用于IE5以上，IE10以上不支持。如果你安装了多个IE，条件注释将会以最高版本的IE为标准。条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略
  • CSS/CSS3常用样式与web移动端资源 weixin_33994444 移动开发javascript前端ViewUI
    CSS/CSS3常用样式与知识点IE条件注释条件注释简介IE中的条件注释（Conditionalcomments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。条件注释只能用于IE5以上，IE10以上不支持。如果你安装了多个IE，条件注释将会以最高版本的IE为标准。条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略
  • css3 dazhoufu9292
    CSS修改选中文字的颜色html代码：第一段文字选中效果第二段文字选中效果css代码：.p1::selection{background:red;color:#fff;}.p2::selection{background:black;color:red;}选中文字后的效果如图所示：强制文本显示单行显示语法：white-space:nowrap;让一段文字在固定宽度在一行显示，最后一个字符为省略标记
  • css3的var()函数 kfepiza HTMLCSSJScss3前端css
    css3的var()函数变量要以两个连字符--(横杆)(减号)为开头变量可以在:root{}中定义,:root可以在css中创建全局样式变量。通过:root本身写的样式，相当于html，但优先级比后者高。在CSS3中，var()函数是一个用于插入CSS自定义属性（也称为CSS变量）的值的函数。它允许你在样式表中定义可重用的值，并在多个地方引用它们，从而使你的CSS更加灵活和可维护。使用var()函
  • 7. 多列 瑟闻风倾
    1.多列的效果说明：在CSS3中，可以创建多列来对文本或者区域进行布局。属性描述column-count分列的数量column-gap每列的间隔距离column-rule每列间隔的线及线的颜色动画-多列.div1{column-count:4;-webkit-column-count:4;column-gap:50px;-webkit-column-gap:50px;column-rule:5px
  • CSS3 新属性 cacl()用法解析 爱狗的老男蜀黍丶
    **这是一个会计算的属性，特别适合对于自适应还不是很熟练的童鞋calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用
  • html从零开始8：css3新特性、动画、媒体查询、雪碧图、字体图标【搬代码】 搬代码 css3html媒体
    css3新特性div{width:200px;height:200px;background-color:aqua;position:relative;border-radius:20px;/*圆角属性，100%就变成圆形了*/left:50px;top:100px;}两个值border-radius:50px5px;阴影div{width:200px;height:200px;backgroun
  • windows下源码安装golang 616050468 golang安装golang环境windows
             系统： 64位win7， 开发环境：sublime text 2，  go版本： 1.4.1    1.  安装前准备(gcc, gdb, git)        golang在64位系
  • redis批量删除带空格的key bylijinnan redis
    redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: [email protected]
  • oracle正则表达式的用法 0624chenhong oracle正则表达式
      方括号表达示 方括号表达式 描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]
  • 2048源码(核心算法有，缺少几个anctionbar，以后补上) 不懂事的小屁孩 2048
    2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分
  • jquery内部链式调用机理 换个号韩国红果果 JavaScriptjquery
    只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element;
  • 你订酒店时的每一次点击 背后都是NoSQL和云计算 蓝儿唯美 NoSQL
    全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
  • java笔记1 a-john java
    1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性：     3.1 万物皆为对象。    
  • C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一） aijuans C/C++求职面试必备考点
            找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。        后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
  • 程序员写代码时就不要管需求了吗？ asia007 程序员不能一味跟需求走
          编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。       我的技术不是很好，但是就不代
  • Activity的四种启动模式 百合不是茶 android栈模式启动Activity的标准模式启动栈顶模式启动单例模式启动
    android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;   启动模式xml中配置     <activity android:name=".MainActivity" android:launchMode="standard&quo
  • Spring中@Autowired标签与@Resource标签的区别 bijian1013 javaspring@Resource@Autowired@Qualifier
    Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。   1. @Autowired    @Autowired是Spring 提供的，需导入    Package:org.springframewo
  • Changes Between SOAP 1.1 and SOAP 1.2 sunjing ChangesEnableSOAP 1.1SOAP 1.2
    JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition)   Which style of WSDL
  • 【Hadoop二】Hadoop常用命令 bit1129 hadoop
    以Hadoop运行Hadoop自带的wordcount为例，   hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行   Hadoop HDFS相关命令  hadoop fs -ls  列出HDFS文件系统的第一级文件和第一级
  • java异常处理（初级） 白糖_ javaDAOspring虚拟机Ajax
    从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。 最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
  • 记录整理-工作问题 braveCS 工作
    1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
  • org.apache.tools.zip实现文件的压缩和解压，支持中文 bylijinnan apache
    刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦） 后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子 下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit
  • 读书笔记-4 chengxuyuancsdn 读书笔记
    1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个， 学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out
  • [物理与电子]半导体教材的一个小问题 comsci 问题
          各种模拟电子和数字电子教材中都有这个词汇-空穴       书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴       我现在回过头翻大学时候的教材,觉得这个
  • Flashback Database --闪回数据库 daizj oracle闪回数据库
    Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。 在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
  • 简单排序:插入排序 dieslrae 插入排序
    public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)
  • C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容 dcj3sjt126com c
    # include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; //
  • centos下php redis扩展的安装配置3种方法 dcj3sjt126com redis
    方法一 1.下载php redis扩展包  代码如下 复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
  • 线程池(Executors) shuizhaosi888 线程池
    在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); }   public class RunMain implements Executor{ @Override pub
  • openstack 快速安装笔记 haoningabc openstack
    前提是要配置好yum源 版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =
  • 从c面向对象的实现理解c++的对象（二） jimmee C++面向对象虚函数
    1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。 专门在
  • 如何让那个一个div可以拖动 lingfeng520240 html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
  • 第10章 高级事件（中） onestopweb 事件
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • 计算两个经纬度之间的距离 roadrunners 计算纬度LBS经度距离
    要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB *
  • 最具争议的10个Java话题 tomcat_oracle java
    1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！ 　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。 　 　2、Java 9 即将到来 　　 Oracle早在8月份就发布
  • zoj 3826 Hierarchical Notation(模拟) 阿尔萨斯 rar
    题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。 解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他