记性不好，笔头来凑-HTML+CSS篇

HTML

Doctype为何物

Doctype声明位于位于HTML文档中的第一行，用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD(文档类型定义)，因为 HTML 4.01 基于 SGML(标准通用标记语言)。
HTML5 不基于 SGML，所以不需要引用 DTD。

XHTML vs HTML

HTML是一种基本的WEB网页设计语言，而XHTML是一个基于XML的置标语言。
最主要的不同：

  1. XHTML 元素必须被正确地嵌套；
  2. XHTML 元素必须被关闭；
  3. 标签名必须用小写字母；
  4. XHTML 文档必须拥有根元素。

script标签

defer属性

defer属性会将script脚本延迟到整个页面都解析完毕后再运行，相当于高速浏览器立即下载，但延迟执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发 前执行，因此最好只包含一个延迟脚本。

meta标签

移动端最标准的meta设置。

1
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

HTML5

video vs audio

新增的元素，用于实现视频和音频功能。
这里想额外补充的是其实现原理实际基于Shadow DOM()。「Shadow DOM」会让DOM element subtree包含于document的呈现内容，但是却不会在main document DOM tree里。

另外还有一个相关的 source 标签，可为媒介元素（比如

拖放draggable

原生使用draggable属性，搭配ondragstart、ondragover、ondrop事件完成拖放。其中ondragover需使用preventDefault()阻止元素的默认处理方式，传递数据使用dataTransfer。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var draggable = {
    // 初始化
    init: function () {
        var me = this;
        me.dragTarget = document.querySelector('.drag-target');
        // 为拖拽源监听dragstart,设置关联数据
        me.dragTarget.addEventListener('dragstart', me.onDragStart, false);
        // 取消元素dragover默认行为,使其可拖放
        me.dragTarget.addEventListener('dragover', me.onDragOver, false);
        // 鼠标释放,在拖放目标上接收数据并处理
        me.dragTarget.addEventListener('drop', me.onDrop, false);
    },
    onDragStart: function (e) {
        var target = e.target;
        e.dataTransfer.setData('from', $(target).index()); // 设置关联数据
    },
    onDragOver: function (e) {
        e.preventDefault(); // 阻止元素的默认处理方式
    },
    onDrop: function (e) {
        var target = e.target;
        var fromIndex = e.dataTransfer.getData('from'); // 接收数据
    }
};

插件实现个人推荐Sortable.js（vue版本使用vue-draggable）。

画布 vs SVG

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

Web存储

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage:没有时间限制的数据存储
  • sessionStorage:针对一个session的数据存储
    之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。
    Web存储可用于自动保存、页面间的数据传递等功能。

    Tip
    1.IE6/7不支持Web存储，可通过UserData实现本地存储
    2.页面间的数据传递还可通过cookie、web Worker实现

CSS

选择器啊选择器

nth-child vs nth-of-type

1
2
3
4
5
<ul>
    <p>zero</p> 
    <li>one</li> <!-- ul li:nth-child(2) -->
    <li>two</li> <!-- ul li:nth-of-type(2) -->
</ul>

浮动这个磨人的小妖精

特性

浮动的特性可以概括为包裹与破坏。
包裹可称为BFC（块级格式化上下文）。

css-1

清除浮动

1
2
3
4
5
6
7
8
9
10
11
.clearfix:after {
    content: '';
    /* 下面三行也可使用display:table进行替换 */
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Tip: .clearfix只应用在包含浮动子元素的父级元素上。

文字的那些事

文字溢出隐藏并显示省略号

单行文本

1
2
3
4
5
.oneline {
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
}

多行文本

1
2
3
4
5
6
7
8
multiline {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

文字大小

em与rem

em是一个相对单位，参照物是父元素的font-size，若父元素没有设置font-size，会一直向上寻找。浏览器有一个默认设置：1em = 16px。
rem与em的区别在于，其参照物是html的font-size。

选中文字

通过::selection来设置光标选中的文字

1
2
3
4
::selection {
    background-color: #b3d4fc;
    text-shadow: none;
}

CSS盒子模型

标准模型下，总元素的宽度=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距。
在怪异模式下，width属性是内容、内边距和边框的宽度的总和。
可通过设定box-sizing: border-box;来实现后者，更符合我们对盒子的直觉认知。
比如要一个元素的宽度严格是其父元素的某个百分比，但是又要给其周边留出点空白，这样就很方便：

1
2
3
box-sizing: border-box; 
width: xx%; 
padding: yyem;

边界重叠

CSS的margin上下布局会出现边界塌陷或者说边界重叠（这里特别说明，水平布局是不会出现这个问题的T-T）。

垂直布局

垂直之间塌陷的原则是以两方最大的外边距为准，可直接针对一个来外边距来解决这个问题。

父子嵌套

这是出现比较多的情况，有以下几种解决方案。

  1. 给父元素指定一个边框，因为外层有border的话，父子就不是紧贴在一起的了，不会造成塌陷；
  2. 给父元素加溢出处理overflow: hidden；
  3. 给父元素加padding。

FLEX布局

概念

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。

应用场景

网格布局

根据缩放值实现网格布局，通常采用元素class与样式的对应实现。

1
2
3
4
5
<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

1
2
3
4
5
6
7
.Grid {
  display: flex;
}
.Grid-cell {
  flex-shrink: <number>; /* 不同class采用不同缩放值 实现灵活布局 */
}

固定底栏

1
2
3
4
5
<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>
1
2
3
4
5
6
7
8
9
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.Site-content {
  flex: 1;
}

垂直居中

具体可见”垂直居中”部分。

get些常用小招

让我用border框住你

工作里经常会下面遇到这样的样式，特别是在导航之类的地方。即第一个元素没有左边框，之后的元素有左边框。

css-2

这种情况可以通过CSS中的相邻兄弟选择器进行实现。
1
2
3
ul li + li {
    border-left: 1px solid #999;
}

上面的方式也可以用于解决相邻元素边框重叠导致像素变粗的问题，但却可能产生另一种问题，即当相邻的两个元素高度不一致的时候，会出现断线的现象(下图)。

css-3

这个时候可以使用一种方式解决这个问题。
1
2
3
4
ul li {
    margin-right: -1px;
    border: 1px solid #999
}

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
.detail-wrapper {
    width: 100%;
    min-height: 100%;
}
.detail-main {
    margin-top: 64px;
    padding-bottom: 64px;
}
.detail-close {
    position: relative;
    margin: -64px auto 0 auto;
    clear: both;
}
</style>
<div class="detail">
  <div class="detail-wrapper clearfix">
    <div class="detail-main"></div>
  </div>
  <div class="detail-close">
    <i class="icon-close"></i>
  </div>
</div>

垂直居中

不定宽高的水平垂直居中

transform
1
2
3
4
5
6
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

父元素需要设置成relative，若元素本身的宽高确定，可采用负margin的方式(margin-left和margin-top设置为宽高的一半)

flex
1
2
3
4
5
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

css3新属性

table-cell
1
2
3
4
5
.box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

喜欢音乐 看书 旅行<br>偶尔玩设计<br>以及 只爱写JS的程序媛一枚