CSS布局入门及踩坑

1.概述：

本文是自己css学习中一些布局方法的小结。包括一些必要的基础知识，以及常见布局之：左右布局、左中右布局、自适应等，其他的布局方法后期会陆续更新。垂直居中、水平居中方法。中途会分享一些css的小技巧、学习资料。

2.常用布局：

• 左右布局：
  左右布局又称为两栏布局，一栏作为主体，可自适应，另一栏则做其他部分。

float方法

float方法：1.给需要浮动的元素添加float:left。 2.给这些元素的父元素添加clearfix的类，并利用伪类清除浮动。

inline-block方法

注意div位置

子元素为inline-block

效果

上面是基本写法，但会有一个隐蔽的问题导致inline-block元素不在一个水平线上。

如：

第二个div和第一个div代码之间如果有“回车”。那么浏览器将会把“回车”渲染成一个空格，chrome上是4px，加入css代码后：

不在同一行

以上的办法是相邻div之间不要换行，这样就不会有隐藏的空隙。这是一个比较常用的方法，类似的写法还有：

核心思想就是：第二个标签头部<和第一个标签尾部>在同一行即可。有时候html标签使批量生成的，不一定是这种格式，那么还有其他方法。

父元素设置font-size为0,inline-block元素上再设置字体

设置负的margin，测试在chrome下正好抵消空隙，但这个办法需要根据字体来设置不同的margin。

absolute绝对定位方法:

效果

使用grid布局：

效果

• 左中右布局：

使用两边float和中间absolute：

效果

float加上一定margin：

效果同上

元素的水平居中

1.block元素：

确定宽度300px的块元素

效果

不定宽的块元素

效果

元素的垂直居中

1.height=line-height

效果

2.利用vertical:align以及:after占位

效果

3.display:table-cell

效果

4.display:flex

效果同上

5.绝对定位和负margin

效果

6.css3的transform属性

效果

3.一些体会:

• css的学习需要不断地进行尝试，要利用好浏览器开发者工具、截图取色工具等。
• 在没有把握的情况下尝试先加1px的border，或者给某些元素设置背景色等，有助于对结构更好地把握。
• 一些属性的数值问题，可以先在开发者工具中快速调试，满意后再写入css代码。
• 站在巨人的肩膀上，这里有一些不错的学习资源：
  1.不懂的问题首先在你的搜索引擎搜索 xxx MDN 、xxx 阮一峰 、xxx 张鑫旭等等，然后选择一些其他人气高的blog。
  2.https://css-tricks.com/ 一些css的技巧
  3.http://css3generator.com/ 在线生成css3代码