blff122620 / blog Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 1.61 MB

[Front-end series] advanced road of front-end development

blog's People

Contributors

Watchers

blog's Issues

2.【前端小白入门系列】HTML5新增的部分内容或部分API 使用记录

1. 标签系列

以下都是自己用过的一些标签

标签名	标签含义
header	定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
main	定义文档中主要或重要的内容
footer	定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
video
audio
source	音频视频的源
article	定义可以独立于内容其余部分的完整独立内容块。
section	定义文档中的一个章节。
aside	定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
canvas	代表位图区域，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
nav	定义只包含导航链接的章节。
svg	定义一个嵌入式矢量图。

2.API

HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML Canvas/WebGL
HTML Audio/Video

自己用过的一些

dom相关

关键字	描述
querySelector
querySelectorAll
childElementCount
firstElementChild
lastElementChild
previousElementSibling
netElementSibling
getElementsByClassName
.classList	(remove toggle add contains)
document.activeElement	(ele.focus()之后这个值会变)
document.readyState	(loading complete两种值）
data-xxx	(自定义属性)
innerHTML	(这里列出这个是因为他被正是纳入了html5规范）
insertAdjacentHtml	(beforebegin
scrollIntoView	(将元素滚动到屏幕内)
contains	(compareDocumentPosition 通过按位比较，得出元素的相对位置)
innerText	(这个不被待见，没有加入html5,但是还是能用)
contenteditable	div模拟textarea输入

未完待续，慢慢补充

3.【前端小白入门系列】textarea 与 input标签，用div模拟实现textarea

区别

是单行文本。
Input标签填写格式是单独出现的，如
textarea 可设置多行文本，带滚动条的。
标签填写格式成对出现的，如
input标签编写代码时大多用来放置字数较少的单行文字内容
而textarea 一般让用户可以输入多行文字,输入的文字信息量相比较大。如
input标签的 value值放在里面.
textarea标签的 value值是放在标签中间.

相同点

input标签 textarea标签的使用目的都是让用户或站长来提交数据，为了让另一方来看到想要的数据资料，特别说明的是提交后处理数据都是一样的.

模拟实现textarea

开始自己走了误区，想设置各种keypress blabla的事件处理，可是写到一半，发现又要处理shift enter等特殊键，又要相应正确的字母，还要对输入法blabla的处理，然后直接崩溃了，后来才知道有一个神奇的html5属性 contenteditable,此乃神器啊，一句话搞定了，一句js没有，剩下自己设置css样式吧，哈

<div class="textarea" id="js-textarea" contenteditable></div>

6.【前端小白系列】谈谈我对栅格系统的理解

栅格系统

说道栅格系统，想起之前练习的圣杯布局，看下代码

可以去这个工程down 代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <link rel="stylesheet" href="./static/css/reset.css">
    <link rel="stylesheet" href="./static/css/global.css">
    <style>
        .cup{
            padding:0 100px 0 100px;
            overflow: hidden;
        }
        .cup>div{
            float: left;
            height: 100px;
        }
        .middle{
            width: 100%;
        }
        .left,.right{
            
            width: 100px;
        }
        .left{
            margin-left:-100%;
            position: relative;
            left:-100px;
        }
        .right{
            margin-left: -100px;
            position:relative;
            right: -100px;
        }
    </style>
</head>
<body>
    <div class="cup">
        <div class="middle bg1">middle</div>
        <div class="left bg2">left</div>
        
        <div class="right bg3">right</div>
    </div>
    <script type="text/javascript" src="./static/js/util.js"></script>
    <script>

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

其实可以通过通过嵌套整个圣杯(cup)到middle里，圣杯里套着另一个圣杯，看起来有点栅格的样子了，难道这就是栅格吗，并不是，我们往下看

先来看一张图

　　假设：Flowline的宽度为W，column的宽度为c，Gutter的宽度为g，Margin的宽度为m，栅格列数为N

　　W = cN + g(N-1) + 2m；g的宽度通常为m的两倍，所以：

　　W = (c+g) * N；把c+g记为C，得：

　　W = C * N;

　　大部分的栅格系统都是此公式的变体

Bootstrap的栅格系统

　　下面我们将一起来看一下常见的栅格布局的设计和bootstrap中的设计实现。BootStrap中合理的使用栅格布局，必须将列放入row中，而row必须放入container中。container类在布局中主要有两个作用：

在不同的宽度区间内（响应式断点）提供宽度限制。当宽度变化时，采用不同的宽度。
提供一个padding，阻止内部内容触碰到浏览器边界。
　　Bootstrap中使用padding代替上文中的margin。大小为15px，如下图所示，粉红色为padding大小。

　　Row是column的容器，每个row中的column之和必须为12，不过我们可以通过嵌套的方式扩展。Row的左右margin都为-15px，用来抵消container中的padding，如下图蓝色部分所示：

　　row的这种设计主要为了方便嵌套，后文中会提到。

　　Colomn是栅格系统的主角，每个column左右padding都为15px，上文中row的负margin抵消了container的padding，所以为每个column设置padding就是为了防止内容直接触碰边界，同时不同的column之间拥有30px的卡槽（Gutter）。如下图黄色部分所示：

　　现在想想上文中提到的公式：W = C * N;

　　上文提到row的负margin设计主要为了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作为容器的column中，而不需要在放置一个container。如下图中蓝色所示，是放入column中的row的负margin区域。

　　现在将被嵌套的column放入row中，如下图所示，上层column便是起到了container的作用。

如此我们便看到了Bootstrap栅格系统的精妙所在。

4.【前端小白系列】 css3 及其中常用的一些属性

CSS3

虽然CSS3这种说法很流行，但是它没有在任何规范中定义过，为什么这么说呢，我看看一下css规范的url就能明白一二

我们看上面两个规范地址，使用过css的同学可能已经知道原因了：
来看一下background 在css3中新增的有哪些

background增加：
背景支持各种类型的，并不局限于之前定义的 url()。
支持 multiple background images(多背景图片)。
background-repeat 属性的 space 和 round 值，还有支持两个值的语法。
background-attachment local 值。
CSS background-origin，background-size 和 background-clip 属性。
支持带弧度的 border corner(边框角) CSS 属性：border-radius，border-top-left-radius，border-top-right-radius，border-bottom-left-radius 和 border-bottom-right-radius 。
支持边框使用： border-image，border-image-source，border-image-slice，border-image-width，border-image-outset 和 border-image-repeat 。
支持元素的阴影：box-shadow 。

transform增加：
支持适用于任何元素的 bi-dimensional transforms(二维变形)，使用 CSS transform 和 transform-origin 属性。支持的变形有： matrix()，translate()，translateX()，translateY(， scale()，scaleX()，scaleY()，rotate()，skewX()，和 skewY()。
支持适用于任何元素的 tri-dimensional transforms(三维变形)，使用 CSS transform-style， perspective， perspective-origin，和 backface-visibility 属性和扩展的 transform 属性，使用以下变形： matrix 3d()， translate3d()，translateZ()，scale3d()，scaleZ()，rotate3d()，rotateX() ，rotateY()，rotateZ()，和 perspective()。

上面罗列的这些属性，我们都称他们为CSS3新增属性

但是明明transform规范是新增的第一版规范，他为啥也叫css3了呢？原因是这样

不同于css2.1 css1.0，css3指定了一个非正式的集合，包括第三版规范，也包括一些新出的第一版规范，这些东西大部分得到了业界的共识，但是现在，这些规范正在以不同的速度推进，我们以后很难再用CSS4,CSS5这样的字眼去囊括所有css版本来统称了，未来的话应该会细分css，可能会改成css core 4，css transform 2 之类的吧，谁知道呢，哈。

常用属性

规范	新增
css-color	opacity 属性，还有 hsl()， hsla()， rgba() 和 rgb() 函数来创建值。它还将 currentColor 关键字定义为合法的颜色值。
css-selector3	子串匹配的属性选择器， E[attribute^="value"]， E[attribute$="value"]， E[attribute*="value"]。新的伪类：:target， :enabled 和 :disabled， :checked， :indeterminate， :root， :nth-child 和 :nth-last-child， :nth-of-type 和 :nth-last-of-type， :last-child， :first-of-type 和 :last-of-type， :only-child 和 :only-of-type， :empty，和 :not。伪元素使用两个冒号而不是一个来表示：:after 变为 ::after， :before 变为 ::before， :first-letter 变为 ::first-letter，还有 :first-line 变为 ::first-line。新的 general sibling combinator(普通兄弟选择器) ( h1~pre )。
CSS Backgrounds and Borders Module Level 3	背景支持各种类型的，并不局限于之前定义的 url()。支持 multiple background images(多背景图片)。 background-repeat 属性的 space 和 round 值，还有支持两个值的语法。 background-attachment local 值。 CSS background-origin，background-size 和 background-clip 属性。支持带弧度的 border corner(边框角) CSS 属性：border-radius，border-top-left-radius，border-top-right-radius，border-bottom-left-radius 和 border-bottom-right-radius 。支持边框使用： border-image，border-image-source，borderimage-slice，border-image-width，border-image-outset 和 border-image-repeat 。支持元素的阴影：box-shadow 。
CSS Flexible Box Layout Module	为 CSS display 属性增加了 flexbox layout(伸缩盒布局) 及多个新 CSS 属性来控制它：flex，flex-align，flex-direction，flex-flow，flex-item-align，flex-line-pack，flex-order，flex-pack 和 flex-wrap。
CSS Text Decoration Module Level 3	CSS text-decoration 属性作为 CSS text-decoration-line， text-decoration-color，和 text-decoration-style 属性的简写形式。并增加了 text-decoration-skip，和 text-underline-position 属性。使用 CSS text-shadow 属性来支持文本的阴影。
CSS Fonts Module Level 3	会用到的是@font-face来下载字体
CSS Transitions	通过增加 CSS transition，transition-delay，transition-duration， transition-property，和 transition-timing-function 属性来支持定义两个属性值间的 transitions effects(过渡效果)。
CSS Animations	允许定义动画效果，借助于新增的 CSS animation， animation-delay， animation-direction， animation-duration， animation-fill-mode， animation-iteration-count， animation-name， animation-play-state，和 animation-timing-function 属性，以及 @Keyframes @ 规则。
CSS Transforms Level 1	支持适用于任何元素的 bi-dimensional transforms(二维变形)，使用 CSS transform 和 transform-origin 属性。支持的变形有： matrix()，translate()，translateX()，translateY(， scale()，scaleX()，scaleY()，rotate()，skewX()，和 skewY()。支持适用于任何元素的 tri-dimensional transforms(三维变形)，使用 CSS transform-style， perspective， perspective-origin，和 backface-visibility 属性和扩展的 transform 属性，使用以下变形： matrix 3d()， translate3d()，translateZ()，scale3d()，scaleZ()，rotate3d()，rotateX() ，rotateY()，rotateZ()，和 perspective()。
CSS Text Module Level 3	我国语言环境可能用到的是使用 CSS text-space-collapse 和 tab-size 属性来控制空白该如何显示。和使用 CSS text-indent

目前常用的一部分和笔者了解的css3属性基本都在这里，以后遇到遗漏的继续补充

7.【前端小白系列】BFC IFC

5.【前端小白】傻傻的水平居中+垂直居中:)

不说话，直接上码

顺便附赠几个垂直居中方案，垂直居中，简直是前端中的噩梦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>center</title>
    <style>
        .demo{
            width: 100%;
            height: 100px;
            margin: 10px;
            background: #ccc;
        }
        .demo>div{
            background: black;
            color:white;
            height: 100%;
            font:25px/4 arial;
        }
        .demo1{
            display: inline-block;
            
        }
        .text-align{
            text-align: center;
        }
        .demo2{
            display: table;
            margin: 0 auto;
        }
        .demor{
            position: relative;
        }
        .demo3{
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
        }
        .demof{
            display: flex;
            justify-content: center;
        }
        .demo4{
            margin: 0 auto;/* 也可以对flex-item进行设置这个居中*/
        }
        .demo-v{
            background: #ccc;
            height: 300px;
            margin: 10px;
        }

        .demov{
            display: table-cell;
            vertical-align: middle;
            
        }

        .demo5{
            height: 50px;
            background: lightgreen;
        }
        .demovi{
            position: relative;
        }
        .demo6{
            position: absolute;
            background: lightgreen;
            transform: translateY(-50%);
            top:50%;
        }
        .demovii{
            display: flex;
            /*默认align-items为strech*/
            align-items: center;
        }
        .demo7{
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div class="demo text-align">
        <div class="demo1">demo</div>
    </div>
    <div class="demo ">
        <div class="demo2">demo</div>
    </div>
    <div class="demo demor">
        <div class="demo3">demo</div>
    </div>
    <div class="demo demof">
        <div class="demo4">demo</div>
    </div>
    <div class="demo-v demov">
        <div class="demo5">demo</div>
    </div>
    <div class="demo-v demovi">
        <div class="demo6">demo</div>
    </div>
    <div class="demo-v demovii">
        <div class="demo7">demo</div>
    </div>
</body>
</html>

1.【前端小白入门系列】css布局之两列布局

今天说到css布局，我们来说一下css两列布局的一些实现方法,大概写了以下5种实现：

下面这5种方式各有优缺点，这里来大概说一下，第一种，代码简单直观，容易理解，但是IE6下有点bug，第二种是兼容性最好的，IE6也支持，但是结构略臃肿，第三种代码简单，触发了BFC，但是兼容性存在一定问题，第四种同样是兼容性问题+代码略多，不太建议采用，第五种，代码最简单，用了强大的flex，但是同样是兼容性问题，还有就是flex根据内容来进行渲染，容易出现性能问题，所以通常会用在小范围的布局处理，而不是整页的布局处理。

1. float + margin：

这种最经典的方式，页面结构如下：

<div class="l left"></div>
<div class="content clearfix"></div>

样式如下：

    .l {
        float: left;
    }
    
    .left {
        width: 200px;
        height: 300px;
        background: #ccc;
        border: 1px dotted green;
        /*margin-right：-200px; 解决IE6下面3像素的问题*/
    }
    
    .content { 
        margin-left: 220px;
        background: lightgreen;
        border: 1px dashed blue;
     }

这种在IE6下会有3像素的bug，需要hack一下

2.float + margin + fix

页面结构如下：

<div class="l left">test</div>
<div class="right-fix">
    <div class="content ">

    </div>
</div>

.l {
    float: left;
}

.left {
    width: 200px;
    height: 300px;
    background: #ccc;
    border: 1px dotted green;
    position: relative;/*z轴提前，被遮挡，所以要z轴提前*/
}
.right-fix{
    float: right; 
    width: 100%;
    margin-left: -220px;/*利用边距为负数将文档流往前移动，但是会遮挡住上面元素*/
}
.content {
    background: lightgreen;
    border: 1px dashed blue;
    margin-left: 220px;
}

3.float + overflow (触发了BFC)

结构和第一种实现一样

<div class="l left"></div>
<div class="content clearfix"></div>

.l {
    float: left;
}

.left {
    width: 200px;
    height: 300px;
    background: #ccc;
    border: 1px dotted green;
    margin-right: 20px;
    overflow: hidden;/*这里是为了让resize生效*/
    resize: horizontal;
}

.content {
    background: lightgreen;
    border: 1px dashed blue;
    overflow: hidden;/*触发BFC*/
}

4.table table-cell

<div class="parent">
    <div class="l left">
    </div>
    <div class="content ">

    </div>
</div>

.parent{
    display: table;
    width: 100%;
    table-layout: fixed;/*布局优先，加速渲染,与内容无关*/
}
.l{
    width: 200px;
    background: #ccc;
    border: 1px dotted green;
    padding-right: 20px;/*设置间距*/
    background-clip: content-box;
}
.content,.l{
    display: table-cell;
}
.content{
    background: lightgreen;
    border: 1px dashed blue;
}

5. flex

这个和第四种html结构一样，css如下：

.parent{
    display:flex;
}
.l{
    width:200px;
    margin-right:20px;
}
.right{
    flex:1;
}