【只差一个CSS】布局:简介

原文链接:https://segmentfault.com/a/1190000010760589

为什么要强调布局?

​ 我们为页面写css,就是想美化这个页面,让它变得好看,而变得好看其实可以分两步来完成,第一步是整理,第二步是修饰。就像一间房间,房间里有很多有用的东西,杂乱无章的摆放着,我们现在怎么美化这个房间呢?需要先把东西摆放整齐嘛,至于那些东西,可能本身看起来不太漂亮,但是我们不能一上来就给他们包个书皮,贴两朵花什么的,这样只会让本来就乱糟糟的房间更乱,是不是?我们要先把它们摆放到位,然后在这个基础上,对不同的东西进行美化,这样才能有效的美化房间。同样美化页面,我们需要先对页面元素进行整理,这种整理就叫布局(Layout)。

如何布局?

​ 首先页面有一种默认布局,也就是什么css也不写,然后页面对元素的排布情况。我们提到的布局一定是对这种默认布局进行调整,那怎么调整呢?互联网刚刚发展的时候,网页不像现在那么花哨,所以对css的要求没有现在那么高,所以一开始css并没有提供专门的布局方案,而是提供了一些基础的功能,然后所谓布局,就是你自己用这些基础功能去定位元素,就像你要做一个糖人,一开始只是给你提供了钩子锥子,后来才有了专用的模具。

总结起来,传统css布局工具有:

  • Float

  • Position

  • Table

现代css布局工具有:

  • Flexbox

  • Grid

我们可以用这些工具来对页面布局。另外要讲一点,Grid不仅是一种css提供的布局工具,更是一种布局方式,我们可以用任何布局工具来实现这种布局方式,可以用float做一个Grid框架,也可以用Flexbox来做。

用哪一种工具来布局?

​ 同学们要问啦,这么多工具,我到底用哪一种呢?这里强烈推荐Flexbox。理由是Flexbox是一种现代的布局工具,当然要比旧工具好用啦,唯一的不足是浏览器兼容性,但是我们要做的是小程序,就没有什么浏览器兼容性的问题了,小程序能很好的支持Flexbox,还有什么不用的理由呢?!


本教程免费开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

想看系列其他课程,请关注微信订阅号:只差一个程序员

watermark

如在阅读教程过程中,有任何疑问,请加入答疑群

img

展开阅读全文

一个css布局

11-07

我想list自动适应屏幕大小!!!rnrn在这里,我是不是应该设置list的width?如果不设置那有可能会变型!但是如果给了width那我想让list跟随屏幕大小,那不是达不到吗????rnrn现在list中的item我不确定一行有多少个item,如果屏幕大,我就给多几个,如果小,我就给少几个。但是我现在是没有指定list的width的!rnrn希望高手指点,也许我的想法是错的,应该指定list的width来固定它。rnrn[code=CSS]rnbody rnfont-family:Arial, Helvetica, sans-serif;rnfont-size:.8em; rncolor:#000000; rnmargin:0 0 0 0;rnpadding:0 0 0 0;rnbackground:#ffffff;rntext-align:center;rnrnrn#page_wrap rnpadding:20px;rnbackground:#ffffff;rntext-align:center;rnrnrn#header rnmargin:20px auto 20px auto;rnborder:3px solid #CCC;rndisplay:block;rnfont-size:.85em;rnbackground:#ffffff;rntext-align:center;rnrn#searchrnmargin:0px auto 0px auto;rnborder:3px solid #CCC;rndisplay:block;rnfont-size:.85em;rnbackground:#ffffff;rnrn#dynamicrnmargin:0px auto 0px auto;rnrn#loginrnborder:3px solid red;rnwidth:150px;rnfloat:left;rnrnrn#newsrnborder:3px solid #ccc;rnwidth:200px;rnfloat:left;rnrnrn#imagesrnrn#contentrnrnclear:both;rnmargin:0px auto 0px auto;rntext-align:center;rnrn#leftrnborder:3px solid #ccc;rnwidth:200px;rnfloat:left;rnrn#content #listrnborder:3px solid #ccc;rnfloat:left;rnrnrn.itemrnheight:100px;rnwidth:60px;rnborder:2px solid #223;rnfloat:left;rnrn#rightrnrnfloat:right;rnborder:3px solid #ccc;rnwidth:200px;rnrn#footerrnclear:both;rnrn[/code]rnhtmlrnrn[code=HTML]rnrnrnrn rn 无标题文档rnrn rnrnrnrnrn rn headerrn searchrn rn loginrn newsrn imagesrnrn rn leftrn rn itemrn itemrn itemrn itemrn itemrn itemrnrn itemrn rn rightrnrn footerrnrnrnrnrnrnrn[/code] 论坛

一个CSS布局实现

02-22

我想用html+CSS做一个仿客户端程序的界面,尽量不要用javascript。rn基本布局如下所示。rn┌────────────────────────────┐rn│ header部分高度固定宽自适应 │rn└────────────────────────────┘rn┌────────────────────────────┐rn│ │ │rn│ 宽高固定 │ │rn│ │ │rn│ │ │rn│------------------ │ 宽度高度自适应 │rn│ │ 超过部分自动显示滚动条 │rn│ │ │rn│ 宽固定高 │ │rn│ 自适应。 │ │rn│ 内容过高 │ │rn│ 自动显示 │ │rn│ 滚动条 │ │rn│ │ │rn└────────────────────────────┘rn┌────────────────────────────┐rn│ footer部分高度固定宽自适应 │rn└────────────────────────────┘rnhander、footer分别模拟菜单栏和状态栏,邀请始终位于页面的最rn上和最底端,中间部分则自适应占据其余部分空间。CSS这块比较rn若,向大家讨个思路,为下个项目做准备。原以为这些不用自己rn操心的,但现在发现我们那个美工只是个爱装B的家伙,又很倔rn,写出来的那些糟糕代码把我们整惨了,不值得信任。所以只能rn提前自己做技术预言了rn 论坛

没有更多推荐了,返回首页