html+css任务笔记

---

在做html+css任务时候，发现很多之前没看到或者没注意的细节，以此归类。

---

1.记得正确关闭input等标签！！！

2.单词不要拼错了！！！比如label等……

3.

<fieldset>    <legend>表单的标题</legend></fieldset>

生成有边框的表单，即在数据周围生成带标题的框。

4.

<nav>    <a href="#">链接一</a>     <a href="#">链接二</a></nav>

定义导航链接部分。

5.<header></header> 标签定义文档的页眉（介绍信息）。

6.表格包含<table>,<thead>,<tbody>,<tfoot>。

7.设置文字在一行的偏上位置： vertical-align: text-top;。

---

2017-4-25更

8.设置三列布局时，如果用左右浮动，中间自填充的方法，需要在html文件中先设置左右浮动，再设置中间的自填充。因为middle的margin-right会占用右边的空间，使右边的浮动块下沉。

---

2017-5-15更（《精通css》笔记）

9.常常很难决定一个元素应该使用ID还是类名，一般原则是，类应该应用于概念上相似的元素，这些元素可以出现在同一页面上的多个位置，而ID应该应用于不同的唯一的元素，下面举个栗子。
例如，假设你的网站顶部包含主导航，在搜索结果页面的底部包含基于页面的导航，在页脚上还有另外一个导航，是给它们分配不同的ID，还是都给它们指定nav类，然后根据它们在文档中的位置应用样式？
如果使用第一种方式，就是使用了大量的ID，那么很快就会难以找到唯一的名称，最终不得不建立非常长、非常复杂的命名约定。因此，使用类名较为合适。只有在目标元素非常独特，绝不会对网站上其他地方别的东西使用这个名称时，才会使用ID。换句话说，只有在绝对确定这个元素只会出现一次的情况下，才应该使用ID。如果你认为以后可能需要相似的元素，就使用类。

10.几个选择器傻傻分清楚：
（1）后代选择器：选择一个元素的所有后代，包括子、孙元素等，空格。
（2）子选择器（高级选择器）：只选择一个元素的直接后代，即子元素，但不是只有第一个子元素，而是所有子元素，大于号。
（3）相邻同胞选择器（高级选择器）：定位同一个父元素下某个元素之后的元素，加号。

---

2017-5-16更新

11.设置绝对定位属性absolute时，使用left、right、top、bottom对其进行定位，相对的是其具有定位属性的父元素，若没有这样的父元素，则相对于浏览器窗口进行定位。

---

2017-5-17更新

12.利用表格table设置图片的垂直居中时，
（1）将html，body的宽度和高度均为100%；
（2）最外包裹层的宽度和高度均为100%，且display属性值设置为table，整体以表格显示；
（3）次外包裹层设置display: table-cell; vertical-align: middle;，让图片表格单元显示并且垂直居中；
（4）最里层设置宽度和高度等属性，若想让其水平居中，则设置margin: 0 auto;。

持续更新……