首页 > Web开发 > 详细

CSS高级学习-1

时间:2019-01-12 23:43:15      阅读:52      评论: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定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响。

使用规范

1、参照定位的元素必须是相对定位元素的前辈元素。

2、参照定位的元素必须加入position:relative;

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

特殊效果

水平居中

使用text-align:center来进行居中设置,但是当被设置元素是块状元素时,此设置不起作用。

  • 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

  • 不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):

    1. 加入 table 标签

      利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

    2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置

    3. 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

      通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

垂直居中

  • 父元素高度确定的单行文本

    父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

    line-height 与 font-size 的值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。

    这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。

  • 父元素高度确定的多行文本

    方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle

    ? 在父元素设置此样式时,会对inline-block类型的子元素都有用

    方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。

    ? 不用添加多余的无意义的标签,但兼容性不是很好,不兼容 IE6、7,而且这样修改display的block变成了table-cell,破坏了原有的块状元素的性质。

单位

单位 描述 使用场景
px 绝对单位,页面按精确像素展示
em 相对单位,基准点为父节点字体的大小 前端行业做移动端会普遍默认用rem或em,可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果
em是指字体高度 浏览器默认1em=16px,
rem 相对单位,可理解为”root em”, 相对根节点html的字体大小来计算 CSS3新加属性,chrome/firefox/IE9+支持
vw 视窗宽度,1vw等于视窗宽度的1%
vh 视窗高度,1vh等于视窗高度的1%
vmin vw和vh中较小的那个
vmax vw和vh中较大的那个

CSS高级学习-1

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

原文:https://www.cnblogs.com/fengzzi/p/10261335.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号