您的位置：首页 > Web前端 > CSS

CSS知识点个人总结（不断更新）

2017-06-03 01:22 633 查看
—自用笔记：本文属于自用笔记，错误之处恳请留言指出—

1、CSS中
!important
的使用

CSS的原理：我们知道，CSS写在不同的地方有不同的优先级， .css文件中的定义 <(小于) 元素style中的属性，但是如果使用!important，事情就会变得不一样。

首先先看一段代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head>
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
<div class="testClass" style="color:red;">
测试Css中的Important
</div>
</body>
</html>


虽然元素的style中有testClass类的定义，但是在上面的css定义中的用
!important
限定的定义却是优先级最高的，无论是在IE6-10或者Firefox和Chrome表现都是一致的，都显示蓝色。

这种情况也同时可以说明IE6是可以识别!important的，只是这个是IE6的一个缺陷吧。如果写成下面的样式，IE6是识别不出来的：

.testClass{
color:blue !important;
color:red;
}


这样，在ie6下展示的时候会显示成红色。当然，也可以通过以下方式来让ie6识别：

.testClass{
color:blue !important;
}
.testClass{
color:red;
}


通过以上方式也是可以让ie6显示成蓝色的。以上实例说明使用
!important
的css定义是拥有最高的优先级的。只是在IE6下出了一点小的bug，注意书写方式一般可以轻松避开的。

2、DIV+CSS 布局

所谓
<div>
标签我们可以理解为一个盒子。

例如：
<div class="top" style='border:1px solid #000;background-color:#EEE'>
这里是Top
</div>


border:1px solid #000;（这是把边框显示出来，方便我们布局）。

background-color:#EEE;（这是背景色设置，#EEE为颜色值）。

div的设置属性有很多，我就大致说一下。

这里可以设置一下字体居中，字体距离上下边框的距离。

text-align:center;（文字横向居中）

padding:30px;（字体距离上下左右边框的距离，因为左右已经超出了30px，所以这个30px就对左右不起限制作用了。）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航