css布局-百分比布局
写手机网页时,必须约束视口宽度(320-420左右):
& ltmeta name = & quot视窗& quotcontent = & quot宽度=设备宽度,初始比例=1.0,最小比例=1.0,最大比例=1.0,用户可缩放=否& quotid = & quot视窗& quot/& gt;
Width =设备宽度约束视口
初始比例=1.0初始视口倍数为1。
Minimum-scale=1.0允许的最小视口宽度是1倍。
Maximum-scale=1.0允许的最大视口宽度是1倍。
用户可缩放=不允许用户缩放视口。
没有版本中心的移动网页必须按百分比布局。百分比布局也称为流式布局。
一.百分比布局
宽度:宽度的百分比是宽度相对于父框宽度内容的比率。没有父框是相对于浏览器的宽度。
height:height的百分比是高度相对于父框的高度内容的比率。
填充、边距。:填充和边距是父框宽度的比率,不考虑方向百分比。
边框:无法写入百分比。
如果子框是绝对定位的,宽度百分比是指宽度(包括填充)。)的最近的母盒进行定位;
Height percentage指的是最近的带有定位的父框的高度(算上填充)。);
填充,边距百分比是指宽度(包括填充)。)的最近的母盒进行定位;
示例:
div{宽度:50%;溢出:隐藏;} p{宽度:50%;高度:100px浮动:左;背景色:粉色;} p:最后一个孩子{背景色:绿色;}
第二,框尺寸:边界框;
扩展了css2中的盒子模型。
css3的盒子大小:盒子模型中的减法。(在宽度和高度的基础上写填充或边框,就是在原来的宽度和高度上做减法。)
示例:
内减法盒子模型:书写的宽度和高度是盒子真正占据的宽度和高度。
老实说,缩小的盒子模型不能再好用了!!尤其是当你不得不自己计算的时候!
第三,弹性盒
显示的属性值:块、内联、内联块、无;
-webkit-box:弹性盒容器。
示例:
书写:3个P,宽度比为1:2:3。(X
2X
3X=100%)
抽象公式:
四。固体对固体模型
实体对实体模型:第一和第三部分的宽度是固定值,第二部分的宽度是其余部分的宽度。
示例:第1部分和第3部分是120px宽,第2部分是自扩展的。
1、浮动的使用
2.绝对定位(推荐)
3.弹性盒
v最大宽度和最小宽度
移动网页宽度必须使用百分比,但网页的最小宽度或最大宽度只能用像素px表示。不能用百分比。
示例:
css怎么实现图片随网页变化而变化?
可以设置宽度为一个百分比,高度自适应