前端与CSS | 青训营笔记

ydcgye
66 阅读4分钟

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

什么是CSS

即Cascading Style Sheets，定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

CSS是如何工作的

graph LR
    加载HTML --- 解析HTML
    解析HTML --- 加载CSS
    解析HTML --- 创建DOM树
    加载CSS --- 解析CSS
    解析CSS --- 创建DOM树  
    创建DOM树 --- 展示页面

解析CSS样式时，会添加样式到DOM节点

如何使用CSS

一般使用外链式

// 外链
<link rel='stylesheet' href='/assets/style.css'>
//嵌入
<style>
  li {margin:0;list-style:none;}
  p {margin:lem 0;}
</style>
//内联
<p style='margin:lem 0'>示例</p>

CSS相关概念

1.选择器 Selector

找出页面元素，以便设置样式

  • 通配选择器 *
  • 标签选择器 如p标签
  • id选择器 #id名
  • 类选择器 .类名
  • 属性选择器 如input
    • [属性=特定值] 如input[type='password']，即选定特定属性值的标签

2.伪类 pseudo-classes

不基于标签和属性定位元素

  • 状态性伪类：属于某一种状态下，如链接存在：未访问状态、已访问状态
    • a:link 默认状态
    • a:visited 访问状态下
    • a:hover 悬停状态
    • :focus 获得焦点状态
  • 结构性伪类：根据DOM节点在DOM树的位置选择
    • li:first-child 选择li标签的第一个子元素
    • li:last-child 选择li标签的第一个子元素
名称语法说明示例
直接组合AB满足A同时满过Binput:focus
后代组合AB选中B，如不它是A的子孙nav a
亲子组合A>B选中B，如果它是A的子元素section>p
兄弟选择器A～B选中B，如果它在A后且和A同级h2~p
相邻选择器A+B选中B，如果它紧跟在A后面h2+p

3.字体样式

  • font-size
    • 关键字：small、medium、large
    • 长度：px、em
    • 百分数：相对于父元素字体大小
  • 行高
    • line-height 行间距
    • text-align 文字对齐方式
    • text-indent 首行缩进
    • text-decoration 文本样式
    • white-space 空白符换行展示，nowrap不换行、pre保留原样式

4.块级vs.行级

Block Level BoxInline Level Box
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用
生成块级盒子生成行级盒子、内容分散在多个行(line box)中
body、article、div、main、section、hl-6、p、ul、li等span、em、strong、cite、code等
display:blockdisplay:inline

5.常规流 Normal Flow

  • 根元素浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内（in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文IFC

  • 盒子在一行内水平摆放
  • text-align决定一行盒子水平对齐
  • vertical-align决定一行盒子的垂直对齐
  • 避开浮动元素

块级排版上下文BFC

  • 容器创建BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
  • 盒子从上到下摆放
  • 垂直时margin合并
  • 不会与浮动元素重叠

6.Flex布局

  • 即Flexible Box，意为"弹性布局"，用来为盒状模型提供最大的灵活性
  • flex布局的作用仅在设定display:flex属性的元素以及它的所有子元素上，并且子元素的float、clear和vertical-align属性将失效。其中所设定的元素又称为容器，子元素称为项目
  • 容器的设定存在两根轴，水平的主轴和垂直的交叉轴，默认沿主轴排列

Flex容器

  • flex-flow：flex-direction和flex-wrap的合成形式
  • justify-content：定义了项目在主轴上的对齐方式
  • align-items：定义项目在交叉轴上如何对齐

Flex项目

  • order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
  • flex：flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
  • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性

7.Grid布局

  • grid布局又叫网格布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
  • Flex Box已经是一款很强大的布局，但Flex Box单一方向的流向方式，而Grid是一款二维的布局

需特别记忆

  • ^="#" 表以#开头的内容，$=".jpg" 表以.jpg结尾的内容
  • 颜色HSL（Hue色相 Saturation饱和度 Lightness亮度）与rgb相似，但可通过百分比自由调节颜色的饱和度、亮度等等
  • 两个盒子间都存在margin值，则最终布局两盒子间距离为其margin较大值
avatar
文章
阅读
粉丝