PHP学习第8天 emmet插件的用法与元素定位的4种模式 2018年3月26日

PHP学习第8课 emmet插件的用法与元素定位的4种模式 2018年3月26日

2018年3月26日的课程内容是emmet插件的用法与元素定位的4种模式

本天没有布置作业，以下为学习笔记：

1、emmet插件的用法

因为几乎所有主流编辑器都支持它，甚至直接内置，它能快速生成HTML代码，所以我们要学习。

（1）！+Tab，快速生成Html5文档结构

（2）快速生成多个同类型的标签用： *

p*5+Tab，可以生成5个p标签

（3）生成带有id或class属性的标签

div.red+Tab，生成<div class="red"></div>

div#meu+Tab，生成<div id="meu"></div>

并且这种方法中，div是默认的，所以可省略。

（4）生成带有非通用属性标签

（5）生成有文件内容的标签，用｛｝

a[]{文本}+Tab

（6）生成父子标签：>

（7）生成兄弟标签：+

（8）自增、自减标签：$, $$, @

默认从1开始，后面加上@后，从@后的数字开始，用2个$, 能补占位0。

（9）分组生成

caption 表标题  th  表头

2、定位的四种模式

4个模式分别是：static，relative, absolut, fixed

4个位置：left, right, top, bottom

相对定位：元素相对于它原来在文档流中位置进行定位

绝对定位：脱离了文档流，并且使行内元素支持宽度与高度

如果没有定义父级元素，则被操作元素就相对于Html窗口进行定位

固定定位：position: fixed; 用于客服、广告等处，拉动滚动条时，这些元素保持不动

浮动与绝对定位，元素都脱离了文档流，变成了块元素，都支持了宽度与高度，如span.

浮动总是沿着水平方向。

清除浮动： clear: both;