CSS学习笔记(结构伪类选择器,伪元素,浮动)
本文最后更新于 99 天前,其中的信息可能已经有所发展或是发生改变。

结构伪类选择器

1.作用与优势

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

选择器:

  1. E:first-child(),匹配父元素第一个子元素,且是E元素
  2. E:last-child(),匹配父元素最后一个子元素,
  3. E:nth-child(),匹配父元素中第n个元素
  4. E:nth-last-child(),匹配父元素中倒数第n个元素
  5. 可以设置n达到特殊功能,偶数:2n,奇数:2n+1,找到前五个:-n+5,找到从第五个往后:n+5
  6. nth-of-type(n),只在父元素中的同类型元素(E)子元素范围中,匹配第n个

伪元素

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

区别:

  1. 元素:HTML设置的标签
  2. 伪元素:由CSS模拟出的标签效果

种类:

::before 在父元素内容的最前添加一个伪元素

::after 在父元素内容的最后添加一个伪元素

注意点:

  1. 必须设置content属性才能生效,content里面是他的内容
  2. 伪元素默认是行内元素,如果要设置宽高需要转换显示方式

标准流

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

常见标准流排版规则:

  1. 块级元素:从上往下,垂直布局,独占一行
  2. 行内元素或者行内块元素:从左往右,水平布局,空间不够自动拆行

浮动

1.早期作用

用于图文环绕

2.现在的作用

完成网页布局,让垂直布局的盒子变成水平布局的效果。

浮动的代码

属性名:float

属性值:left,right

浮动的特点

  1. 脱离标准流
  2. 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
  3. 浮动找浮动,下一个浮动会在上一个浮动元素左右浮动
  4. 浮动元素会受到上面元素边界的影响
  5. 浮动元素有特殊的显示效果
    • 一行可以显示多个
    • 可以设置宽和高
  • 注意:浮动元素不能通过text-align:center或者margin:0 auto 居中
文章:CSS学习笔记(结构伪类选择器,伪元素,浮动)
作者:Ceiling
希望这篇文章能帮到你
暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