第十二天

1、html:流式布局

标准流:从左向右,从上往下(若是图片则直接去下一行,若是文字则超出部分到下行进行排列)

2、浮动的本质:解决图片和文字并排的布局的样式。

文字浮动后,将不占文档流,但是会影响标准流中文本的排版。下一个块会直接占用此块的位置。

3、浮动的特性(重要)

(1)浮动脱离标准流,不占位置,但会影响标准流,浮动只有左右浮动。

(2)浮动的元素A排列位置,跟上一个元素有关系。如果上一个元素有浮动则A元素顶部回合上一个元素顶部对齐,如果上一个元素是标准流,则A元素的顶部回合上一个元素的底部对齐。

(3)一个父盒子里面的子盒子,如果其中一个子集有浮动的,则其他子集都要浮动,这样才能一行显示。

(4)浮动根据元素书写的位置来显示相应的浮动。

(5)元素添加浮动后,如果没有设置宽高,元素会具有行内块元素的特性,元素的大小完全取决于定义的大写或者默认的内容多少,也就是具有了包裹性。

(6)浮动具有破坏性,元素浮动后,破坏原来正常的流布局,造成内容塌陷。

4、overflow:auto  上下的滚动条 /scoll是左右滚动条

补充:BFC

overflow可以触发元素的BFC。可以让元素具有独立的空间和权限。 在bfc内多有的元素依据父元素进行排版和布局,所有父元素具有了包裹性,这就是解决空间塌陷的原理。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,713评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,977评论 0 6
  • 浮动定位 BFC 边距合并 浮动元素 div的顺序是HTML代码中div的顺序决定的。 浮动可以理解为让某个div...
    nianxiaoge阅读 4,035评论 0 0
  • 对于iOS开发的同学们,iOS系统除了NSLog打印API之外,没有提供任何log规范。因此,在实际iOS客户端开...
    kmplayer阅读 5,254评论 1 3
  • 文 by 易乓乓 那天是夜晚时分,回到这座生活了不太久的城市。一到小公寓,走到窗边往外看去,月夜中,排排的高楼大厦...
    易乓乓阅读 4,019评论 6 15

友情链接更多精彩内容