个人学习第一阶段——关于html和css的技巧和问题总结（三）

最新推荐文章于 2024-10-10 20:59:20 发布

念及她名

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量428

点赞数

分类专栏：前端文章标签：前端基础 CSS HTML

本文链接：https://blog.csdn.net/u014244487/article/details/44257577

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（一）对a标签伪类的顺序理解

a标签伪类的作用：

":link": a标签还未被访问的状态；

":visited": a标签已被访问过的状态；

":hover": 鼠标悬停在a标签上的状态；

":active": a标签被鼠标按着时的状态；

理解：本质是“同等优先权的样式，写在后边的会覆盖前边”，a标签的伪类是又结合了不同的动作顺序，动作的触发顺序决定了伪类的顺序必须按lvha来写。

因为前2者两种状态是常态，而后2者是即时状态，当即时状态触发时，要覆盖常态，所以2个即时状态要放在后边；

因为在常态下：如果a标签被访问过后，就要呈现被访问过的状态，所以visited 要放在link后边；

因为鼠标按下时，伴随着悬停的a标签上，所以要想active覆盖hover，就必须把active放后边；

顺序记忆技巧： lv包hao用

链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。

(二）绝对定位和浮动的区别和运用（什么时候用浮动，什么时候用定位）

当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

而浮动元素的定位还是基于正常的文档流，但是脱离了文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素（非浮动）将忽略该元素并填补他原先的空间。(块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入)它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。

一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。（无需设置display:block）

（三）绝对定位和相对定位哪个好，怎么用

div+css布局很少用定位，基本上都用浮动，除非有特效或有特殊必要才会做定位。

div布局就像表格一样嵌套。

用绝对定位还是相对定位？

因为绝对定位（和文档流没关系）如无申明，则其是对与body而言的，处理不好的话。如显示器尺寸变了，可能就会变型。
相对定位的元素属文档流，所以稳定的，相对定位是相对他该出现的位置，如无设top left之类，和普通div基本一样。

一般的绝对定位是这样用的，父元素要是相对定位的且须有布局，如有个高度，这样子元素用绝对定位，就可以相对它的父元素进行绝对定位，父元素若不这样做，那么子元素用绝对定位其实是相对body定位。

（四）

纯CSS实现三列DIV等高布局

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left,#center,#right{//这里是实现的关键
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
float:left;
width:250px;
background:#00FFFF;
}
#center{
float:left;
width:500px;
background:#FF0000;
}
#right{
float:right;
width:250px;
background:#00FF00;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<p>left</p>
</div>
<div id="center">
<p>center</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>
</body>
</html>

（四）

关于DIV高度自动伸展的问题

问题：一个DIV的最小高度是400PX,当内容高度不足400PX时,其高度设置为400PX, 当内容高度大于400PX, 则按实际高度伸展，IE6和FIREFOX都要有效!

答案：

a{height:400px;height:auto;min-height:400px;width:500px;}

用min-height属性

（五）DIV+CSS 全屏垂直居中的一个办法

全屏垂直居中的一个办法 DIV+CSS , 这个方面有一点不好，就是不能自动适应，必须把高和宽写死！
例如下边的例子！
先定了一个点在中间，然后再把里边的这一块居中处理；

<style>

#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}

#center{background:#FFCC33;border:1px solid #0033FF; width:300px;height:300px;position:absolute; margin:-150px;}

</style>

</div>

（六）冷门属性dl,dt

很多人容易忽略 dl dt dd的用法

dl 内容块
dt 内容块的标题
dd 内容

可以这么写：

dt 和dd中可以再加入 ol ul li和p。理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。

（七）清除浮动

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，推荐阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》