小李带你玩转html—06

标准文档流与浮动

  • 文字必须在div渲染之后写

在这里插入图片描述
在这里插入图片描述

  • 标准文档流都是高低不齐,底边对齐
    在这里插入图片描述

在这里插入图片描述

  • 块级元素和行内元素划分
    标准文档流将我们的html标签分成了块级标签和行内标签
    块级标签:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    特点:①自己独占一行②可以设置宽高③如果嵌套的关系里不设置宽高会自动继承父盒子的宽高
    在这里插入图片描述

行内标签:span buis strong em ins del。
特点:①会自动在本行内补齐②不可以设置宽高但是可以设置内边距和外边距③行内标签的宽高只能用内容撑开不能自动继承父级标签的宽高
在这里插入图片描述

  • 有一个属性可以让块级元素和行内元素进行转换
    display(显示模式):块级block,行内inline,行内块inline-block
    在这里插入图片描述
    小结:标准文档流布局还是有局限,脱离标准流三个方法:浮动,绝对定位,固定定位

浮动

让我们的元素在某一个方向并排排列
—属性值:left 和right

加入浮动效果之前p标签由于和div标签高度一样所以会溢出
在这里插入图片描述
加入左浮动效果之后
在这里插入图片描述
在这里插入图片描述
加入右浮动效果之后
在这里插入图片描述
在这里插入图片描述
同一盒子里子元素可以有不同方向的浮动
在这里插入图片描述
在这里插入图片描述

当子div的宽度超过父盒子的宽度时它会逐级往上找
在这里插入图片描述
在这里插入图片描述

  • 用浮动来制作表格
    在这里插入图片描述
    在这里插入图片描述
  • 浮动会消除塌陷
    加入浮动前,margin塌陷还会存在
    在这里插入图片描述

在这里插入图片描述
加入浮动之后
在这里插入图片描述
在这里插入图片描述

  • 浮动会把位置让出来
    加入浮动前
    在这里插入图片描述

在这里插入图片描述
加入浮动之后
在这里插入图片描述
在这里插入图片描述

  • 浮动会有文字围绕效果
    在这里插入图片描述
    在这里插入图片描述
  • 浮动存在的问题
    浮动的元素不能撑开父级
    在这里插入图片描述
    在这里插入图片描述
    会影响后边的元素
    在这里插入图片描述
    在这里插入图片描述
    怎么解决这个问题呢?具体还得使用清除浮动样式
    ①给父盒子加高度
    在这里插入图片描述
    在这里插入图片描述
    但是这个问题还是解决的不够彻底,高度必须自己去设置而不能够自适应
    ②clear属性值:left right both
    clear清除自身所受其他元素浮动影响
    left:清除受到的左浮动影响
    right:清除受到的右浮动影响
    both:全部清除

    在这里插入图片描述
    在这里插入图片描述
    复合子还是不能被子盒子撑开
  • 重点来了,三个方法
  • 隔墙法-----外墙法
    在相互影响的两个元素之间加一堵墙,加上clear属性
    在这里插入图片描述
    在这里插入图片描述
  • 隔墙法-----内墙法
    将清除浮动的墙放在父盒子的内部最后,只要有浮动,就往盒子内部加一堵墙
    在这里插入图片描述
    在这里插入图片描述
    内墙法解决了三个问题:①高度自适应②浮动元素之间的影响③margin失效
  • overflow-------hidden
    盒子内部的元素可以设置溢出模式,隐藏,自动显示
    属性值:hidden溢出隐藏 auto溢出滚动
    在这里插入图片描述
    在这里插入图片描述
    加入hidden
    在这里插入图片描述
    在这里插入图片描述
    加入auto
    在这里插入图片描述
    在这里插入图片描述
    还是之前的例子,哪个盒子有浮动哪个盒子加overflow
    在这里插入图片描述
    在这里插入图片描述
    效果也是可以出来的
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页