海屿文章列表

HTML5语义化

啥叫语义化,就是别全用div,一按F12一片div,头都晕了好吗~

html5.png

一、header

header,其中一般包括标题,介绍文本,和导航栏。注意不要和head标签混淆。

二、nav

块级元素nav用来表示页面中导航类链接组,比如全局导航,面包屑导航,上一页/下一页。

<nav>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</nav>

三、article

块级元素article非常类似于div或者section。看看w3c上怎么说的吧:article标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

四、section

section元素表示文档中的一个区域(或节),section元素恰当的用途是将页面分割成有层级的块,元素内部通常会有一个对应层级的标题(h1到h6)。
看看MDN的使用提醒:
1.如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
2.不要把 <section> 元素作为一个普通的容器来使用;这种情况是 <div> 的适用范围,特别是当它的目标只是美化样式的情况。 通常来说一个 <section> 应该出现在文档的框架中。

五、aside

还是参考MDN中的介绍:<aside> 元素中连接到页面中其他部分的内容,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者被插入在该内容里。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、web 应用程序、个人资料信息,或在博客上的相关链接。

六、footer

与header元素类似,footer用于表示页面的底部。

css中的居中

看到一个总结很全的居中,本文是其部分译文,Absolute Centering

一、负边距法

这是最常用也是唯一兼容IE6/7的方法

 .is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

但这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

优点:
支持所有的浏览器,包括IE6/7;
代码量较少
缺点:
非响应式。不基于百分比尺寸工作,不能设置MIN-/ MAX-
内容可溢出容器
需要用 padding来补偿 margin 或者使用 box-sizing: border-box

二、translate偏移法

Css3中可以使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:

.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}  

优点:

  1. 内容可变高度
  2. 代码量少
    缺点:
  3. IE8不支持
  4. 属性需要写浏览器厂商前缀
  5. 可能干扰其他transform效果
  6. 某些情形下会出现文本或元素边界渲染模糊的现象

三、表格单元格(Table-Cell)

总的说来这可能是最好的居中实现方法,因为内容块高度会随着实际内容的高度变化,浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记,需要三层元素让最内层的元素居中。
HTML:

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    </div>  
  </div>  
</div>

CSS:

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}  

优点:

  1. 高度可变
  2. 内容溢出会将父元素撑开。
  3. 跨浏览器兼容性好。
    缺点:

需要额外html标记

四、margin:auto实现绝对定位元素的居中

 
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
 

解释:
通过以上描述,绝对居中(AbsoluteCentering)的工作机理可以阐述如下:
1、在普通内容流(normal content flow)中,margin:auto的效果等同于
margin-top:0;margin-bottom:0。
2、position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块block将填充其父元素的所有可用空间,父元素一般为body或者声明为position:relative;的容器。
4、 给内容块设置一个高度height或宽度width,能够防止内容块占据所有的可用空间,促使浏览器根据新的边界框重新计算margin:auto
5、由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中。

优点:
1.支持跨浏览器,包括IE8-IE10.
2.无需其他特殊标记,CSS代码量少
3.支持百分比%属性值和min-/max-属性
4.只用这一个类可实现任何内容块居中
5.不论是否设置padding都可居中(在不使用box-sizing属性的前提下)
6.内容块可以被重绘。
7.完美支持图片居中。
缺点:
1.必须声明高度(查看可变高度Variable Height)。
2.建议设置overflow:auto来防止内容越界溢出。
3.在Windows Phone设备上不起作用。

五、Flexbox

这是CSS布局未来的趋势。Flexbox是CSS3新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with Flexbox》
记住Flexbox不只是用于居中,也可以分栏或者解决一些令人抓狂的布局问题。

.Center-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
 

优点:
内容块的宽高任意,优雅的溢出。
可用于更复杂高级的布局技术中。
缺点:

  1. IE8/IE9不支持。
  2. Body需要特定的容器和CSS样式。
  3. 运行于现代浏览器上的代码需要浏览器厂商前缀。
  4. 表现上可能会有一些问题

sass与compass

之前总是想找到一个能自动完成浏览器兼容的工具,今天终于发现了这个compass工具。
如果你有sass基础,再学会了compass,你的开发效率会有一个极大的提升!
关于compass的使用,官网上讲的非常详细也很简单,可以去看看哦~
而且,有国人开发了一个叫Koala的可视化编译工具,作为小白的我们最喜欢这种了,是不是~

记不住这些命令啊,只好在这里把几个常用命令手打一遍:
创建项目文件:compass create myproject
编译:compass compile
监视文件变化自动编译:compass watch
编译压缩版本:compass compile --output-style compressed

compass分为五个模块
reset:重置默认样式
css3:这里就是完成厂商前缀的模块
layout:布局模块(比如页脚)
typography:版式模块(比如链接、文字等)
utilities:(不属于以上模块的功能)
其中还有特殊的browser support模块是,顾名思义这是浏览器支持模块,其中最常用估计也就这一个了$browser-minimum-versions:('ie','8'),表示对浏览器支持到哪个版本。
其中css3模块不用说肯定是最常用了,去官网看看都有什么吧~

伪元素

所有伪元素

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop

伪元素的作用就是能允许在不添加额外声明的情况下为文档的某些部分添加样式。

一开始上来就想原理啊,文档啊,什么都先摆上,但是都不如来几个例子看着舒服。

<p data-height="250" data-theme-id="0" data-slug-hash="GpVbzR" data-default-tab="result" data-user="zhangchen915" class='codepen'>See the Pen 伪类 by zhangchen (@zhangchen915) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

上面的效果是不是很有意思,其是这个方括号就是用伪元素加上的,最后为伪元素加上了一些渐变效果。看完这个例子你就应该大致了解了伪元素的作用,就是利用它来装饰真正的元素 (无论是装饰图片还是其他一些效果) 而不需要更改 HTML 的内容。

此外以往我们在清除 float 的时候,会使用"div style="clear: both">或是br clear="all",但是会产生过多无意义的容器,为了避免这种情况,我们可以使用::before以及::after来优雅地清除float。

关于前端的学习

现在前端挺火,但是前端并不是一件简单的工作,市面上有各种各样的培训课程几千的几万的都有,但是其实作为“过来人”其是这些培训的作用其实不大,最好的方法还是自学,也许参加培训班你会写出一些简单的页面,确实少走了一些弯路,但是正因为你没有走过弯路,所以你以后再遇到弯路你还是不会走出来。现在免费的教程那么多,自学的成本也不是那么高,像网易云课堂,慕课网有好多优秀的视频课程。
给大家推荐一个学习网站FreeCodeCamp,这是虽然是一个英文网站,但是有高中英语水平你就能看懂,大不了还有翻译插件。这个网站没有视频,就是一个一个的小项目,对于新手而言动手很重要,一步一步跟着做最后你会发现自己提高了不少。最后晒一晒我在这个网站得到的证书!freecodecamp.jpg