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元素:
效果
效果
元素的垂直居中
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代码
网友评论