CSS网页页面案例 运用box

日期:2021-03-13 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

[参加检测的访问器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[实际操作系统软件:Windows]
先看编码:

提醒:您能够先改动一部分编码再运作

重要一部分

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;}

基本原理大约便是这样的

千言万语抵但是1副画,根据整容前后左右的比照,大伙儿应当能看出box-sizing:border-box的功效了。

掌握box-sizing的同学们应当了解,它来自离微国较为漫长的css3全球,因而IE6/IE7是不适用的,但我很承担责任滴说:本demo一切正常适配IE6/IE7。

由于……

IE6/IE7下,<html>的box-sizing默认设置值本便是border-box(注:IE7有1点点不一切正常,overflow:hidden后神志有一定的修复,将不危害本demo一切正常运行)。、

如今的难题便是是否要选用这个方式了,给点好坏的比照,大伙儿自主掂量吧:

较为应用肯定精准定位的方式来完成,这个方式在现阶段关键存在两个优点:

  1. 对于每种访问器基础应用的同1方式,css编码简易,易改动、易了解。
  2. 适配。肯定精准定位的方式在OP10下存在临时找不着修补bug的方法,只好绕个弯走了。

它最大的缺点便是欠灵便,假如沒有IE6,我想我是果断挑选肯定精准定位的方式的。

下列为运用案例demo。


提醒:您能够先改动一部分编码再运作

1个应留意的难题

不必给body以overflow:hidden,它可能无情地掩藏掉任在哪它之外的任何物品,包含top/bottom(header/footer);

1个应了解的关键点

[100%+(N)px] 的高宽比造成的方式:div { height:100%; padding-top:(N)px;}。