重新梳理CSS

晓祄
112 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

每当项目不忙时，我会选择学一些东西，在我的学习文件夹里有各种前端技术、产品管理、项目管理、知识产权（工作需要）、销售、制造业（公司主业务）等，总之，特别杂。但要说有哪个技术是精通的，仔细想想一个都没有。所以，我暂时不再忙着扩展知识面，而是把已学过的东西进行巩固、梳理、深化。今天就先从CSS开始。

image.png

CSS——层叠样式表

属性基础

  • 选择器
  • 属性和属性值

选择器

常用选择器

  • 元素选择器，如p:{}
  • id选择器，如#my:{}
  • 类选择器，如.my:{}
  • 通配选择器，如*:{}

属性选择器

匹配某一个或某一类属性进行样式修改，语法：[属性] 五种匹配方式

  • [属性=属性值] ，某属性的属性值等于，如：[type="password"]
  • [属性^=属性值] ，某属性的属性值开头等于，如：[href^="#"]
  • [属性$=属性值] ，某属性的属性值结尾等于，如： [href$=".jpg"]
  • [属性*=属性值] ，包含部分属性名的属性的属性值等于，如：[data-*=foo]
  • [属性~=属性值]，属性值为空格符分割的多值包含某一值，如：[data-info~="image"]

伪类选择器

状态性伪类

  • a:link，超链接独有
  • a:visited，超链接独有
  • :hover
  • :active
  • :focus

结构性伪类

  • nth-child
  • nth-of-type
    二者均为查找父元素下的子元素，区别在于nth-of-type查找的是第n个该类型元素；nth-child查找的是第n个子元素且是该类型，若不是该类型则查找为空。

组合选择器

  • 直接组合： AB，满足A同时满足B，如div.main
  • 后代组合： A B，选中B，如果它是A的后代， 如p .link
  • 亲子组合： A>B，选中B，如果它是A的子元素， 如p>.link
  • 兄弟选择器： A~B，选中B，如果它在A后且和A同级，如h2~p
  • 相邻选择器： A+B，选中B，如果它紧跟在A后面，如h2+p

选择器优先级

选择器优先级按特异度排序。

  • !import 特异度10000
  • 内联选择器 特异度1000
  • id选择器 特异度100
  • 类选择器 特异度10
  • 属性选择器 特异度10
  • 伪类 特异度10
  • 元素选择器 特异度1
  • 通配符选择器 特异度0

属性和属性值

颜色

几种颜色书写方式：

  • RGB rgb(255,255,255) #ffffff
  • HSL hsl(0,100%,50%)
    alpha透明度：
  • #ffffff12
  • rgba(0,0,0,0.5)
  • hsla(0,100%,50%,0.5)

字体

font-family 使用,分隔多个字体
为避免有浏览器不支持的字体无法正常显示，通常在通配选择器里添加通用字体

其它字体样式：

  • font-size：尺寸
  • font-style：样式
  • font-weight：字重，100-900，其中normal400，bold700
  • line-height：行高
  • text-align：对齐方式，最后一行不生效
  • letter-space：字间距
  • white-space：解决浏览器默认多个空格合并问题

布局layout

  • 布局相关技术：常规流（文档流）、浮动、绝对定位
  • 常规流：块级、行级、表格布局、FlexBox、Grid布局

盒模型

  • width
  • height：容器有指定高度时，百分数才能生效。
  • padding：百分数相对于容器的宽度
  • border：包含3属性4方向，当宽高设为0时，可通过边框画三角形
  • margin：百分数相对于容器的宽度
    • margin:auto水平居中
    • margin collapse在垂直方向上取较大的边距，而不是相加
      content-box与border-box border-box包含border和padding在内，实际项目中使用border-box比较多 overflow

行级和块级的区别

块级行级
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用
块级元素行级元素
生成块级盒子生成行级盒子；内容分散在多个行盒中
body、article、div、main、section、h1-6、p、ul、li等span、em、strong、cite、code等
dislay:blockdispaly:inline

IFC行级排版上下文

排版规则

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动（float）元素 overflow-wrap:break-word

BFC块级排版上下文

排版规则

  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠

Flex Box

  • 一种新的排版上下文
  • 它可以控制子级盒子的：
    • 摆放的流向（↑↓←→）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行

Grid布局：网格

Grid布局是二维方向的布局。Flex布局是单一方向的布局。
非常强大！

float浮动

最初作用文字环绕，现在因有flex和Grid，很少使用float做布局，仍用作文字环绕。

position属性

  • static：在常规流里。默认值，非定位元素
  • relative：在常规流里
  • absolute：不在常规流里
  • fixed：不在常规流里
  • sticky: 粘性定位

本文只简单做了一下梳理，CSS的知识有很多，更多更详细的可以查看MDN和W3C。

avatar
文章
阅读
粉丝