css布局-百分比布局

html-css024

css布局-百分比布局,第1张

书写手机网页时,必须约束视口宽度(320-420左右): <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" /> width=device-width 约束视口 initial-scale=1.0 初始视口倍数是1倍 minimum-scale=1.0 最小允许视口宽度是1倍 maximum-scale=1.0 最大允许视口宽度是1倍 user-scalable=no不允许用户缩放视口 书写移动端网页,没有版心,必须用百分比布局。百分比布局也叫流式布局。 一、百分比布局 width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。 height:高度的百分比是相对于父盒子height内容高的比。 padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。 border:不能书写百分数 子盒子如果绝对定位,width百分比参考的是距离最近,且有定位的父盒子的width(算上padding.); height百分比参考的是距离最近,且有定位的父盒子的height(算上padding.); padding,margin百分比参考的是距离最近,且有定位的父盒子的width(算上padding.); 例:div{ width: 50%overflow: hidden} p{ width: 50%height: 100pxfloat: leftbackground-color: pink} p:last-child{ background-color: green}二、box-sizing:border-box css2中的盒模型是外扩的。 css3的box-sizing:盒模型内减。(在width、height基础上再书写padding或者border,是在原有宽高上进行内减。) 例: 内减盒模型:书写的width、height就是盒子真正占有的宽和高。 讲真,内减盒模型简直不能再更好用了!!尤其是要自己各种测算的时候! 三、弹性盒 display的属性值:block ,inline,inline-block,none -webkit-box:弹性盒容器。 例: 书写:3个P,宽度比是1:2:3。(X+2X+3X=100%) 抽象公式: 四、固比固模型 固比固模型:第一部分和第三部分宽度是固定值,第二部分宽度是剩余部分的宽度。 例:1和3部分宽度是120px,2自动撑开。 1、利用浮动 2、绝对定位(推荐) 3、弹性盒 五、max-width 和 min-width 移动端网页宽度必须使用百分比,但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。 例:

解决这个问题的方法如下:

1、先在html里添加一个img图片标签。

2、运行页面后,这是完整显示图片大小的。图片大概是400x260左右的大小。

3、要进入图片缩放,可以在css样式里设置图片的宽度和高度,但不要宽和高都设置了,比如这里都设置为100px。

4、设置后,看下页面可以看到图片现在变形了。

5、正确的方法应该是只设置其中一个,比如设置宽度为100px,高度设置为自动就行了。

6、这里设置后的效果,图片并没有变形。

7、同样,如果是限定高度的大小,就设置宽度为自动,图片同样不会变形,这样问题就解决了。

css3有两个新单位,vw和vh,vw表示占用父元素宽度的百分比,vh表示父元素高度的百分比,如20vw表示元素宽度为父元素宽度的百分之二十,你设置宽度和高度都为20vw,就能实现正方形的效果。不过有个bug,就是现在浏览器对css3的支持度不是很大,有些浏览器不支持