CSS学习笔记

一、模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

二、布局

• 官方说法：flex意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
• 民间说法：flex就是一种布局方式，类似于block\inline-block等。

概念

采用Flex布局的元素，称为Flex容器。它的所有子元素自动成为容器成员，称为Flex项目。

容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性

• flex-direction： 决定主轴的方向(即项目的排列方向)。
  • row(默认)：主轴为水平方向，起点在容器的左端。
  • row-reverse：主轴为水平方向，起点在容器的右端。
  • column：主轴为垂直方向，起点在容器的上沿。
  • column-reverse：主轴为垂直方向，起点在容器的下沿。
• flex-wrap：如果一行排不下如何换行。
  • nowrap(默认)：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
• flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content：定义了项目在主轴上的对齐方式。
  • space-between：如果只有一个项目则只在容器主轴的开始位置排列；如果只有两个项目则一边一个；如果有两个以上的项目，则容器主轴的开始和结束位置各一个，其他的项目均匀排列，项目之间的间隔相等。如果使用flex-direction属性改变的主轴的方向，那项目对应的排列方式也会变。
  • space-around：如果只有一个项目则排列在中间；如果有多个项目，则每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。如果使用flex-direction属性改变的主轴的方向，那项目对应的排列方式也会变。
  • center： 猪肘的中点对齐。
  • flex-start：向主轴的起始位置对齐，也就是从主轴的起始位置开始排列。如果使用flex-direction属性改变的主轴的方向，那项目对应的排列方式也会变。
  • flex-end：向主轴结束位置对齐，也就是从主轴结束的位置开始排列。如果使用flex-direction属性改变的主轴的方向，那项目对应的排列方式也会变。
• align-content：定义了多根轴线(多行)的对齐方式。如果项目只有一根轴线(一行)则该属性不起作用。 如果flex-direction的值是column，则该属性定义了多列的对齐方式。如果项目只有一列则该属性不起作用。
  • stretch(默认)：多行占满整个交叉轴。
  • space-around：每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍。
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
• align-items：定义项目在交叉轴上的对齐方式。
  • stretch(默认)：如果项目未设置高度或设为auto，将占满整个容器的高度。
  • baseline：项目的第一行文字的基线对齐。
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。

项目属性

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

• flex-grow：定义项目的放大比例，默认为0。

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

• flex-basis：项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。它的默认值为auto，即项目的本来大小。

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

  建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

1、显示

display属性设置一个元素应如何显示：

• none

  可以隐藏某个元素，且隐藏的元素不会占用任何空间。

• block

  表现为块级元素(block)特性：总是独占一行(其后的元素也必须另起一行显示)。

  宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可改变。

• inline

  表现为内联元素(inline)特性：和相邻的内联元素在同一行。

  宽度(width)、高度(height)、内边距的top/bottom和外边距的top/bottom都不可改变。

• inline-block

  显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。

  常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示。

• flex

  显示为弹性布局，可以使用flex等相关的属性。

2、定位

position属性指定了元素的定位类型。

• fixed定位

  元素位置相对于浏览器窗口进行固定位置(即使窗口是滚动的它也不会移动)。fixed定位使元素的位置与文档流无关，因此不占据空间。

• absolute定位

  元素位置是相对于最近的已定位父元素进行固定位置。如果元素没有已定位的父元素，那么它的位置相对于html进行定位。absolute定位使元素的位置与文档流无关，因此不占据空间。

• relative定位

  元素位置是相对其自身位置进行固定位置。相对定位经常被用来作为绝对定位的容器。relative定位使元素的位置与文档流有关，因此占据空间，但是设置偏移量也不会影响其他元素的位置。

• sticky定位

  粘性定位的元素是依赖于用户的滚动，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。即是在 position:relative与 position:fixed定位之间切换。

  在目标区域时它的行为就像 position:relative，而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。这个特定阈值指的是top、right、bottom、left之一。换言之指定四个阈值其中之一才可使粘性定位生效，否则其行为与相对定位相同。

• static定位

  元素定位的默认值(即没有定位)，遵循正常的文档流对象。静态定位的元素不会受到top、bottom、left、right的影响。

3、浮动

浮动会使元素向左或向右移动，其周围的元素也会重新排列。

• 浮动元素之前的元素将不受影响。
• 浮动元素之后的元素将围绕着它。

清除浮动请使用clear，clear属性指定元素左侧或右侧或两侧不能出现浮动元素。

4、对齐

• 元素居中对齐

  要水平居中对齐一个元素(如 <div>)可以使用margin: auto;。元素通过指定宽度并将两边的空外边距平均分配来达到居中对齐的目的。

• 文本居中对齐

  如果仅仅是为了文本在元素内居中对齐，可以使用text-align: center;。

• 图片居中对齐

  要让图片居中对齐, 可以使用 margin: auto; 并将它设置成块(display: block;)元素。

三、选择器

• id选择器：以 "#" 定义。

• class选择器：以一个点"."定义。

• 属性选择器：以"[]"定义。

  属性选择器 =, |=, ^=, $=, = 的区别

• 组合选择器：

  • 相邻兄弟选择器(以加号分隔)：选择紧接在另一元素后的元素，且二者有相同父元素。
  • 普通兄弟选择器(以破折号分隔)：选取所有指定元素之后的相邻兄弟元素。
  • 子元素选择器(以大于号分隔)：只能选择作为某元素子元素的元素。如div>p{...}
  • 后代选择器(以空格分隔)：后代选择器用于选取某元素的后代元素。如div p{...}

• 伪类和伪元素

四、动画

未完待续...

参考教程:https://www.runoob.com/css/css-tutorial.html

CSS学习笔记

原文：https://www.cnblogs.com/vpdong/p/10708350.html