浮动标签

结构伪类选择器

作用与优势:

  1. 作用:根据元素在 HTML 中的结构关系查找元素
  2. 优势:减少对于 HTML 中类的依赖,有利于保持代码整洁
  3. 场景:常用于查找某父级选择器中的子元素

选择器:

选择器说明
E:first-child{}匹配父元素中第一个子元素,并且是E元素
E:last-child{}匹配父元素中最后一个子元素,并且是E元素
E:nth-child{}匹配父元素中第n个子元素,并且是E元素
E:nth-last-child{}匹配父元素中倒数第n个子元素,并且是E元素

注意点:

常见的组成公式:

功能公式
偶数2n、even
奇数2n+1、2n-1、odd
找到前五个-n+5
找到从第5个往后n+5

套用方式nth-child(){}

代码:
浮动标签插图
结果:
浮动标签插图1
代码:
浮动标签插图2
结果:
浮动标签插图3

伪元素

伪元素: 一般页面中的非主体内容可以使用伪元素

区别:
  1. 元素: HTML 设置的标签
  2. 伪元素:由 CSS 模拟出的标签效果种类:
伪元素作用
::before在父元素内的最前添加一个伪元素
::after在父元素内容的最后一个伪元素
注意点:
  1. 必须设置 content 属性才能生效
  2. 伪元素默认是行内元素
  3. 空格标签与属性之间不能存在空格
代码:
浮动标签插图4
效果:
浮动标签插图5

标准流

标准流:又称 文档流 ,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素

常见标准流排版规则:
  1. 块级元素:从上往下, 垂直布局 ,独占一行
  2. 行内元素 或 行内块元素:从左往右, 水平布局 ,空间不够自动折行

浮动

浮动的代码

属性名:float

属性值:
属性名效果
left左浮动
right右浮动

浮动特点

  1. 浮动元素会脱离标准流(简称:脱标),在标准流中不占位置 • 相当于从地面飘到了空中
  2. 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
  3. 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素会受到上面元素边界的影响
  5. 浮动元素有特殊的显示效果 • 一行可以显示多个• 可以设置宽高
代码:
浮动标签插图6
演示:
浮动标签插图7

清除浮动

清除浮动的方法 — ① 直接设置父元素高度

特点: • 优点:简单粗暴,方便 • 缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

清除浮动的方法 — ② 额外标签法

操作:

  1. 在父元素 内容 的最后添加一个块级元素
  2. 给添加的块级元素设置 clear:both 特点: • 缺点:会在页面中添加额外的标签,会让页面的 HTML 结构变得复杂

代码

浮动标签插图8

清除前

浮动标签插图9

清除后

浮动标签插图10

清除浮动的方法 — ⑤ 给父元素设置 overflow : hidden

操作:

  1. 直接给父元素设置 overflow : hidden 特点: • 优点:方便
© 版权声明
THE END
喜欢就支持一下吧
点赞12赞赏 分享
评论 抢沙发

请登录后发表评论