半透明边框

关键代码:
border: 10px solid hsla(0,0%,100%,0.5);
background-clip: padding-box;
==〉background-clip:背景绘制的区域
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

===========================================
box-shadow可以做到多重边框
例:box-shadow: 0 0 0 10px #655,

        0 0 0 15px deeppink,
        0 2px 5px 15px rgba(0,0,0,.6);

===========================================
边框内圆角
outline+border-radius
例:div {

outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */

max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: tan;
font: 100%/1.5 sans-serif;

}

条纹背景
background: linear-gradient(#fb3 50%, #58a 0);

background-size: 100% 30px;

条纹边框
background: linear-gradient(white, white) padding-box,

url(/csssecrets.io/images/stone-art.jpg) border-box 0 / cover;

平行四边形--〉skew变形
1.嵌套元素方案
.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }
对内容再应用一次反响的skew()变形,从而抵消容器的变形效果

2.伪元素方案
思路:把所有样式应用到伪元素上,然后对伪元素进行变形

.button {

position: relative;
display: inline-block;
padding: .5em 1em;
border: 0; margin: .5em;
background: transparent;
color: white;
text-transform: uppercase;
text-decoration: none;
font: bold 200%/1 sans-serif;

}

.button::before {

content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);

}

菱形图片
.diamond {

width: 250px;
height: 250px;
transform: rotate(45deg);
overflow: hidden;
margin: 100px;

}

.diamond img {

max-width: 100%;
transform: rotate(-45deg) scale(1.42);
z-index: -1;
position: relative;

}

鼠标区域禁止显示
:disabled, [disabled], [aria-disabled="true"] {

cursor: not-allowed;

}

扩大可点击区域
button {

padding: .3em .5em;
border: 10px solid transparent;
border-radius: 50%;
background: #58a;
background-clip: padding-box;
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
color: white;
font: bold 150%/1 sans-serif;
cursor: pointer;

}

垂直居中
body {

display: flex;*
min-height: 100vh;
}

main {

padding: 1em 2em;
margin: auto;
box-sizing: border-box;*
background: #655;
color: white;
text-align: center;*

}==>盒模型的方式

各种CSS实现Sticky Footer
什么是 “Sticky Footer”

所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

实现方法

  1. 将内容部分的底部外边距设为负数
    这是个比较主流的用法,把内容部分最小高度设为100%,再利用内容部分的负底部外边距值来达到当高度不满时,页脚保持在窗口底部,当高度超出则随之推出的效果。
  2. <body>
  3. <div class="wrapper">
  4. content
  5. <div class="push"></div>
  6. </div>
  7. <footer class="footer"></footer>
  8. </body>
  9. html, body {
  10. height: 100%;
  11. margin: 0;
  12. }
  13. .wrapper {
  14. min-height: 100%;
  15. / 等于footer的高度 /
  16. margin-bottom: -50px;
  17. }
  18. .footer,
  19. .push {
  20. height: 50px;
  21. }
    这个方法需要容器里有额外的占位元素(如 .push)

需要注意的是 .wrapper的margin-bottom值需要和 .footer的负的height值保持一致,这一点不太友好。

  1. 将页脚的顶部外边距设为负数
    既然能在容器上使用负的margin bottom,那能否使用负margin top吗?当然可以。

给内容外增加父元素,并让内容部分的底部内边距与页脚高度的值相等。

  1. <body>
  2. <div class="content">
  3. <div class="content-inside">
  4. content
  5. </div>
  6. </div>
  7. <footer class="footer"></footer>
  8. </body>
  9. html, body {
  10. height: 100%;
  11. margin: 0;
  12. }
  13. .content {
  14. min-height: 100%;
  15. }
  16. .content-inside {
  17. padding: 20px;
  18. padding-bottom: 50px;
  19. }
  20. .footer {
  21. height: 50px;
  22. margin-top: -50px;
  23. }
    不过这种方法和上一种一样,都需要额外添加不必要的html元素。
  24. 使用flexbox弹性盒布局
    以上三种方法的footer高度都是固定的,通常来说这不利于网页布局:内容会改变,它们都是弹性的,一旦内容超出固定高度就会破坏布局。所以给footer使用flexbox吧,让它的高度可以变大变小变漂亮~(≧∇≦)
  25. <body>
  26. <div class="content">
  27. content
  28. </div>
  29. <footer class="footer"></footer>
  30. </body>
  31. html {
  32. height: 100%;
  33. }
  34. body {
  35. min-height: 100%;
  36. display: flex;
  37. flex-direction: column;
  38. }
  39. .content {
  40. flex: 1;
  41. }
    你还可以在上面添加header或在下面添加更多元素。可从以下技巧选择其一:

    flex:1 使内容(如: .content)高度可以自由伸缩
    margin-top:auto
    
  42. absolute
    通过绝对定位处理应该是常见的方案,只要使得页脚一直定位在主容器预留占位位置。
  43. <div class="wrapper">
  44. <div class="content"><!-- 页面主体内容区域 --></div>
  45. <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
  46. </div>
  47. html, body {
  48. height: 100%;
  49. }
  50. .wrapper {
  51. position: relative;
  52. min-height: 100%;
  53. padding-bottom: 50px;
  54. box-sizing: border-box;
  55. }
  56. .footer {
  57. position: absolute;
  58. bottom: 0;
  59. height: 50px;
  60. }
    这个方案需指定 html、body 100% 的高度,且 content 的 padding-bottom 需要与 footer 的 height 一致。
  61. calc
    通过计算函数 calc 计算(视窗高度 - 页脚高度)赋予内容区最小高度,不需要任何额外样式处理,代码量最少、最简单。
  62. <div class="wrapper">
  63. <div class="content"><!-- 页面主体内容区域 --></div>
  64. <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
  65. </div>
  66. .content {
  67. min-height: calc(100vh - 50px);
  68. }
  69. .footer {
  70. height: 50px;
  71. }
    如果不需考虑 calc() 以及 vh 单位的兼容情况,这是个很理想的实现方案。同样的问题是 footer 的高度值需要与 content 其中的计算值一致。
  72. table
    通过 table 属性使得页面以表格的形态呈现。
  73. <div class="wrapper">
  74. <div class="content"><!-- 页面主体内容区域 --></div>
  75. <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
  76. </div>
  77. html, body {
  78. height: 100%;
  79. }
  80. .wrapper {
  81. display: table;
  82. width: 100%;
  83. min-height: 100%;
  84. }
  85. .content {
  86. display: table-row;
  87. height: 100%;
  88. }
    需要注意的是,使用 table 方案存在一个比较常见的样式限制,通常 margin、padding、border 等属性会不符合预期。 笔者不建议使用这个方案。当然,问题也是可以解决的:别把其他样式写在 table 上。
  89. 使用Grid网格布局
    grid比flexbox还要新很多,并且更佳很简洁,我们同样有《Grid完整指南(英)》奉上~
  90. <body>
  91. <div class="content">
  92. content
  93. </div>
  94. <footer class="footer"></footer>
  95. </body>
  96. html {
  97. height: 100%;
  98. }
  99. body {
  100. min-height: 100%;
  101. display: grid;
  102. grid-template-rows: 1fr auto;
  103. }
  104. .footer {
  105. grid-row-start: 2;
  106. grid-row-end: 3;
  107. }

