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

EddieChan 发布于2019-08-30 12:53 / 1783人阅读

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

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

   
   test

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。

   
   test

son

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

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


    
    son
    sibling

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

关于清除浮动的问题

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


    
    son1
    son2

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

方法一：使用空标签

.clearfix{clear:both;},在包裹的元素里添加这个空标签。


    
    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;}

暂时就总结这一些。。。

idc机房托管专线服务 vps日常维护中的一些要点总结关于购买云主机和主机托管的常见问题关于购买云服务器和服务器托管的常见问题 css和html的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115141.html

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

摘要：至于说，，，属性是脱离文档流的，这个估计也是我们刚开始用得最多的，最方便的一个，同时也会给我们带来许多问题，这一次你会发现与前面的，有相同的地方，都是覆盖，不同的是，里文字被挤出来，这也是之前主要是用来做文字环绕效果有关。 html 标签一般在html有块级元素和行级元素，主要的块级元素有 div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有...

chadLi 2019-08-01 15:09 评论0 收藏0
IMWeb前端提升营七天学习总结

摘要：写在前面月到这天，前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。并且减轻服务器的负担，的原则是按需取数据，可以最大程度的减少冗余请求和响应对服务器造成的负担。控制表单控件的禁用状态。写在前面 5月24到30这7天，IMWeb前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。从中学习了很多前端方面的知识，也get到了前端学习的方法论，还有一些算法知识等等。现将...

mating 2019-08-20 16:59 评论0 收藏0
IMWeb前端提升营七天学习总结

摘要：写在前面月到这天，前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。并且减轻服务器的负担，的原则是按需取数据，可以最大程度的减少冗余请求和响应对服务器造成的负担。控制表单控件的禁用状态。写在前面 5月24到30这7天，IMWeb前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。从中学习了很多前端方面的知识，也get到了前端学习的方法论，还有一些算法知识等等。现将...

luxixing 2019-08-05 11:21 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0