一些前端布局笔记

作者: lewiswon | 来源:发表于2017-01-08 07:58 被阅读37次

收集前端学习资料
前端测试
一些前端布局笔记
前端布局笔记
前端
前端网站5种布局
CSS基本布局整理
一些写页面可能会用到的属性—Flex布局
关于布局
Jetpack-Compose 学习笔记（二）—— Compos

学习学习布局的笔记

1.让`padding`属性和`border`属性不增加盒子的大小

box-sizing:border-box;
//因为是新属性，所以，可能需要加前缀，已打开实验功能
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;

2.`position`属性有：`static`(默认)，`relative`，`fixed`，`absolute`

static
默认属性，不指定任何位置属性

relative
跟static表现一致，除非添加了其他属性,在一个相对定位（position属性的值为relative）的元素上设置 top、right 、 bottom和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative一样， top 、right 、 bottom和 left 属性都可用。

资料：修复移动设备fixed属性bug

absolute
是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的positioned祖先元素。如果绝对定位（position属性的值为absolute）的元素没有positioned祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个positioned元素是指 position 值不是 static的元素

3.媒体查询

“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
媒体查询是做此事所需的最强大的工具
使用 meta viewport 之后可以让布局在移动浏览器上显示的更好

资料：MDN关于媒体查询的文档
资料：一些使用媒体查询网站的例子

4.更简单的实现网格布局，使用`display:inline-block`

使用时需要注意

vertical-align属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

资料：让IE6/IE7支持inline-block

5.使用`column-count`属性实现多列文本布局

这个属性比较新，需要使用浏览器前缀来实现兼容性，并且不支持IE9及以下和Opera mini浏览器
例如：

.three-column {
 padding: 1em; 
 -moz-column-count: 3;
 -moz-column-gap: 1em; 
 -webkit-column-count: 3;
 -webkit-column-gap: 1em;
 column-count: 3; 
 column-gap: 1em;
}

资料：更多关于column属性