把一张图片平铺的布局:

display :inline-block
width:22px
height:12px
background-image :url("bulletin@3x.png")
background-repeat :no-repeat
background-size:22px 12px


让背景图片模糊

<div class="background">
    <img :src="seller.avatar" width="100%" height="100%" />
    </div>
.background
    position:absolute
    left:0
    top:0
    width: 100%
    height: 100%
    z-index: -1
    filter:blur(10px)

Sticky footers
它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;
如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

响应式布局
<meta name=”viewport” content=”init-scale=2.0 ” width=device-width > 页面放大两倍,页面的宽度等于设备宽度
user-scalable=no 禁止缩放
媒体查询
@media screen and (max-width:768px)
限制页面无线扩张
max-width:1414px


HTML5标签
<section> <nav> <article><aside><hgroup><header><footer>
<address>

添加音频
<video src=””> preload重复播放

让网页离线使用

<html lang=”en” manifest=””/offline.manifest>
阻止浏览器缓存文件
<Files offline.manifest>
    ExpiresActive On
    ExpiresDefault “access”
</Files>
text-shadow文字阴影
box-shadow内阴影

过渡相关属性:

  transition-property:要过渡的css属性名称
  使用all则福哦度会被应用到每一个css属性上
  Transition-duration:过渡时间
  Transition-timing-function :过渡速度
  ease linear ease-in ease-out ease-in-out

2D变形
sale 用来缩放
translate:屏幕移动
rotate:旋转
transform:scale(0.5)
transform:translate(40px;0px)右移动40px
transform:rotate(90deg)


表单
placeholder required autofpcus autocomplete 表单自动提交完成
list属性以及对应的datalist元素可以让用户在输入框开始输入值显示一组备选值

List属性中的值awars同时也是datalist元素的id,这样就可以让datalist与输入项关联起来,当输入D只有匹配的数据才被显示出来

vue创建一个todolist


<!DOCTYPE html>
<html>
<head>

<title></title>
<script src="/cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

</head>
<body>

<div id="app">
    <input type="text" v-model="inputValue"/>
    <button @click="handleBtnClick">提交</button>
    <ul>
        <todo-item v-bind:content="item"
                    v-for="(item,index) in list"
                    v-bind:index="index"
                    @delete="handleItemDelete"></todo-item>
    </ul>
</div>
<script type="text/javascript">
    var TodoItem ={
        props:['content','index'],
        template:"<li @click='handleItemClick'>{{content}}</li>",
        methods:{
            handleItemClick:function(){
                this.$emit("delete",this.index);
            }
        }
    }
    var app=new Vue({
      el:'#app',
      components:{
        TodoItem:TodoItem
      },
      data:{
        list: [],
        inputValue: ''
      },
      methods: {
        handleBtnClick:function(){
          this.list.push(this.inputValue);
          this.inputValue='';
        },
        handleItemDelete: function (index){
            this.list.splice(index,1);
        }
      }
    })
</script>

</body>
</html>

jquery创建一个todolist

<!DOCTYPE html>

<html>
<head>

<title></title>
<script src="/cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

<div id="app">
    <input id="input" type="text" >
    <button id="btn">提交</button>
    <ul id="list">
    </ul>
</div>

<script type="text/javascript">

function Page(){

}
$.extend(Page.prototype,{
    init:function(){
        this.bindEvents()
    },
    bindEvents:function(){
        var btn =$('#btn');
        btn.on('click',$.proxy(this.handleBtnClick,this))
    },
    handleBtnClick: function(){
        var inputValue=$("#input").val();
        var ulElem=$("#list");
        ulElem.append('<li>'+inputValue+'</li>')
        $("#input").val('');
    }
})
var page=new Page();
page.init();

</script>
</body>
</html>


父组件向子组件传值
• 子组件在props中创建一个属性,用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性


子组件向父组件传值
• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听