二、CSS学习 | 青训营笔记

摘星_0827
88 阅读4分钟

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

今天是第二课，主要是学习css的相关技术

css是什么?

Cascading Style Sheets

  • 用来定义页面元素样式

  • 设置字体和颜色，

  • 设置位置和大小

  • 添加动画效果

基础代码

h1{ color:white; font-size:14px; }

连接css的三种方式：

外链

<link rel="stylesheet" href="/assets/style.css">

嵌入

<style> l1{ margin:0; list-style:none; } </style>

内嵌

<p style="margin:1em 0"> example content</p>

css如何挂载

1、加载html

2、解析html、加载css

3、创建dom树，挂载css到dom树

4、展示页面

选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配选择器

布局

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

布局相关技术

常规流 ：行级、块级、表格布局、FlexBox 、Grid布局

image.png display属性： block 块级盒子

inline ：行级盒子

inline-block 本身是行级，可以放在行盒中，可以设置宽高，作为应该整体不会被拆散成多行

none: 排版时完全被忽略

\

\

块级

不和其他盒子并列摆放，适用于所有的盒模型属性

行级排版上下文：

行级

和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用

行级排版上下文：

只包含行级盒子的容器会创建应该IFC

IFC的排版规则

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

FlexBox布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

image.png

常用属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

\

flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式

假设主轴从左到右

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

定义项目在交叉轴上如何对齐。

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

\

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

\

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

\

\

项目属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order属性

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

avatar
文章
阅读
粉丝