网页设计三种定位 第1篇
媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点:适应pc和移动端,如果足够耐心,效果完美。
缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。
响应式页面在头部会加上这一段代码:
网页设计三种定位 第2篇
position 属性值 relative,可以设置元素为相对定位,相对定位有什么特点呢?我们通过例子来看。
创建 文件和 文件。打开 html 文件,构建基础代码,引入外部样式。在body里输入 emmet 命令:;(div[class=box$]{盒子$})*3,回车。在一个大的容器里创建了三个小盒子。
打开 css 文件,定义通用选择器,声明样式 box-sizing: border-box。定义分组选择器 html, body,声明样式 height: 100%,让 html 和 body 撑满整个页面。定义选择器 body,声明样式 margin: 0,去除 body 的外边界。
给外部容器里的三个盒子(.container > div)定义样式: float: left,width: 150px,height: 150px,border: 1px solid black,line-height: 150px,text-align: center,固定的宽高,1 像素的边框,文本水平垂直居中,水平横向排列。
为了消除浮动对其他容器的影响,给 container 定义伪元素(.container::after ),声明样式为:content: __,clear: both,display: block。
再分别给 box1 添加背景颜色 orange,给 box2 添加背景颜色 skyblue,给 box3 添加背景颜色 hotpink。
到浏览器里看一下效果,三个用来实验的盒子就做好了。
回到 css,我们给 box2 添加样式 position: relative,让它相对定位。
此时,我们发现盒子2没有任何变化。
再回到 css,给 box2 添加样式 left: 50px,top: 50px。
CSS .box2 { position: relative; left: 50px; top: 50px; }
再来看效果,盒子2向右和向下各偏移了 50px,并盖在了盒子3的上面。
网页设计三种定位 第3篇
回到 css,给 container 添加样式 position: relative,也就是给盒子2 的父元素添加了一个相对定位。
再看一下效果,盒子2 相对于它的父容器定位了。
如果把 container 的定位样式值改为 absolute,效果如何呢?
我们看,盒子2 的位置没有发生变化。这说明,盒子2 定位的参照元素只要设置了定位属性,无论是哪一种定位方式都可以。但 static 静态定位例外,其实,static 表示元素为静态定位,也就是和不给元素添加 position 属性是等价的。
比如,注释掉 container 容器的定位属性。
此时,盒子2 又相对于 body 来定位了。
如果再添加样式 position: static。
效果是一样的。
你可能还会问,绝对定位只参照父元素和 body 来定位吗?我们再做一个实验。
回到 html,在 container 外部再添加一个父元素 div,定义属性。
回到 css,给 outer 添加样式:display: inline-block,width: 600px,height: 500px,background-color: aliceblue,margin-left: 100px,margin-top: 100px,定义最外部容器的宽高,背景颜色,并向右下方设置100px的位置偏移。
此时,盒子1 和 盒子3 随着整个盒子发生偏移,盒子2 还是相对 body 定位。
注释掉 container 的定位样式,重新设置它为绝对定位。再给 outer 声明一个 position: relative 样式。现在,box2 的父容器和祖先容器都设置了定位,它会参照谁来定位呢?
很显然,盒子2 相对于父容器来定位了
如果注释掉父容器 container 的定位样式。盒子2 相对于祖先元素 outer,还是相对于 body 来定位呢?
答案显而易见,相对于 outer 定位了。
再去掉 outer 的定位样式。
网页设计三种定位 第4篇
流式布局(Liquid)的特点(也叫_Fluid_) 是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。代表作栅栏系统(网格系统)。
网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。
网页设计三种定位 第5篇
接下来学习固定定位。
注释掉 box2 的定位相关样式。添加样式:position: fixed,right: 0,top: 100px,定义 box2 为固定定位,位置紧贴参照容器右侧
我们发现,容器2 相对于 body 定位了。其实,它只相对于 body 定位。
即使祖先元素有定位,比如打开父容器 container 的定位样式注释。
我们看,容器2 的位置依然不变。你会说,这不是和绝对定位类似嘛,是的,固定定位其实就是绝对定位的特例。那它有什么特殊用途呢?
回到 css,给 body 添加 2000px 的高度。
滚动页面,我们发现:盒子2 仍旧固定不动。