CSS里的定位主要有几种方法?

html-css013

CSS里的定位主要有几种方法?,第1张

定位方案有四种:静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

在这四种方案中,静态和相对定位不会影响整个文档的布局,而绝对和固定定位会与文档分开,因此页面不会为这两种类型的定位元素保留空间。 在默认状态下,所有元素都是静态放置的,即元素从上到下以及从左到右的顺序排列。

只要为元素设置了“ position”属性,就可以使用“ top”,“ right”,“ bottom”和“ left”属性精确定义其位置。

扩展资料:

相对定位中的“top”,“right”,“bottom”和“left”用于设置距元素原始位置的偏移量,但是绝对定位的四个属性不同。

在绝对定位中,“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说,已定位元素的边距和包含块的边界将影响top的值,进而影响绝对定位元素的位置,但包含块的填充将不起作用。

在相对定位中,“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”,是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离,“left”和“right”也是如此。

先来点基础的,

CSS

的使用方式有三种:内联

<p style=""></p>

;内部样式,在

head

加入

<style></style>

定义

css

body

中引用;外部样式,

css

放在一个外部文件中,

head

中用

<link src="">

加载,

body

中引用和内部样式使用方法相同。

再来点基础的,

css

定义有三种:

直接标签定义如,

p{

具体风格代码

}

效果范围是

body

中所有的

p

标签;根据

ID

号定义,

#p1{

具体风格代码

}

效果范围是

body

id="p1"

的标

签;自定义,

.p1{

具体风格代码

}

body

中标签以

class="p1"

进行引用;

一、

CSS

的语法是比较灵活的,比如可以同时定义两个

css

名使用同一种风格,中间以逗

号分隔,如:

.

.p1

.p2{

具体风格代码

}

.p1

#p2,p{

具体风格代码

}

,意思为,自定义的

p1

风格,

id

号为

p2

的风格,

<p>

标签的风格。

二、

接上,也可以

.p1

.p2{

具体风格代码

}

.p2{

具体风格代码

}

好处是把自定义

p1

p2

相同的部分放在

.p1

.p2{

具体风格代码

}

不同部

.p2

再定义。

三、

前面自定义好的风格,在引用时

class="

自定义风格

"

,也给了我们充分的灵活,可以

引用多个自定义风格,以空格间隔,如:

.p1{

具体风格代码

}

.p2{

具体风格代码

}

引用时

<p class="p1 p2">

来回答下吧,可以从两处地方去查询;

打开网站,按f12打开开发者,接着随便点一下开发者工具的面板,ctrl+f查找“link”

<link rel="stylesheet" href="http://www.xxxxxxx/images/all.css" />

href后面的的就是css根目录下的位置

另外一处就是查询具体的css样式在css文件的哪一行上,同样点开开发者工具,点开左上角那个鼠标箭头,然后指向你需要了解的class位置,然后可以看到定位到了这个位置,这个样式的位置表示在all.css文件下的第二行

鼠标悬停在这个all.css:2的时候也能看到具体的位置