美文网首页
前端文档 浮动

前端文档 浮动

作者: 九妄_b2a1 | 来源:发表于2018-11-29 23:21 被阅读0次
内联元素的盒模型:

可以设置水平方向的内边距和边框
也支持水平方向的外边距但不支持垂直的外边距
内联元素不支持宽和高

visibility和display:

display:none ;(此元素不会显示)
display:block;(将内联元素转成块元素)
visibility:hidden;(元素会消失)

visibility+hidden和display+none的区别:

使用display+none,元素消失后不会再占用面积,而visibility+hidden,元素消失后还会占用面积.
overflow(溢出)
超出父元素的内容叫溢出的内容
如何处理溢出的内容:hidden修剪,并且其余内容使不可见
scroll:滚动条
auto:自动添加滚动条

文档流:

最基础的一层,文档就是网页,每一个网页就是一个文档
块元素在文档流中如果设置宽和高就默认为设置的宽和高,设置padding会影响盒子的大小,如果没设置宽就默认父元素宽的100%,高的话是由内容决定,内容有多高,它就有多高
内联元素只占自身的宽和高

浮动:

可选值:float:none不浮动
float:left左浮动
float:right右浮动
内联浮动
所有的内联元素如果脱离文档流就会变成块元素,内联元素是不支持宽和高,如果变成块元素就会生效。

高度塌陷:

本来父元素是由子元素抻开的,子元素设置了浮动之后,子元素就脱离文档流了,父元素无法抻开,就会形成高度塌陷
解决方法
BFC
父元素的垂直外边距不会和子元素重叠
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素可以包含浮动的子元素
兼容IE用haslayout zom:1

相关文章

  • 前端文档 浮动

    内联元素的盒模型: 可以设置水平方向的内边距和边框也支持水平方向的外边距但不支持垂直的外边距内联元素不支持宽和高 ...

  • 前端第五天

    前端第五天 目录 文档流 浮动布局 清除浮动 流式布局 定位布局应用 相对定位 绝对定位 固定定位 一、文档流 1...

  • 前端开发之清浮动(BFC)

    BFC就是清浮动,用来处理浮动元素脱离文档流的问题。今天在此记录下清理浮动的几种方法,对前端开发中浮动不清楚的可以...

  • 清除浮动的原理详解

    清除浮动原因 前端布局用的最多的是float:脱离文档流,浮动起来。浮动的框可以左右移动,直到遇到另一个浮动框或者...

  • 前端开发--CSS篇(一)

    本人从事一年前端开发,分享一些干货给热爱前端开发的小伙伴! 一.CSS部分(浮动原则) 1.浮动元素会从文档正常流...

  • 前端,溢出、文档流和浮动

    1.overflow(溢出)visible 默认值。内容不会被修剪,会呈现在元素框之外。hidden 内容会被修剪...

  • 关于清浮动的几种方法及注意事项

    浮动,前端开发人员进行css布局的必备神器,但使用浮动会使元素脱离正常文档流,给我们造成一些不想要的效果,此...

  • 前端[溢出文档流和浮动]

    1.overflow(溢出)visible 默认值。内容不会被修剪,会呈现在元素框之外。hidden 内容会被修剪...

  • 溢出,文档流和内联浮动

    overflow(溢出) 文档流 浮动 内联浮动

  • CSS布局与居中

    布局 随着前端的发展,现有样式(文档流、浮动、定位)已经不能满足人们的需求,人们需要:导航栏+内容导航栏+内容+广...

网友评论

      本文标题:前端文档 浮动

      本文链接:https://www.haomeiwen.com/subject/hdnqcqtx.html