HTML知识点

1、样式表

行间样式表：<div style="width:100px;"></div>

内部样式表:<style></style>

外部样式表:<link rel="stylesheet" href="style.css" />

2、边框

边框的方向：上右下左

边框的形状：非矩形（可以做一个三角 形）

3、背景

重要：

background-attachment    背景图是否滚动

     fixed     固定在浏览器可视区域内

     scroll    跟随滚动条滚动

4、文字

多行文字测量行高：

（1）确认文字大小

（2）确认两行文字间的空隙大小

（3）空隙大小/2，痣就是每行文字上下间隔的大小

（3.1）行高奇数的话，文字上方比下方小一个像素

（3.2）行高为偶数的话，文字上下方是一样的

（4）通过辅助线测量多行文字的行高

文字的复合样式：font：font-style | font-weight | font-size/line-height | font-family 

5、文本

color

text-align

text-indent

text-decoration

letter-spacing  字母间距（不管是中文字符还是英文字符都起作用）

word-spacing  单词间距（以空格为解析单位）

white-space     强制不换行（white-space:no-wrap/normal;）

一个空格有多大？

字体格式不一样，空格大小也不同；

字体为宋体时。空格大小等于当前文字大小的一半。

6、padding   内填充

padding会撑大容器大小

7、margin   外边距

（1）margin-top传递到父元素的问题

解决办法：给父级加1px边框

（2）margin上下叠压

解决办法：还是使用margin，将某一个元素方向设置成预想值，margin叠压会取最大的margin值

如果元素没有特殊特征也可用padding代替

8、盒模型

标准盒模型下：

盒子大小=border+padding+width

盒子宽度=左border+左padding+width+右padding+右border

盒子高度=上border+上padding+height+下padding+下border

9、HTML5新增标签

header

footer

nav

section

article

aside

time

10、块元素和内联元素

块元素特性：

（1）默认独占一行

（2）没宽高事，撑满一行

（3）支持所有css命令

内联元素：

（1）同排可以继续跟同类标签

（2）内容撑开宽度

（3）不支持宽高

（4）不支持上下margin

（5）代码换行被解析

内联块元素：

（1）块在一行显示

（2）行内属性标签支持宽高

（3）没有宽度的时候内容撑开宽度

11、float

浮动元素特性：

（1）块在一行显示

（2）行内属性标签支持宽高

（3）没有宽度的时候内容撑开宽度

（4）脱离文档流

（5）提升层级半层

清除浮动方法：

（1）父级加高：扩展性不好

（2）父级浮动：页面中所有元素加浮动，margin左右auto不起作用

（3）inline-block：margin左右auto失效

（4）空标签清除浮动：IE6下最小高度19px；（解决后还有2px偏差）

（5）br清浮动

（6）after伪类：.clearfix：after{ content:"";  clear:both;  display:block; }

.clearfix{  *zoom:1;}

BFC 和 haslayout：

BFC                标准浏览器

haslayout      IE浏览器

12、定位的一些值

relative：

（1）不会影响元素本身特性

（2）不会让元素脱离文档流

（3）没有定位偏移量，对元素本身没影响

（4）提升层级

absolute：

（1）元素脱离文档流

（2）内嵌元素支持宽高

（3）如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移

（4）相对定位一般都是配合绝对定位元素使用

（5）提升层级

fixed：

（1）和绝对定位类似，区别是这个相对于整个文档定位

IE6不支持fixed

static：默认值

inherit：从父元素继承定位属性的值

13、表格

表格常用标签：

table

thead

tbody

tr

td

th

表格样式重置：table{ border-collapse:collapse;}  th,td{ padding:0;}

14、表单

input下type的类型：

text

password

radio

checkbox

submit

reset

button

image

file

hidden

select/option:做下拉列表

textarea