CSS第四节(1)

1、css标准流排版特点及流式布局

标准流式布局:从左到右 从上到下

2、css浮动的原理

浮动不影响标准流布局,影响文字排版

float:left;

3、css浮动的特性及高度塌陷原理

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

(2)浮动元素A的位置和上一个元素(块级)有关系,如果上一个元素有浮动,则浮动的A元素的顶部会和上一个元素顶部对齐;如果上一个元素是标准流,则浮动的A元素的顶部就会和上一个元素的 底部对齐。

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

(4)浮动元素如果没有设置宽高,元素会根据内容设置高度

子元素都浮动,父元素没有设置高度,父元素高度会出现塌陷,就是浮动的破坏性

4、css溢出处理和解决高度塌陷的方式

解决父元素塌陷:

overflow:hidden;/*超出的部分进行隐藏*/

选择器{overflow:属性值;}

visible 默认超出显示在下方

hidden 超出部分隐藏

scroll 左右 上下滚动条

auto 根据内容选择显示上下或者左右滚动条

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,697评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,933评论 0 6
  • CSS第四节 浮动 标准流 标准流就是浏览器默认布局的方式,也就是从上往下,从左向右的默认的排班布局的方式。 浮动...
    金妮ing阅读 3,365评论 0 0
  • 这里陆陆续续添加一些自己总结或借鉴的erlang代码规约 [强制] [推荐] [建议] =============...
    kamfon阅读 5,876评论 0 0
  • 早上简单的分开了 中午回家和家人吃完饭 坐动车回到宜昌 晚上开会(压力突然蛮大的) 回来又不习惯了!
    LovingTravel阅读 1,103评论 0 0

友情链接更多精彩内容