html和css常见的一些问题总结

摘要：至于说，，，属性是脱离文档流的，这个估计也是我们刚开始用得最多的，最方便的一个，同时也会给我们带来许多问题，这一次你会发现与前面的，有相同的地方，都是覆盖，不同的是，里文字被挤出来，这也是之前主要是用来做文字环绕效果有关。

一般在html有块级元素和行级元素，主要的块级元素有

div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有好记的办法，div，p，显示标题的，列表，表格，定义列表相关的

行内元素，也称行级元素，主要有a,span,em,i,strong,input,img,label,select,textarea等
一般块级元素会独占一行，而行内元素不会，行内元素会挤在一行，直到一行排满，针对行内元素和会级元素，主要在后面布局用到的是，可以将一些行内元素的display属性变成block，display:block;,也可以使用dispaly:inline-block属性，

在这里顺便提一下block,inline-block,inline,的区别。对设置了display:block;的标签，你可以设置width，height，margin，padding，这些都会起作用，而对于display:inline;的标签，你在css里设置的width，height，margin-top，margin-bottom，padding-top，padding-bottom是没有用的（margin-left，margin-right,padding-left,padding-right是有效的）,这里有一个疑问？？padding的所有属性都在起作用，margin的top和bottom确实不起作用，代码是这样的：

   
son

常用的与定位相关的有float，static，relative，absolute,fixed，记得刚开始学习的时候一直搞不清楚relative和absolute，之前一直在滥用float，现在情况少一些，static是默认的，一个一个说吧。

relative，当把position设定为position：relative时，我们一般还会用到left，top，right，bottom这几个属性，还是用上边那个列子。这里父级div相对于自己原来的位置向左，向下移动10px，坐标轴以左上角为原点，向右为x轴，向下为y轴，你还可以设置left，top的值为负值，relative是相对于自身而言，不会脱离文档流，一般要定位先要将父级设置为relative。

   
son

absolute，首先你得找一个父级作为参照，并将父级设置为relative，假如不这样设定的话，都是以body作参照，下面还是举个列子。可以看到，sibling跑到前面去了，说明position：absolute；是脱离文档流的，与float有点类似，这里你可能会有疑问，为什么sibling的有些部分会被覆盖，这是因为son设置为position：absolute，（他的z-index有默认属性吧！）个人猜测，要想将sibling放到son上面，你可以给sibling设置也为position：absolute，z-index:[number],number比son的大即可。

  
   
   
       
       
       
   
   
       

       
son
       
sibling
 
       
   
   

3.fixed,以浏览器窗口为参照，固定位置不动，具体自己可以动手操作试试。
4.至于说float，float：left，float：right，float属性是脱离文档流的，这个估计也是我们刚开始用得最多的，最方便的一个，同时也会给我们带来许多问题，

    

    
son
    
sibling
 
    


    

这一次你会发现与前面的position：absolute，有相同的地方，都是.son覆盖sibling，不同的是，float里文字被挤出来，这也是之前主要是用来做文字环绕效果有关。关于定位的内容还有很多，这里不一一细说。

初学阶段，我们一定会遇到清除浮动的问题，这是在写页面里一定会碰到的问题，关于清除浮动的问题，网上也是一搜一大把，下面我自己先归纳一下吧！还是先来一个列子。

    

    
son1
    
son2
 
    

首先我们会碰到，不能将父元素进行撑开，怎样才能解决呢？有好几种解决方法。下面我列举几种常见的解决办法。

方法一：使用空标签

    

    
son1
    
son2
 
    

    

优点：简单，代码少，浏览器兼容性好。缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow属性，这个的原理主要是运用BFC（块级格式化上下文），今天刚看到，BFC（浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素（除了该值被传播到视点 viewport 的情况）将创建一个新的块级格式化上下文。）我们对父元素使用overflow：hidden;也可以达到效果。效果和之前的一模一样。

方法三：可能是使用的最广，最高大上的一种方法，使用：after伪类，实现原理应该就是在clearfix后面的伪类添加内容， 设置了clear：both样式。为了IE6-7兼容性，还要添加一条样式，来触发haslayout（）事件，写法：

.clearfix:after {clear: both; content: ".";height:0; visibility: hidden; display: block;}
.clearfix {  zoom: 1; /*触发 haslayout*/ }

这三种方法基本能帮我们解决这一类问题，其中第三种用得最广泛。

1.水平居中： 在父元素添加样式，要注意的是要给父元素一个宽度 {margin:0 auto;}
2.垂直居中： 这有一个比较详细的博客详解垂直居中，专业讲解各种居中
3.水平和垂直居中，不定宽高和定宽高两种方式，宽高固定这一种比较简单，直接上代码

①：{width: 200px; height: 200px; position: absolute; top:50%; left: 50%; margin-top:-100px;/*-height/2*/ margin-left:-100px;/*-width/2*/ }
②：{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
③：{display: flex; justify-content: center; align-items: center; border: 2px solid #f22;}

暂时就总结这一些。。。