20220721 HTML水平排列块元素的结构和BFC

158 阅读1分钟

补充-元素的可见性

一、visibility:

  • visible——默认为,元素可见
  • hidden——隐藏元素,但空间还是会被占用

二、高度设为0,但内容还在,因为内容溢出了,所有可以使用溢出隐藏

三、设置元素透明

  • opacity:0-1(取值范围)

BFC(块级元素的格式化环境):

通过设置一些样式来解决出现的问题

BFC解决的问题:

  • 浮动影响问题
  • 高度塌陷问题
  • 外边距重叠问题

解决问题方法:

  • 通过设置伪元素解决
  • 给父元素设置浮动,缺点:影响父元素外的其他元素布局
  • 给父元素设置为行内块,缺点:影响元素布局,父元素宽度丢失
  • 给父元素的overflow设置为非visible,缺点:占用overflow样式

开发规范

所有页面都需要写一个根容器把他的内容包裹住

水平排列块元素的结构

方法1:

  • 把需要并排排列的块元素浮动起来
  • 用伪元素解决父元素高度塌陷的问题
  • 计算父元素的宽度
  • 在使用margin:0 auto把他居中

方法2:

  • 把需要并排排列的块元素浮动起来

  • 把父元素变成行内块解决父元素高度塌陷的问题

  • 给父元素的父元素设置字体居中

虎哥小知识

没有活了拉跨了😭😭😭