CSS第四节(第八天)

1.浮动原理

2.内容溢出处理



1.浮动原理

标准流

*从上往下排布,从左往右排布

浮动特性

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

*浮动的元素A排列位置,跟上一个元素(块级)有关系,如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的定不会和上一个元素的底部对齐

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

*浮动具有破坏性,元素浮动性,破坏来源于正常流布局,造成内容塌陷

2.内容溢出

overflow属性的常用值

*visible:内容不会被修剪,会呈现在元素元素框之外

*hideen:溢出内容会被修剪,并且被修剪的内容是不可见的

*auto:在需要的时候显示滚动条,即自适应所要显示的内容

*scroll:溢出内容会被修剪,且浏览器会始终显示滚动条

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • CSS第四节 浮动 标准流 标准流就是浏览器默认布局的方式,也就是从上往下,从左向右的默认的排班布局的方式。 浮动...
    金妮ing阅读 504评论 0 0
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,866评论 0 6
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,508评论 0 5
  • 2017.03.29 周三 多云 1.第一次为自己和老公买了一份商业保险。这些年,我和老公从来没买过商业保...
    童童妈DX阅读 243评论 0 2