首页 > Web开发 > 详细

CSS高级学习-1

时间:2019-01-12 23:43:15      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:不兼容   利用   网页   max   chrome   head   pla   ext   不用   

优先级

权值

标签权值为1,类权值为10,ID权值最高为100。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

层叠

内联式 > 嵌入式 > 外部式

重要性

为某些样式设置具有最高权值,使用!important

p{color:red!important;}

当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。

用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。

这时样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

!important优先级样式是个例外,权值高于用户自己设置的样式

布局模型

CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)

流动模型

流动模型,流动(Flow)是默认的网页布局模式。网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

  • 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
  • 在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

浮动模型

使用float:left;/float:right;使块状元素可以并排显示。

层模型

层布局模型就像图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。

层模型有三种形式:

1、绝对定位(position: absolute)

? 为元素设置层模型中的绝对定位。

? 将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

2、相对定位(position: relative)

? 为元素设置层模型中的相对定位,通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动

3、固定定位(position: fixed)

? fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,固定定位的元素会始终位于浏览器窗口内视图