美文网首页
CSS布局入门及踩坑

CSS布局入门及踩坑

作者: qh0814 | 来源:发表于2018-10-21 10:54 被阅读0次

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代码

相关文章

  • CSS布局入门及踩坑

    1.概述: 本文是自己css学习中一些布局方法的小结。包括一些必要的基础知识,以及常见布局之:左右布局、左中右布局...

  • Weex入门踩坑记录

    Weex入门踩坑记录

  • CSS布局

    CSS入门(3) CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+...

  • 快应用踩坑

    快应用踩坑 css的坑一大堆很多属性不能用,只能用flex布局,position几乎不能用,只能在html结构修改...

  • 浅析 CSS 布局与定位

    浅析 CSS 布局与定位 较多内容参考:CSS布局与定位入门 一、左右布局 float + clearfix块级元...

  • div+css布局入门

    div+css布局入门 这是在网页设计师上看到的一篇文章,很适合入门div+css布局的人看,转了过来收藏,hoh...

  • 前段书籍

    《CSS网站布局实录》——国产CSS2入门书,有些技巧已经淘汰,但仍不失为最好的CSS入门教程。 《无懈可击的We...

  • CSS踩坑

    CSS 踩坑 父级元素transform属性会使子元素的fixed定位失效。 具体参考

  • Bugly热更新集成及踩坑

    Bugly热更新集成及踩坑

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

网友评论

      本文标题:CSS布局入门及踩坑

      本文链接:https://www.haomeiwen.com/subject/kdimzftx.html