我的理解:
自然布局:默认的流式布局:就是块级的垂向下,块内的横向移动。
浮动布局:通过float,可以将块级的并行在一排。
层模型
特点:如果我想一个div在另外一个div的上面,我们就需要可以使用绝对定位来完成,层模型的三种定位方式relative、absolute、fixed
absolute
需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
relative
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),
然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
fixed
fixed:表示固定定位,与absolute定位类型类似,
但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。
由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,
除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,
这与background-attachment:fixed;属性功能相同。
---------------------
作者:superman__007
来源:CSDN
原文:https://blog.csdn.net/superman__007/article/details/77951401
版权声明:本文为博主原创文章,转载请附上博文链接!
摘录:
一 静态布局(Static Layout)
表现:在传统web设计中,不管浏览器尺寸具体大小多少,网页的布局会一直按照最开始的布局来显示。
特点:固定死宽高
二 自适应布局(Adaptive Layout)
表现:就是为了不同屏幕的分辨率来定义不同的布局,并且在每个布局中的页面元素不随着窗口的大小变化而改变。
特点:自适应布局可以看做是静态布局的一个系列,即元素的位置随着网页大小发生变化而元素的大小不变。
三 流式布局(Liquid Layout)
表现:实质是百分比布局,只有一套布局,页面元素会随着窗口大小变化而改变。
特点:当窗口变得过小或过大,页面元素就不能正常显示。
1 百分比的特点
尺寸百分比:如width = 20%;
位置百分比:如left = 30%;
2 单位
1)em:参考点继承于父级字体大小
例如:
<div style = “font-size:14px;”>
<div style = “font-size:2em”></div><!—字体继承父级为28px-->
</div>
2)rem;相对于(root根元素)html元素设置的字体大小
确定rem的三个步骤:
a:确定基数,一般为10px;
b:html{font-size:百分数}
基数 = 百分数*16
如:百分数为62.5% 基数 = 62.5*16= 10px = 1rem
c:将px换算成rem公式:px值/基数
如:html的font-size =62.5%,则可以确定基数为10px,若给浏览器设置的字体为20px,换算成rem值为20/10 = 2rem。
例如:
<html style="font-size: 62.5%;">
<body>
<div style="font-size: 3rem;"></div><!--3rem=30px-->
</body>
</html>
注意:谷歌浏览器下小于12px的字体会失效,则最终显示默认字体大小为12px,但是在火狐浏览器下能够正常显示;
兼容性问题:IE6,7,8不支持em或rem,其他浏览器都支持。
--------
四 响应式布局
表现:针对不同的屏幕分辨率设置不同的布局,同时每一种布局中用到流式布局,即页面大小会随着窗口大小的改变而自动适配,能使一个网站兼容多个终端。
特点:响应式布局跟自适应布局原理一样,都是检测设备,根据设备不同分辨率来设置不同的CSS样式,并且样式里面都采用的是百分比,而不是自适应布局里面的固定宽高。