css布局-百分比布局

html-css043

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

宽度 width (与高度 height )是在网页布局中经常用到的属性,但作为新手容易会对两者的定义产生误解。下面我们给出 width 与 height 的准确定义:

上述定义很清晰地指出,元素的 width 只是元素 content 内容区的宽度,不包括 padding , border , 与 margin ,即元素的 width 并不表示元素的 可视宽度

auto 与 text-align:center 都是在局中排版中常会用到的属性设置,他们很容易被混用,下面我们给出两者的准确定义:

因此,当我们想让一个块级元素在另一个块级元素中居中时(比如 p 在某个 div 中), text-align:center 是无效的,而可以通过设置 width:auto 或者 margin:auto 实现自动局中效果。

百分比是实现页面自适应的重要途径,而元素百分比的 宿主 到底是谁一直是令人困扰的问题。其实CSS对于百分比的定义十分明确:

至此我们发现, 包含块( containing block ) 的确切定义就显得尤为重要。有时间的情况下会在这篇中进行进一步的补充或新开一篇进行介绍。

在学习css的过程中,我们一般想要得到一个圆的话,那么border-radius这个属性的必不可少的,有时候我们把这个值设置成了50%,OK正常,有时候又设置成100%,也能work well ,那这两个之间的区别到底是什么呢

这是一个 150px x 150px 大小的方形,将它的四个角的半径都设置成 50%。根据 W3C border-radius 的规范 定义,如果 border-radius 的值是百分比的话,就是相对于 border box 的宽度和高度的百分比。在我们的例子中,盒子的宽高都是 150px,所以 50% 对应的就是 75px。

但是有时候我看到有的人会用 border-radius: 100%实现圆形的效果,在前段时间的一个项目中我想都没想就这么使用了,看起来和 50% 并没有什么区别。是什么原因呢?

在 Lea Verou 的演讲 The Humble Border Radius 中,她说到 W3C 对于 重合曲线 有这样的规范:如果两个相邻的角的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算保证它们不会重合。

如果左上角的圆角半径被设置成了100%,那么圆角就会从这个方形左下角跨到右上角,相当于把圆角半径设置成为150px(也就是方形的大小)。如果同时把右上角的圆角半径也设置成为100%,则两个相邻圆角合起来就有200%。这种情况自然是不允许出现的,所以浏览器就会重新就算,匀出空间给右边的圆角,同时缩放两个圆角的半径直到它们可以刚好符合这个方形,所以半径就变成了50%。

同样的,浏览器会对其他的圆角应用相同的计算,计算的结果是每个圆角的半径变成了50%,所以我们看到了一个原型。即使将border-radius设置为150px,浏览器还是会按照75px画圆角,75px是浏览器所允许的这个方形能够拥有的最大的圆角半径。

如果所有圆角的半径都被设置成了100%,浏览器会根据图形的实际情况做一些计算,保证圆角能够刚好适应图形。不过我不确定将所有图形的 border-radius 设置成100%对性能会不会有影响。