CSS positioning的一些整理

来源：互联网发布：照片数据恢复编辑：程序博客网时间：2024/05/17 08:35

CSS基础

1. 关联一个css样式文件

<link rel="stylesheet" type="text/css" href="css/exp.css">

-rel : relationship css和当前的关系是样式文档

-type: text/css 关联文件的类型

-href: 这个link的地址

2. 理解样式的继承关系

子元素样式自动继承父元素样式

可以复写子元素的样式

<html><head><style>body {background-color : red;}p {background-color : green;}</style></head><body><div>div背景自动继承红色</div><p>p内背景被改成绿色</p></body></html>

3. 理解css的加载顺序

先加载link

之后 html-head-style中得样式

最后标签中得 style属性

最终的样式由最终加载项决定

4. 理解 span 和 div 代表的两类元素的区别

span 默认是inline元素，修饰时不换行

div 默认是block元素，修饰时独占一个行空间

span可以放在p中，div不可以放在p中及其他inline元素中

5. 理解 css中的各种计量单位

对于颜色: #630 #663300 3位和6位两种，重复3位得到的6位代表同一个颜色，调整6位的重复位可以得到微调的3位颜色

对于文字和空间: pt px ex em %

pt： point 浏览器默认字号一般是12pt

px：pixel 可以调整像素比例

ex：一个小写x的高度可以用于调整高度

em：一个大写M的宽度可用于调整宽度

%：当前默认值的百分比

对于元素的尺寸和block元素的尺寸

width height +padding + border + margin 的单位和文字空间的一致

CSS Positioning

1. 理解定位方式的种类 static absolute relative float fixed 无继承性

static：默认的定位方式

absolute：相对于父窗口的偏移定位

relative：相对于父窗口在应占位置的基础上的偏移定位

float：right | left 相对于其它元素漂浮出来，依次排在左边或右边，非float元素可以添加 clear : right/left/both 标签消除float元素对之后元素的效果

fixed ：相对于window的固定定位，特点是拖动滚动条不改变元素的可是位置

2. 元素position的第三个维度 z-index

子元素默认在父元素上方

同级子元素，后面的在前面的上方

可以改变z-index调整上下重叠关系

3. relative position的最常用应用

最为容器元素使用 position: relative , 内部的元素布局使用 absolute 或 float;

注意容器元素的条件: postiiton: relative 没有方向偏西

4. 一些技巧

link+图片+设置位置可以toggle不同动作下得图片显示

a:link, a:visited{background: url(xxx) left top; }a:hover, a:{background:url(xxx) left bottom;}

容器设置padding加内部元素设置统一margin-left/right: 0;可以对齐

用<p style="clear:both"/> 在结尾除，可以清除之前float样式对之后元素的影响

0 0