发表于: 2018-05-28 18:14:20

1 598


1、了解自适应知识时,看到了一个“CSS实现div宽度根据内容自适应”的讲解,在该divCSS代码中加入了如下的代码

由此了解到了CSS hack的知识

Ø  CSS hack:由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

PS:有点看不懂,稍微了解了一下,具体内容以后如果有用到再详细了解

Ø  Zoom1: Zoom属性是IE浏览器的专有属性, 它可以设置或检索对象的缩放比例。

(当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题)

2DIV+CSS自适应布局:https://www.cnblogs.com/holiday1123/p/5357574.html

1)高度自适应:   原理就是把每个模块设置为绝对定位,然后设置中间自适应的模块的topbottom属性的值分别为头部模块和底部模块的高,然后中间模块的高度就自适应了

CSS定位机制:

CSS有三种基本的定位机制:普通流、浮动和绝对定位。

绝对定位:设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

相对定位:设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

z-index属性:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。(Z-index 仅能在定位元素上奏效)

2)宽度自适应:有三种方法,分别是用绝对定位;利用margin,中间模块先渲染;自身浮动。

a.用绝对定位来设置宽度自适应布局,原理:针对自适应模块使用绝对定位,在把leftright设置为左右两列的宽,其实原理和高度自适应一样,另外左右两列分别左右浮动。

b. 中间一列优先渲染的自适应三列布局,优先渲染(加载)的关键:内容在html里面必须放在前面。自适应的div必须放在leftright前面且包含在一个父div里。父divleftright模块都向左浮动,然后对自适应的div(就是父div里的子div)设置margin0 200px,然后对leftmargin-left的属性值设置为100%的负数,就是margin-left-100%;对rightmargin-left的属性值设置为自身宽度的负数,就是margin-left-200px

 

注意:自适应的div必须放在leftright前面且包含在一个父div里。

C. 自身浮动,原理:中间列设置margin属性,就是把左右列分别左右浮动。注意:使用这个方法布局自适应的话,必须把自适应的那一列在html中放在leftright后面。



返回列表 返回列表
评论

    分享到