css布局-百分比布局

html-css07

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。不能用百分数。 例：

设最小和最大宽度，主要是为了防止页面变形而已如，如果一个页面的宽度设置为百分比，这时此页面的宽度会根据浏览器的宽度而定但如果浏览器的宽度过小，页面就会变形，例如，你做的用百分比设置的页面，而用户端的浏览器窗口宽度被缩小成 100px 宽度（或显示器分辨率过小）那么如果你页面中没设置最小宽度，那可想而之你这时的页面会崩到啥情度，但如果你加了一个：min-width:780px的最小宽度的话那么，当浏览器宽度为 100px 时，你的页面依然能完美显示而不会崩掉……同理，最大宽度 max-width 也是如此现在大多显示都是宽屏的，如果你不想你的页面铺满全屏或各模块的间隔过大，就可以加个最大宽度进行限制。以上……

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：span {font-size: 0.8em}。

3、浏览器运行index.html页面，此时span的字体大小被设置h1字体大小的80%。