熟悉CSS的使用,能够提高页面布局的效率。
CSS的规则
CSS语句由两个主要的部分组成:选择器和声明
插入样式表的方法
插入样式表的方法有三种:
1. 外部样式表
2. 内部样式表
3. 内联样式表
当同一个 HTML 元素被不止一个样式定义时,多重样式将层叠为一个。如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将由优先级高的样式表决定
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性:
h3{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color:red;
text-align:right;
font-size:20pt;
另外使用!important限定的定义优先级最高。
例如在外部样式表中将 h3 选择器的三个属性改为:
h3{
color:red;
text-align:left !important;
font-size:8pt;
}
则h3最终得到的样式是:
color:red;
text-align:left;
font-size:20pt;
虽然内部样式表优先级比外部样式表高,但是外部样式表text-align使用了!important,其优先级变为最高。
隐藏元素
隐藏一个元素可以通过把display属性设置为”none”,或把visibility属性设置为”hidden”。二者的区别是:
- visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
- display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
元素的重叠 z-index
在项目中,我用在做弹出框(将弹出框div的z-index设得比正常页面高)。详细讲解可以参考下面博客。
z-index详解
定位Position
- static定位: Position的默认值。遵循基本的定位规定(不会受到top, bottom, left, right影响),不能通过z-index进行层次分级。
- Fixed定位 :相对于浏览器窗口,即使窗口是滚动的它也不会移动。
- relative定位 :相对于自身正常的位置
- absolute定位 :相对于最近的父元素