CSS笔记｜ 青训营笔记

codeclode
98 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天 uTools_1658728250141.png

CSS定义及其使用

  • 是啥子：Cascading style sheets 层叠样式表

  • 用来定义页面元素的样式

  • 语法：xxx{样式名:样式属性};

  • 引入：

    方式实现
    外链link rel href...
    嵌入style标签内直接写
    内联p style="..."

  • 页面加载css时不会阻塞dom树的解析，但是会阻塞页面的渲染（这里我只是提一嘴，具体可以搜索浏览器工作原理或页面加载过程）。

CSS选择器

  • 选择器是CSS很重要的一环，告诉浏览器样式要对那些标签生效。

  • 统配符：*

  • id选择器.id{}，类选择器.class{}，标签选择器type{}

  • 属性选择器：[attr]\[attr=xxx]\[attr|xxx]\[attr^=xxx]\[attr*=xxx]\[attr$=xxx]

  • 伪类选择器：状态伪类（比如a标签被点击）和结构性伪类（比如xxx的第1个孩子）

  • 组合：~（通用兄弟）、+（相邻兄弟）、空格（后代）、>（儿子）、.（交集）、,（并集）

  • 优先级：注意这是对于同一个属性而言的

    类型等级
    内联1000
    id100
    类、伪类、属性10
    标签和伪类1
    !important无限

  • 继承：某些属性会继承（一般是文字），而有些不会继承（盒模型相关的），可以通过inherit显示指定要继承。

属性们

  • RGB(red,green,blue)每个值0~255
  • HSL(H,S,L),H->色相,S->饱和度,L->亮度
  • 透明度alpha（rgba、hsla）
  • font-family
  • font-size：px->像素、em或%->相对父亲字体大小
  • font-style：斜体
  • font-weight：粗细
  • line-height：两行文字基线距离
  • white-space：normal->合并空格、nowrap->强制不换行、pre->保留一切、pre-wrap->行内现实不了自动换行且保留空格、pre-line->合并空格但保留换行

Layout——排版和布局

  • 确定内容的大小和位置的算法

  • 根据元素、容器、兄弟节点和内容来计算

  • 三种布局：常规流（文档流行、块、表格、flex、grid）、浮动（float）、绝对定位（absolute、fixed）

  • 盒模型：width、content box、border box

  • 一般地（content box）：width=content宽度

  • 而在borderbox中：widh=content+2*padding+2*border

  • margin的塌陷问题

  • overflow：对于限定了宽高的元素，设置此属性来决定内容超越的行为

  • IFC：只包含行级盒子的内容会创建一个IFC，IFC内，盒子水平排放，且避开浮动元素

  • BFC：创建方式：flex和grid的子项目、根元素、overflow不是visible的元素、display：flow-root的元素、浮动、绝对定位和inline-block

  • BFC的规则：从上到下摆放、margin合并、内部盒子margin不与外部合并、不会和浮动元素重叠

  • flex：justify-content：主轴对齐方式、align-items：交叉轴对齐方式、align-content：有多跟轴线时他们的对齐方式

  • flex的响应式：flex、flex-grow、flex-basic、flex-shrink

  • grid：二维方向布局，这里注意fr指定占比，此处内容繁琐，其他内容查文档，非常强大。

  • float：为了实现文字环绕而生，float之后，脱离文档流，但文字会绕开float。

  • 绝对定位：position，注意static和relative（仍在原来的位置占位）不脱离文档流

  • 通过top、left等偏移。

avatar
文章
阅读
粉丝