美文网首页
溢出、文档流和浮动

溢出、文档流和浮动

作者: 骚X | 来源:发表于2018-11-21 22:31 被阅读0次

1.溢出

1.visible默认值 内容不会被修剪,会呈现现在元素框之外.
2.hidden内容会被修剪,并且其余内容是不可见的.
3.scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容.
4.auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容.


  .box{
    width:100px;
    height:100px;
    backgroud-color:red;
    overflow:visible;
}

文档流

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

浮动

.box{
      width:100px;
      height:100px;
      background-color:red;
      float:left;
    }

1.left元素向左浮动.
2.right元素向右浮动.
3.none默认值.元素不浮动,并会显示在文本中出现的位置.

内联浮动

所有的内联元素如果脱离文档流就会变成块元素,内联元素不支持宽和高,如果变成块元素就会生效。

相关文章

网友评论

      本文标题:溢出、文档流和浮动

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