HTML标签嵌套规则以及常规应用

HTML分类

1、块级元素：

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul、li

特点：总是在新行上开始，高度、行高以及上下边距都可控制，宽度默认是容器的100%，除非设定宽度。

功能：主要是用来搭建网站架构、网页布局、承载内容。

2、行内元素：

span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、textarea、tt、u、var

特点：和其他元素都在一行上，高、行高、以及上下边距不可变，宽度就是它的文字和图片的宽度，不可改变。

嵌套规则：

1、块级元素与块级元素平级、内嵌元素与内嵌元素平级

2、块级元素可以包含内联元素或某些块元素，但是内联元素不能包含块元素，它只能包含其他的内联元素。

3、有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素h1~h6、p、dt

4、块级元素不能放在标签p里面

5、li标签可以包含标签，因为li和div标签都是装载内容的容器。

6、a标签想要用hover必须把它的路径写全

所有属性的简写形式总结：

边框：border：width(边框粗细) style(边框样式) color(边框颜色)；（border-top/border-left/border-right/border-bottom）

溢出overflow：visible/(溢出可见)hidden(隐藏)/scroll(显示滚动条，溢出时可用)/auto(自动，溢出显示滚动条，并可用);（overflow-x、overflow-y）

外边距：margin:(数值) 先上右下左、顺时针（可以设负值）

外边距特殊效果：

1.外边距合并2.上下外边距溢出（子元素是一个没有外边距的父元素的第一个或最后一个）

内边距：padding：(数值) 先上右下左、顺时针（可以设负值）

在设置input里面的button type=“submit/reset/button”控件的宽高时包含边框和内边距

box-sizing：content-box/border-box；按照盒子模型计算（将内边距和边框包含进去）

background：color(颜色) url(“”)(背景照片的路径) repeat(是否重复背景图片) attachment(背景图片固定) position(背景图片定位);

attachment(背景图片固定)：scorll（背景随文本移动）、fixed（固定）

repeat(是否重复背景图片)：repeat、no-repeat、repeat-x、repeat-y

background-size：背景图片的大小：cover扩充足够大覆盖元素区域（有可能背景图显示不完整）

position(背景图片定位);抠图专用；

线性渐变：background：linear-gradient（angle（角度或方向），color-point，color-point…）

径向渐变：background：radial-gradient（[size（圆半径） at position（圆心位置）],color-point…）

浏览器兼容性

fire-fox：-moz-
chrome&safari：-webkit-
opera：-o-

字体属性
font: style(样式normal/italic) variant（小型大写字母normal/small-caps） weight（字体 加粗 normal/bold/400-900） size（字体大小px pt em） family（字体*必须写）;

文本属性
color：颜色、文本排列：text-align：left/center/right；文字修饰：text-decoration：none/underline/line-though/overline；行高：line-weight：value；首行文本缩进text-indent:value；文本阴影：text-shadow:h-shadow（横向阴影） v-shadow（纵向阴影） blur（阴影模糊） color（阴影颜色）；

表格：
垂直方向对齐：vertical-align：top/middle/bottom；

边框合并：border-collapse：separate（分离）/collapse（合并）

边框边距：border-spacing：value 一个值垂直和水平都有、两个值代表水平和垂直

标题位置：caption-side：top/bottom

显示规则：table-layout：auto（列宽由内容决定[加载慢]）/fixed（列宽由设定值决定[速度快]）

浮动定位
float：none/left/right；

清除浮动
none/left/right/both；

如果想消除浮动对父元素的影响：设置父元素高度、父元素浮动、父元素设置：overflow：hidden/auto 、父元素设置clear：both。

显示方式
display：none（隐藏：脱离文档流）/block（块级：允许修改尺寸）/inline（行级）/inline-block（行内块：允许修改尺寸）/table（尺寸自占一行）；

显示效果
visibility：visible（元素可见）/hidden（元素不可见：未脱离文档流）/collapse（删除一行或一列不影响布局）

透明度：opacity：0~1；

文本垂直对齐方式：vertical-align：baseline（默认基线对齐）/top/middle/bottom；

光标：cursor：default/pointer（小手）/crosshair（+）/text（I）/wait（等待）/help（帮助）；

列表项标志：lis-style-type：none（无标记）/disc（实心圆）/circle（空心圆）/square（方块）；

列表项图像：list-style-image：url(“url”)；

列表项位置：；list-style-position:outside（标志位于文本域之外）/inside（文本域之内）；

列表属性：list-style：type url() position；

定位
position：static（静态）/relative（相对定位）/absolute（绝对定位：元素会变成块级元素[弹出菜单]）/fixed（固定定位：脱离文档流不占据页面空间）；

偏移属性：top/bottom/left/right：value

堆叠顺序：z-index：value；

自带属性去除body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd{

margin:0px;

padding:0px;

}