前端入门:First day 如何实现一个页面

某人最近要入前端的坑,应TA要求,今天先说:一个页面,应该从何下手?以下全是个人见解,如有描述不准确的地方,欢迎指正,大家共同学习。

首先,拿到一个页面,应该整体分析一下它的布局,比如:能分成上中下or左中右or上中(中又分为:左中右)下等,先拆大块,分好之后,再去细化每个大块里的布局。

拆完以后呢?当然是把刚刚拆的块用代码堆起来啊。这时候得知道两个规则:BFC和IFC。根据需要选择正确的规则,实现规范的页面。比如只有块级元素,此时用BFC;块级元素中包含内联元素,此时遵守IFC。

啥是BFC?应用于块级元素的规则。

  • 同一个BFC中,盒子布局是从包含容器顶部开始的;
  • 每个盒子的左边界都要紧靠包含容器的左边界(所以,块级元素都是单独成行);
  • 相邻块级元素垂直margin重叠;容器内外相互隔绝,互不影响。

啥是IFC?不用多说

  • 盒子水平一个接一个排列,垂直方向对齐方式:底部、顶部or基线(默认);
  • 一个或多个内联盒子组成一个行框,行框的宽呢由它包含的内联盒子决定(也受浮动的影响);
  • 一个行框一行放不下内联盒子的时候,就会在垂直方向再生产新的行框,上下一个挨着一个,但是不会重叠;
  • 内联盒子高小于行框的高时,垂直方向对齐方式由vertical-align决定;
  • 多个内联盒子宽小于包含它们的行框时,水平方向分布由text-align决定。
发布了20 篇原创文章 · 获赞 38 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/jiamiao66/article/details/99765591