欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Css布局之百分比宽度布局的使用

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

如何利用百分比布局?本篇文章就给大家介绍Css布局之百分比宽度布局的使用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

百分比是什么?如何设置?

百分比是一种相对于包含块的计量单位。

百分比宽度的计算: 目标元素宽度/父级元素宽度=百分比宽度

它对图片很有用:如下我们实现了图片宽度始终是容器宽度的50%。大家可以运行后,改变页面大小看看效果!

1.jpg

你还可以同时使用 min-width 和 max-width 来限制图片的最大或最小宽度比!

百分比宽度布局

我们来看看一个百分比宽度布局的例子:

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

当父容器的宽度为:800px时

2.jpg

当父容器的宽度为:500px时

3.jpg

宽度设置百分比后,nav 和section 标签会随着父容器宽度的改变而改变。

下面我们来看看Css布局中常用属性的百分比设置

4.jpg

说明:进行百分比布局需要

1、 首先对整个页面进行块分区,每个模块的宽度都采取相对应的百分比。

2、当你定义内容区域的宽度,区域之间的距离时,也就是各盒模型只见的间距,都需要采用百分比,绝对不能用固定宽度。哪怕是margin-left margin-right 也要用百分比!

3、在进行百分比布局中,尽可能的从大块到小快,抛开具体内容实体,这些块都要用百分比。(内容实体,也就是会展示的内容文字图像图标等等。块,没有内容。)

百分比宽度布局要面临的问题:

百分比布局,窗口比例缩小到百分之五十,页面必乱。在百分比布局中,往往放大是不会出问题的,而缩小会出问题。建议选择比较小的电脑屏幕进行开发。屏幕过大,可以根据情况将窗口缩放到15寸左右。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。 本文地址:http://itbyc.com/web/css3/20274.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1