CSS学习

认真专注自信自律
210 阅读7分钟

CSS基础拾遗（核心知识、常见需求）-大海我来了 掘金

  • 核心概念和知识点

  • 语法

    • 声明：键值对
    • 声明块：{}包裹
    • 选择器：作用到对应的HTML元素
    • CSS规则集：选择器和声明块
    • 注释：单行和多行

  • 规则

    • 字符集，导入其他的外部样式表、字体等

    • namespace：必须考虑XML命名空间

    • media：满足媒体查询条件则规则生效

    • page：描述打印文档时布局变化

    • font-face：描述下载的外部字体

    • keyframes：描述CSS动画关键帧

    • document：文档样式表满足给定条件则条件规则组里的规则生效

    • charset：定义字符集（密码本）utf-8

    • import：引入外部样式表

      • link标签除了导入css，还可以导入图片，脚本和字体，import只能导入css（还有js）

    • supports：查询特定CSS是否生效，结合not、and和or操作符

  • 层叠性

    • 用户代理样式表中的声明：浏览器默认样式
    • 作用样式表的常规声明：web开发人员设置样式
    • 作者样式表中的！important声明
    • 结合CSS选择器的优先级和继承性理解

  • 选择器

    • 标签选择器h1
    • 类选择器.checked
    • ID选择器#picker
    • 通配符选择器*
    • 属性选择器[attr]
    • 组合选择器A B、A+B、A>B

  • 伪类

    • 条件伪类

    • 行为伪类：:hover、：acitve

    • 状态伪类：：target、：link、：focus、：checked

    • 结构伪类：：nth-child(n)、：first-child、：nth-of-type(n)

    • 伪元素：::before、::after

    • 优先级：

      • ！important 1 0 0 0 0
      • 内联样式 0 1 0 0 0
      • ID选择器 0 0 1 0 0
      • 类选择器 0 0 0 1 0
      • 元素选择器 0 0 0 0 1
      • 通配符、继承 0 0 0 0 0

  • 继承性

    • 子元素继承父元素对应属性计算后的值，不会影响到页面布局的属性存在默认继承行为

    • 字体相关：font-size

    • 文本相关：text-align、color

    • 列表相关：list-style

    • 其他属性：visibility、cursor

    • 其他默认不继承的属性也可以通过属性值控制继承行为

      • inherit
      • initial
      • unset
      • revert

  • 文档流

    • 内容从左到右、从上到下排列显示，行列组成，流式布局，文档流

    • 块级元素占满整行，块级盒子从上到下排列

    • 内联元素一行里一列一列排列

    • 脱离文档流：其他节点忽略该节点并填补

      • 两种方式让元素脱离文档流
      • 浮动：float（清除浮动）
      • 绝对定位absolute和相对定位relative

  • 盒模型

    • 任何元素都可以看成是一个盒子
    • 内容content、内边距padding、边框border、外边距margin
    • 标准盒模型（设置宽度为内容，实际尺寸为内容+内边距+边框）（高版本浏览器）
    • IE盒模型（设置宽度即为实际尺寸内容+内边距+边框）
    • box-sizing：content-box（标准盒模型）、border-box（IE盒模型）

  • 视觉格式化模型visual formatting model

    • 规定盒子怎样放置到页面中，依赖到盒子尺寸、盒子类型、定位方案、兄弟元素或者子元素
    • 盒子类型由display决定：outer display type和inner display type
    • outer display type：block-level box和inline-level box
    • block：占满一行，width和height生效，padding和margin生效
    • inline ：不占一行，从左到右自动换行，width和height不会生效，padding和margin不会生效
    • inline-block：不占一行，width和height生效，padding和margin生效
    • inner display type：block container、flex container等

  • 格式化上下文Formatting Context

    • 页面中的一块渲染区域，规定内部子元素如何排版及相互作用

    • BFC\IFC\FFC\GFC

    • BFC块格式化上下文

      • 只有块盒子参与，规定内部如何布局，与区域外部不相干
      • 规则：1、垂直方向一个接一个放置；2、垂直距离由margin决定，同一个BFC的相邻盒子margin发生重叠；3、元素的margin左边，与包含块border的左边相接触；4、BFC区域不会与float盒子重叠；5、BFC是页面上一个隔离的独立容器，容器里面的元素不会影响到外面的元素，反之也如此；6、计算BFC高度时浮动元素也参与计算
      • 如何创建BFC：1、根元素html；2、overflow不为visible；3、设置浮动：float不为none；4、设置定位：position为absolute或fixed；5、定义成块级的非块级元素：display：inline-block/flex/table-cell
      • 应用场景：1、自适应两栏布局：侧边栏固定宽度且左浮动，右侧内容自适应；overflow：auto；2、清除内部浮动：.clearfix::before { content: ‘’; display:table; clear: both }；3、防止垂直margin合并：包裹容器overflow：hidden

    • IFC：块级元素中仅包含内联级别元素

      • text-align：center 水平居中
      • vertical-align：middle 垂直居中

  • 层叠上下文

    • HTML元素依据自己定义的属性优先级在Z轴按一定顺序排开

    • z-index：

      • 配合定位position使用
      • 显示孙旭受层叠等级和层叠顺序影响

    • 如何产生层叠上下文：

      • html文档根元素
      • position

    • 层叠等级

    • 层叠顺序

      • z-index<0
      • block
      • 浮动子节点
      • inline/inline-block
      • z-index: 0
      • z-index>0

  • 值和单位

    • CSS的声明由属性和值组成

    • 值有许多类型：

      • 数值
      • 百分比
      • 颜色
      • 坐标位置
      • 函数

    • px

      • CSS中的像素
      • 设备像素（屏幕分辨率）
      • 设备像素比：1个CSS像素等于几个物理像素
      • 像素密度DPI或者PPI
      • 设备独立像素DIP

    • em

      • 相对长度单位
      • 在font-size中相对于父元素的大小2em，字体乘以2
      • 其他属性中使用是相对于自身的字体大小

    • rem

      • 和em一样是相对长度单位，不过rem相对的是HTML的根元素html
      • 750px宽设计图，基于375*812来写页面
      • 从设计图量出来的尺寸除以100即可得到当前元素的rem值

    • vw/vh

      • 分别相对于屏幕视口宽度和高度而言的长度单位
      • 1vw=视口宽度均分成100份中1份的长度
      • 1vh=视口高度均分成100份中1份的长度
      • 多了一种写自适应布局的方案，不再局限于rem
      • vmim：vw和vh中值较小的
      • vmax：vw和vh中值较大的

  • 颜色体系

    • 颜色关键字

      • black、silver、gray、white、maroon

    • transparent关键字

      • 完全透明的颜色，rgba(0,0,0,0)的简写

      • 实现三角形

        • 元素宽高为0，边框粗细填充内容
        • 哪条边需要就加上颜色，不需要则用transparent

      • 移动端增大点击区域：边框增大按钮的点击区域

    • currentColor关键字

    • RGB颜色

      • 十六进制符号 #f00
      • 函数符rgb(255,0,0)\rgba(255,0,0,.2)

    • HSL颜色(色相、饱和度、亮度、不透明度）

  • 媒体查询

    • link标签上media属性：all、print、screen、speech
    • 艾特media让css规则在特性条件下生效：and not only

  • 常见需求

  • 自定义属性

      • -x的格式声明

  • 1px方案

    • Retina显示屏1px边框看起来粗，细化处理

    • 伪元素和transform实现的相对完美的解决方案

      • 原理：将原来元素的border去掉，利用伪元素重做border，transform的scale缩小一半，原先元素相对定位，新的border绝对定位，子绝父相
      • 只设置单条底部边框
      • 同时设置4条边框

  • 清除浮动

    • 解决浮动造成的父元素高度坍塌问题
    • .clearfix::after {content: ‘’; display: block; clear:both}
    • 伪元素在父元素最后生成内容为空的块级元素，通过clear将伪元素移动到它之前的浮动元素的后面

  • 清除浏览器默认样式

    • reset.css和normalize.css

  • 长文本处理

    • 字符太长溢出了容器：默认
    • 字符超出部分换行：overflow-wrap：break-word
    • 字符超出位置使用连字符：hyphens：auto
    • 单行文本超出省略：white-space：nowrap；overflow：hidden；text-overflow：ellipsis
    • 多行文本超出省略：overflow：hidden；text-overflow：ellipsis；。。。

  • 水平垂直居中

    • 单行文本、inline或者inline-block元素

      • 父级块元素水平居中：text-align：center
      • 垂直居中：上下内边距一致；height和line-height一致

    • 固定宽高的块级盒子

      • 1、子绝父相：left和top50%，margin：-1/2height 0 0 -1/2height
      • 2、子绝父相：left、right、top、bottom为0，margin为auto

    • 不固定宽高的块级盒子

      • 1、子绝父相：left和top50%，transform：translate（-50%，-50%）
      • 2、flex：父元素dispaly：flex；jusify-content：center；align-items：center

  • 常用布局

avatar
文章
阅读
粉丝