css-布局详解

2019-07-30 本文已影响0人 Knight52033

正常的默认文档流方式布局就不说了。主要说以下几种布局：

1. table布局

两种方式实现表格布局：HTML Table标签和 CSS display:table 相关属性。
HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。对应表:

css table 与HTML table 对应表
应用:

动态垂直居中对齐,用display:table实现居中对齐
动态水平居中对齐,CSS布局：动态水平居中对齐
使用display:table实现的圣杯布局
缺点:
table比其它html标记占更多的字节。(造成下载时间延迟,占用服务器更多流量资源)
table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)
table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加http会话数)
在某些浏览器中,table里的文字的拷贝会出现问题。(会让用户不悦)
table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%) (限制页面设计的自由性)
一旦学了CSS的知识,你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识,会省去你以后大量的时间)
‘table对’对于页面布局来说,从语义上看是不正确的。(它描述的是表现,而不是内容)
table代码会让阅读者抓狂。(不但无法利用CSS,而且会不知所云,尤其在进行页面改版或内容抽取的时候)
table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。
对 seo 不友好
嵌套复杂，阅读性变差
参考链接：
https://www.cnblogs.com/guoyong-feng/p/6076058.html
https://blog.csdn.net/screener/article/details/80895863
我的理解：除了本身就是表格内容的，还是不要用table布局。

水很深，坑很多，很复杂，用的也多。
特性:

元素‘浮动’，脱离文档流，但不脱离文本流
对自身影响，形成“块”（BFC），位置尽量靠上，位置尽量靠左(右)
对兄弟元素的影响，上面贴非float元素（一般float元素上面贴的都是非float元素），旁边贴float元素（靠左，或者靠右的时候贴float元素），不影响其它块级元素位置，影响其它块级元素内部文本（后面两点就是特性一说的脱离文档流，不脱离文本流）
对父级元素的影响，从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高），高度塌陷（因为在父级的空间里消失了，所以父级对高度有可能会塌陷，防止塌陷的办法就是清除浮动）
应用：

两栏布局(定位，flex,grid也可以实现)
三栏布局、双飞翼布局、圣杯布局 (定位，flex,grid也可以实现)
清除浮动的方法:
https://www.jianshu.com/p/1ff30625c250

position属性

阮一峰-grid布局
grid是二维布局，很灵活，适合整体构架，而flex是一维布局，适合处理局部细节。

多列属性

meta标签
<meta name="viewport" content="width=device-width, initial-scale=1">
image.png
移动前端开发之viewport的深入理解
其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。
使用 rem 单位
media query
菜鸟教程- @media 查询
 菜鸟教程- 多媒体查询