css定位relative，absolute

1.先解释一下文档流

　　就是HTML的一种机制，块元素单独占一行（比如   div），内联元素不换行（a标签，img标签）；

2.几种定位方式

　　2.1   static

　　　　HTML默认定位方法，服从文档流（flow），自适应的，不需要我们设置。

　　2.2　　relative

　　　　相对定位，相对于自己原来的位置（参照物是自己），可以使用bottom，top，left，right等定位，但是服从文档流，仍然占据着自己原来的位置；

　　2.3　　absolute

　　　　绝对定位，参照物是祖先有过position：relative或者position：absolute的元素，可以使用bottom，top，left，right等定位，但是absolute定位会从文档流中删除，就是原来自己占得位置会取消；祖先有过relative或者absolute标签，使用bottom top left right怎样都不会越过祖先的，需要使用margin才行。

　　2.4　　fixed

　　　　absolute参照是上一个定位过的祖先（static不算），如果元素的参照物是文档，使用 position:fixed实现；

　　2.5　　float

　　　　浮动标签，就是对象从文档中浮起来了，不在文档流中，值有left，right，none;但是float有时候会影响其他标签操作，一般我们在float的父元素后面添加   clear:both来清除；

　　2.6 <link>标签最重要的两个属性rel，href；<link rel="stylesheet"  href="位置" >;rel指明该标签是css标签，href指明css文件所在位置；

　　2.7  padding，margin都是干嘛用的？

　　　　padding：元素的内边距就是元素的边框和元素内容之间的距离；比如 h1{padding：10px，15px}，h1的内容离上下边框10px，离左右边框15px（内容是否是文本内容？）；

　　　　margin：元素的外边距就是元素的边框外面的距离，可以有负值；　

3. table标签

　　对于table我们需要关心的一般有：行（tr），列（td，单元格），单元格内容分布方式（）或者用padding填充，字体大小，字体颜色，高度，宽度，每个单元格都有border（为了美观要不要合并）

　　行：tr；

　　单元格：td；

　　单元格填充：padding；

　　字体大小，颜色；

　　border：table的边框，要不要合并；

4.点击a标签，改变a标签的class

　　

$(".trtitle td:has(a)").click(function() {
        var a = $(this).find("a");
        if(a.attr("class").indexOf("down") == 0) {
            $(this).css("color", "#d34a22");
            a.attr("class", "up");
            $(this).siblings().css("color", "").find("a").each(function() {
                $(this).attr("class", "down");
            });
        } else if(a.attr("class").indexOf("up") == 0) {
            $(this).css("color", "#d34a22");
            a.attr("class", "down");
            $(this).siblings().css("color", "").find("a").each(function() {
                $(this).attr("class", "down");
            });
        } else {
            $(this).siblings().add(this).css("color", "").find("a").each(function() {
                $(this).attr("class", "down");
            });
        }
        query(a.attr("field"),a.attr("class").indexOf("up") == 0 ? "asc" : "desc");
    });

 5.使用jquery动态生成html元素示例：

 

 1 var tdElement = function (data) {
 2         var tdNode = '<tr class="deladd"><td class="show-td"></td></tr>
 3          return tdNode;
　　}  

6.　　text-align 块元素的文本排列方式，值有 left right center（非常有用）；　　vertical-align:　行元素的对齐方式（可能会往上一点或者往下一点），有text-bottom，text-top;　line-height：行间距；　　z-index：表示叠加顺序，值越大，优先级越高，越会放在前面；　　font：定义字体，font-family（类型），font-size（大小），line-height（行间距）；

 7.　　图片背景在一行的方式有：　可以选择div装这两种元素，　1. 如果是背景图片，然后div设置成： background: url("img/show_pdt_tit.png") no-repeat left center;　　2.　如果就是一个图片<img>，图片css样式加上 vertical-align：middle。　　3. 图片和文字都用div修饰，那每个div都加上 display：inline-block。　　　　https://www.cnblogs.com/jingwhale/p/4599327.html?utm_source=tuicool