简介
今天要给大家介绍的是一个神奇的讲解 CSS 布局的网站,里面的内容不仅提供了很多有用的 CSS 布局标签,还做了详细的解释,只能用短小精悍来形容。希望能提升小伙伴们对 CSS 布局的运用和理解。
里面介绍了一些 CSS 属性以及具体用法。不得不说,CSS 的布局还是挺重要的,特别是对于新手来说,就算学会了标签往往也无从下手,也许看完这个网站的内容后便会有大的帮助。
内容介绍
-
用 max-width 替代 width 更好的处理浏览小窗口情况
-
用新增的 box-sizing 的标签固定元素的内边距和边框
-
position 实现窗口的固定定位,也就是说即便页面滚动,它还是会停留在相同的位置
-
float 实现文字环绕图片的功能
等等还有许多的布局方法,就不在这里一一细说了。
举例
- 以下是 CSS 中用 float 来实现文字环绕图片的效果
- 当我们要让将一个段落(图)移动到浮动元素 div 下面,便可以在浮动的基础上用到 clear,如下图
- position 的 absolute 实现绝对定位,即不管你的窗口页面如何变化,内容(窗口)都会在固定的位置,不会随浏览器的大小改变,如下图(大窗口和小窗口)
这里列举的只是其中几个 CSS 标签的简单用法,当然还有许多许多有用复杂的 CSS 布局标签就留给小伙伴们自行探索啦!
结尾
最后附上网址,小伙伴们一起来看看吧!