专栏首页前端路桥FE[0x02] -- 浅谈CSS布局

FE[0x02] -- 浅谈CSS布局

最近重返css世界,分享一些我的心得体会吧

侃侃而谈

最开始网页有个p的布局,基本上打开大屁股头电脑能看文字就好了,再后来随着Web技术的发展,你可以选择浮动布局float,也可以结合position进行布局,还有table表格布局等,再往后发展就是flex,媒体查询以及grid啦,什么栅栏布局,960网格布局啦。从这条发展主线看,感觉还是回到了最初的表格,抓重点,flex是基于轴的一维布局,而grid是最新的基于二维的布局。关于这方面的资料国内可以看张鑫旭大佬写的书和文章,还有像什么《CSS禅意花园》《精通CSS高级解决方案》《CSS解密》之类的书等,国外的资料可以去https://css-tricks.com,推特,油管上看看,都不错的选择。

基础布局

这边说了是基础布局,所以不会在这里介绍flexgrid,百分比布局,媒体查询以及移动端布局,可能会在后续文章介绍,那么我们开始吧。

盒模型(box-model)

注意点

  • border-width你不给它设置形状和颜色就仅仅宽度是无效果的
  • 当你设置了元素的宽度,实际展现的元素却超出你的设置:这是因为元素的边框和内边距会撑开元素
  • 两种盒模型content-boxbordr-box

我们来看这样一个例子,同样设置了width:600px为什么效果却截然不同呢?

从中我们可以看到,默认情况下(即content-box的时候),它会把你的borderpadding算上去,这样一对比,是不是清晰了很多,那么我们如何解决呢?来看看border-box的效果。

具体的选择盒模型的方案,你根据具体情况具体分析吧。

浮动布局与清除浮动(floatclear)

float

float最初是为了解决文字环绕而存在的,后期也被用来进行布局。我们还是来看这样一个例子。分别是没用浮动和用了右浮动的效果,可以看到是为了解决文字环绕。

clear

clear 属性被用于控制浮动

同样的,我们来看这样一个例子,两个兄弟元素之间的浮动关系,如楼下布局,设置.boy左浮动

<div class="boy"><span class="s1">Boy</span></div>
<div class="girl"><span class="s2">Girl</span></div>

用了clear:left之后,可以看到解决了堆积在一起的问题。

隐藏网页中的元素(display:nonevisibility: hidden;)

注意点

  • display 设置成 none 元素不会占据它本来应该显示的空间,但是设置成 visibility: hidden; 还会占据空间
  • 我们来实践一下,验证楼上的这句话

这个是display:none的情况

这个是visibility: hidden;的情况

外边距(margin)

在写页面用margin频率最高的一句我是margin: 0 auto;,我们来看看这句话的优缺点吧。同样我还是举例子,优点是可以使部分网页元素水平居中显示,

我们理科生说话要讲证据,这里说部分,我是有证据的,在移动端体验略微差了点,还有就是你想要表达的元素大于浏览器的尺寸。为了能够看到明显的区别,我把它加了一个灰度的框。

其实都是元素大于浏览器的宽度,我们来看看PC端的表现,可以看到当元素大于浏览器的时候,就有滚动条了,居中显然是不可能的了。

我们再来看看移动端的情况,看见了没有同学们,它并没有很好地实现居中。

这是个让人头大的问题,我们需要解决它。max-wdith巧妙地解决了这个问题,在主流浏览器和IE7+都有较好的表现,适合移动端,校正后的模样。

位置(position)

position可以设置的属性有很多,默认是static,还有一些其他属性例如,fixedrelative,absolute等等,然后可以设置top,left,right,bottom等。

我们还是看下楼下我准备的例子。

  • 一个static遇到relative
  • 一个static遇到加了点佐料的relative
  • 一个static遇到两个relative随后跟了一位fixed
  • 之后,一个relative生下一个absolute

总结

这里没有像以往过多地分享代码的实现,而是更多地采用了视觉的呈现。是应为css这块知识吧,还是需要同学们自己动手实践,一万个人有一万个人的看法,这个是我亲身经历的一些想法,只有当你亲身经历过才能够更好地去理解学习它,最后,同学们一起来动手试试吧。

本文分享自微信公众号 - 前端路桥(ataola),作者:丰臣正一

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 插入排序

    什么是插入排序?想到插入我脑子里冒出来一个相近的词就是插队,我那时还在上大二,排在食堂一楼打饭,忽然来了一个没素质的一顿操作猛如虎地插到了我前面,唉,这人没救了...

    丰臣正一
  • 网页元素居中的n种方法

    根据场景分析提出的一些假设,我们试着去建立对应的模型,下面是分别根据上面的三个场景设计的相关模型。

    丰臣正一
  • leetcode - 旋转数组的最小数字

    把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素。例如,数组 [3,4,5,1,2] ...

    丰臣正一
  • redis-jedis与spring整合

    本篇将续讲上篇redis的单机版,集群版以及jedis的操作文章,如有不理解可先阅读之前讲redis的文章。

    聚沙成塔
  • 增加网卡注意点

    在虚拟机增加一个新的网卡之后,并设置为仅主机模式 开启虚拟机,用ifconfig命令,查看是否已经加载了网卡——>安装ifconfig包:yum install...

    运维小白
  • Office OpenXml SDK 使用 Fallback 图片显示 Ole 元素

    我在写一个 WinForms 程序用来读取 Word 里面的图片显示,在解析 Word 等 Office 文档,会看到一些 ole object 元素,而有些 ...

    林德熙
  • 半路出家的编程之路

    在此仅作分享之乐,也用自己的微薄之力做一些分享与共同爱好的同学共同探讨进步。作为新手,很明白刚学编程同学的梦想以及苦恼,梦想各有不同,苦恼却总惊人相似,我并不想...

    程序员互动联盟
  • 【震撼】这些专业级摄影作品竟然出自谷歌神经网络之手!

    【新智元导读】谷歌研究人员提出利用机器学习学习“主观”概念的新方法,模仿专业摄影师的工作流程,遍览谷歌街景地图并搜索最佳作品,然后进行各种后续的处理,创造出媲美...

    新智元
  • python实现飞船游戏的纵向移动

    本文实例为大家分享了python实现飞船游戏的纵向移动,供大家参考,具体内容如下

    砸漏
  • 无线网卡AR9280/9285硬改MAC地址工具

    雨落凋殇

扫码关注云+社区

领取腾讯云代金券