CSS学习随笔

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS样式：

CSS由两个部分组成：选择器(你要改变的元素标签如：div)，声明（你想要的样式如：宽度(width) 背景颜色（background....)。

eg:

.div1{//声明

500px;//样式

height:100px;

background-color:red;

}

浮动与定位：

定位分为两类：绝对定位(absolute)，和相对定位(relative)。绝对定位是指定位后就不会随背景图片的变动而变动，且对一个块级元素进行绝对定位后不可再用浮动(即绝对定位与浮动不能共存)。相对定位是指定位后会随背景图片的变动而变动，相对浮动与定位可以共存。

<html>
   <meta charset="UTF-8">
   <head>
   .body{
       1000px;
       heighjt:500px;
       background-color:red;
  }
  .div1{
      100px;
      height:500px;
      float:left;
      background-color:blue;
     border:absolute;//错误；绝对定位与浮动不可共存
   }
</head>
<body>
    <div class="div1"></div>
</body>
</html>

　　背景上的块级元素随着鼠标拉动而变化：

在css中设置宽、高；有两种方式：{

100px;

height:100px;

}//块级元素是固定的，不会随着鼠标的拉动而变动

{

100%;

height:100%;

}//块级元素会随着鼠标的拉动而长宽也跟着变动