html和css常见的一些问题总结 - 润新知

html 标签

一般在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确实不起作用，代码是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
```
   <meta charset="UTF-8">
   <title>test</title>
   <style type="text/css">
      .p{ 200px; height:100px; background-color: #233; margin: 10px; padding:10px; }
      .s {50px; background-color: #c2c; height:50px; margin: 10px; padding:10px;}
   </style>
```
</head>
<body>
```
   <div class="p"><span class="s">son</span></div>
```
</body>
</html>

和定位相关的一些认识

常用的与定位相关的有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。

<!DOCTYPE html>
<html lang="en">
<head>
```
   <meta charset="UTF-8">
   <title>test</title>
   <style type="text/css">
      .p{ 200px; height:100px; background-color: #ccc; position: relative; left: 10px; top:10px;}
      .s {50px; background-color: #dedede; height:50px; margin: 10px; padding:10px;}
   </style>
```
</head>
<body>
```
   <div class="p"><span class="s">son</span></div>
```
</body>
</html>
absolute，首先你得找一个父级作为参照，并将父级设置为relative，假如不这样设定的话，都是以body作参照，下面还是举个列子。可以看到，sibling跑到前面去了，说明position：absolute；是脱离文档流的，与float有点类似，这里你可能会有疑问，为什么sibling的有些部分会被覆盖，这是因为son设置为position：absolute，（他的z-index有默认属性吧！）个人猜测，要想将sibling放到son上面，你可以给sibling设置也为position：absolute，z-index:[number],number比son的大即可。
```
  <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>test</title>
       <style type="text/css">
          .p{ 200px; height:100px; background-color: #ccc; position: relative;  }
          .s {50px; background-color: #dedede; height:50px; position: absolute; top:10px; left:20px; }
          .si { 50px; height:50px; background-color: #f00; }
       </style>
   </head>
   <body>
       <div class="p">
       <div class="s">son</div>
       <div class="si">sibling</div> 
       </div>
   </body>
   </html>
```

图片描述

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

<body>
    <div class="p">
    <div class="s">son</div>
    <div class="si">sibling</div> 
    </div>
</body>
<style type="text/css">
       .p{ 200px; height:100px; background-color: #ccc; }
       .s {50px; background-color: #dedede; height:50px; float: left;  }
       .si { 100px; height:50px; background-color: #f00; }
    </style>

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

关于清除浮动的问题

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

<body>
    <div class="p">
    <div class="s1">son1</div>
    <div class="s2">son2</div> 
    </div>
</body>
<style type="text/css">
       .p  {border:2px solid #f00;}
       .s1 {float: left; 50px; height:100px; background-color: #a11; }
       .s2 {float: left; 50px; height:150px; background-color: #ccc; margin-left:20px; }
    </style>

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

方法一：使用空标签<div class="clearfix"></div> .clearfix{clear:both;},在包裹的元素里添加这个空标签。

<body>
    <div class="p">
    <div class="s1">son1</div>
    <div class="s2">son2</div> 
    <div class="clearfix"></div>
    </div>
</body>

优点：简单，代码少，浏览器兼容性好。缺点：需要添加大量无语义的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.水平和垂直居中，不定宽高和定宽高两种方式，宽高固定这一种比较简单，直接上代码

①：{ 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;}

暂时就总结这一些。。。