属性:position:relative | absolute | static | fixed
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、成都网站建设、成都外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的善左网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
样式冲突是正常的:
因为我们可以对一个元素以不同的方式设置同一个样式。
比方你在一个类里设置了该样式,color:red;
但是在一个内联元素上也设置了 color:green;
那这里显示后面的,因为内联大于一切!
一般的权的算法是:
ID CLASS 标签
100 10 1
内联大于外联
所谓的样式表层叠:指的是同一个元素通过不同方式设置样式表产生的样式重叠。
电脑培训认为样式表继承:指的是某一个被嵌套的元素得到它父元素样式。
还有一种样式叫浏览器样式,是这个元素在这个浏览器运行时默认附加的样式。
1.浏览器样式b这个元素隐含加粗样式/bspanstyle="font-weight:bold;"这个元素通过style加粗/span解释:b元素就是具有加粗的隐含样式,而span元素没有任何隐含样式,通过style属性设置样式。
2.样式表层叠样式表层叠通过五种方式进行,如果样式相同,那么比如会产生冲突替换。
这时,它的优先级顺序就显的比较重要。
以下优先级从低到高:(1).浏览器样式(元素自身携带的样式);(2).外部引入样式(使用link引入的样式);(3).文档内嵌样式(使用style元素设置);(4).元素内嵌样式(使用style属性设置)。
3.样式继承如果某一个元素并没有设置父元素相关的样式,那么就会使用继承机制将父元素的样式集成下来。
//b元素继承了p元素的样式pstyle="color:red;"这是bHTML5/b/p样式继承只适用于元素的外观(文字、颜色、字体等),而元素在页面上的布局样式则不会被继承。
如果继承这种样式,就必须使用强制继承:inherit。
可以有三种理解方式,如下:
一:层叠性指的是样式的优先级,当产生冲突时以优先级高的为准。
开发者样式读者样式浏览器样式(除非使用!important标记
)
id选择符(伪)类选择符元素选择符
权重相同时取后面定义的样式
二:
CSS层叠性是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。每个CSS选择器都会有一个权重,当两个选择器同时配置同一元素的同一属性时(比如一个设置color:red,另一个color:black),就会产生冲突,而解决冲突的方案就是CSS选择器的权重,权重高的来覆盖权重低的。
三:层叠性指的是上级标签的样式会自动继承到其所有下级标签,如针对body设置的标签选择器所设的字体样式会自动应用到body下的p中,除非p重写了相关样式将其覆盖。
首先 p没有默认的字体样式 如果 没有为p单独设置样式 他会继承body的样式
层叠指的是样式的优先级,当产生冲突时以优先级高的为准。
1. 开发者样式读者样式浏览器样式(除非使用!important标记 )
2. id选择符(伪)类选择符元素选择符
3. 权重相同时取后面定义的样式
以下是一段经典的html,三个类名分别为模块、标题和正文。
div class="mod"
div class="hd"/div
div class="bd"/div
/div
大部分html页面都可以由这种结构嵌套或者累加而成。