作为一个从工作一开始就是后台工程师的我,在独立开发自己的项目的时候,发现前端是自己迈不过去的坎。
不会前端,就会对网页开发存在一种恐惧,让自己对于独立进行网页开发有种恐惧感。
之前一直都是依赖美工的小伙伴,但是后来也野生的成长了一段时间,比如我自学使用了Bootstrap进行布局,也定位过一些页面的样式问题,同时,为别的小伙伴设计过页面的模板。所以,对于网页这块的知识也有了一点点自己的感悟。最近,我想要能够完整的掌握CSS布局这块的理论基础和套路,就阅读了《HTML5与CSS3权威指南》这本书。
CSS的内容是博大精深,功能万千,不是一两天,或者看看书就能够掌握的。需要的是多实践。目前我结合着自己的一些困惑,并且也想系统地了解下这块的知识,也是曾经坑我最多的地方。所以我就仔细的阅读了第22章《盒相关样式》,然后写下了自己的一点点心得体会。
元素类型分类
其实,页面的布局所用到的元素类型,总的来说就三大类:block(块级元素)类型,inline(内联元素)类型和inline-block(内联块级元素)类型。
首先说一下什么是block类型:
- block类型的特点是默认会占据父元素的一整。
比如说,div元素,默认情况下回真用整个页面的一整行。当然,如果div元素包含在另外一个元素内部的话,也会默认占用父元素的一整行。block元素其实有很多。像是div,table,li等等元素都是block类型。 - block元素还有一个特点是可以设置长和宽。
网页布局的时候,可以通过设置block类型的长和宽来调整页面的整体样式和布局。 - block类型如果不指定高度,它的高度就会随着内容的多少而变动。
- block类型的特点是默认会占据父元素的一整。
再说一下什么是inline类型:
inline类型的元素和block类型的区别比较大,主要有以下几点- 多个inline类型的元素可以排列在同一行
- inline类型的元素不可以设置长和宽,是没有大小的。内容有多少,它就有多大。
- inline类型的元素主要有span,font 等
最后再解释下inline-block类型:
其实,inline-block类型和inline类型很类似,都可以:- 多个元素排列在同一行
当然,区别从名字上面可以看出来,就是inline-block类型其实是一种特殊的block类型。Inline-block类型和inline类型的区别是: - 可以设置长宽高
本质上,inline-block类型在页面上占据的是一个块,只是和block类型不一样的是,这个块不用占据整个一行,可以容得下其它的小伙伴和自己站在一起。
- 多个元素排列在同一行
以上三种类型其实贯穿了所有的CSS的元素,因为所有的元素应该都是属于其中的一种。无论是div span table(table其实是一种独立的类型,但是其实本质上也可以归属到这三个大类中)。我们只要了解到以上三种的元素类型,对于页面布局也就可以有个基础的认识了。
改变元素类型
如果我们平时好奇的打开F12,查看页面上面元素,你会发现一些元素展示的和自己所学习过的并不一样。比如我们查看页面最上面的导航栏,你会发现,导航栏的每一个菜单竟然是<li>
元素。
然而这个和我们平时所学习的并不一样,因为我们学习到的 <li>
元素其实并不是张这个样子的。正常情况下<li>
元素其实长这个样子:
其实在这里面,就要涉及到一个非常重要的特点了:元素自带的类型,其实是可以改变的。
比如,我们可以把inline类型的元素通过CSS改成block类型,也可以把block类型的元素改为inline-block类型 等等操作。
上面的导航栏,其实就是我们把 默认为 block类型的 <li>
元素改成了inline-block类型的结果。所以这个li元素没有点,并且展示在同一行中。
改变元素类型的方式,就是通过display属性来设置,请看下面的例子:
这个列子中可以看到,·
- · 元素已经被改为了 inline-block类型,并且横向排列。
-
Overflow类型
如果经常布局,那么对于块级元素超出元素本身容量的事情应该会常常遇到。比如表格中数据溢出,div中文字溢出等等。对于这种常见的情况,我们可以使用Overflow属性来进行样式控制。
直接让文字溢出,不管不顾,这肯定是不行的。因此我们必须得保证得保证的是:
1. 容器的大小是不能够随着内容的增多而改变的,这会破坏整个页面的布局。
2. 超出当前容器大小的那部分内容,是不能够跑到容器的外部去展示的,这会破坏整个页面的布局。因此,我们需要Overflow属性来帮我们实现这么一些效果:
超出容器的那部分内容,可以被隐藏起来让我们看不见。
如果想看到隐藏起来的内容,我们可以通过滚动条等等一些效果。
如果想要让我们知道有内容被隐藏了,可以在通过自动生成省略号的方式告知我们。
Overflow属性有以下常用的配置项:名称 作用 hidden 直接把超出的部分隐藏,不给我们看到 Scroll 超出的部分会自动生成一个滚动条 Auto 会根据需要自动生成水平方向或者垂直方向的滚动条
以上可以解决大多数情况下的需求了,如果还有特殊需求的话,可以研究下,overflow-x、overflow-y和text-overflow等属性。