目录

• 选择器的权重和优先级
• 盒模型
• • 标准盒模型和替代模型（IE）
  • 块级盒子与内联盒子
• 隐藏一个元素
• Position
• • 文档流
  • 定位
  • z-index
• 浮动
• • 如何清除浮动
• 包含块与控制框
• BFC
• • 外边距折叠（合并外边距与BFC、margin叠加）
  • margin塌陷
  • BFC 可以包含浮动的元素（清除浮动）
  • BFC 解决文字环绕的问题
• 层叠上下文
• • 层叠水平
  • 层叠上下文的特性
• Display
• • Flex布局
  • Grid布局
• 各种居中
• • 块级元素水平居中（左右居中）
  • 块级元素垂直居中
  • • 负外边距
    • 绝对居中
    • 容器内居中
    • • **视区内居中**
    • 变形（Transform）
    • flex
  • 块中不定行的文字垂直居中
• 三列布局
• 伪类和伪元素
• CSS属性继承
• CSS3
• • Transform

选择器的权重和优先级

CSS基础：谈谈选择器的权重和优先级

• 浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。

• 优先级是由匹配的选择器中每一种选择器类型的 数值 决定的。

• 当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

• 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

• 优先级

• 每一组选择器在判断优先级的时，是相加的关系
• !important 规则时，此声明将覆盖任何其他声明
• !important 是一个坏习惯，应该尽量避免
• 两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

盒模型

CSS基础：简述CSS盒模型

• 内边距 padding：包围在内容区域外部的空白区域
  • 内边距位于边框和内容区域之间，不能为负
  • 可以设置padding padding-top padding-right padding-bottom padding-left
  • 更改类.container的内边距,可以在容器和方框之间留出空间
• 外边距 margin:盒子和其他元素之间的空白区域
  • 外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
  • 可以设置margin: 10px //等于 margin-top: 10px margin-right: 10px margin-bottom: 10px margin-left: 10px
  • 外边距折叠：如果有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
• 边框 border：边框盒包裹内容和内边距
  • 它是在边距和填充框之间绘制的。
    • 如果您正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。
    • 如果您使用的是替代盒模型，那么边框的大小会使内容框更小，因为它会占用一些可用的宽度和高度。
  • 可以设置：border-top border-right border-bottom border-left border-width border-style border-color
  • 还可以设置：border-top-width border-top-style border-top-color等

标准盒模型和替代模型（IE）

• 在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小，如果使用标准模型，则宽度 = 410px (300 + 50 + 50 + 5 + 5)，由margin之外的其他属性组成。

  

• 在替代模型中，内容宽度 = 该宽度 - border - padding。

• 默认浏览器会使用标准模型。如果需要使用替代模型，可以通过为其设置 box-sizing: border-box 来实现。
• 如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 元素上，然后设置所有元素继承该属性

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

块级盒子与内联盒子

块级盒子：

特点：

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和 height 属性可以发挥作用
• 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

常见的块级元素：

div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset

内联盒子：

特点：

• 盒子不会产生换行。
• width 和 height 属性将不起作用。
• 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
• 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

常见行内元素：

a, span, label, strong, em, br, img, input, select, textarea, cite

隐藏一个元素

css隐藏元素的方法(三种)

• 使用display:none;隐藏元素
  • 给元素的css属性中添加display:none;隐藏目标的同时还不占位置.
• 通过改变元素透明度隐藏元素
  • 当元素完全透明的时候就是隐藏了,opacity:0(取值范围0-1),0为完全透明,1为完全不透明.,这个方法会继承到子元素,使用的时候要看清了.
• 使用visibility:hidden;隐藏
  • 同样是给css属性添加,但是占位置

Position

CSS基础：浅谈position

文档流

• "文档流"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。通常是从上至下，从左到右的形式
• 一旦某部分脱离了"流"，它就会独立地工作

定位

定位的整个想法是允许我们覆盖上面描述的基本文档流行为

• 静态定位：position: static;

• 相对定位：position: relative

.positioned {
    position: relative;
    top: 30px;
    left: 40px;
    background: #E6F7FF;
}

<div class="box">
    <h2 class="positioned">二级标题</h2>
    <h3>副标题</h3>
    <p>我是段落1</p>
    <p>我是段落2，我包含了有意思的标签<span>我是span标签</span>,除了span标签还有它——<a href="https://www.baidu.com">我是a标签</a>,你看他们都不会导致新起一行
    </p>
</div>

使用position: relative，不会让元素脱离文档流，目标元素会基于自己原本的位置进行定位

• 绝对定位：position: absolute;

绝对定位将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

一般将absolute元素的父元素设为relative

这两个是配合使用的，A定义了relative后，B就会相对于A进行移动。

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，

一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位

还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，因为在你这个例子里我们只是要让A作为B的一个参照偏移位置，并不需要A元素以及它周围的元素有所改变，所以用相对定位是非常合适的（如果你另有其他需要，祖先元素绝对定位也不是不可以）

• 固定定位：position: fixed;

绝对定位固定元素是相对于元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

• 粘性定位：position: sticky;

sticky允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。

z-index

一旦使用定位，就可能使元素重叠,使用z-index: 3;控制覆盖，值越大越在上面

浮动

CSS浮动

浮动&清除浮动的四种方法（伪类清除法）

• 页面中盒子的排列方式

  • 常规流
  • 浮动
  • 定位

• 浮动：即脱离正常的文档流，优先级提高。

• 浮动的基本特点：

  • 当一个元素浮动后，该元素一定会成为块盒（display为block）

• 浮动盒子的排列方式

  • none: 默认值，不浮动，为常规流
  • left: 靠上靠左排列
  • right: 靠上靠右排列
  • 浮动盒子向左或向右移动，直到它外边框碰到父元素的padding或者碰到另一个浮动盒子的边框为止

• 盒子尺寸

  • 宽度为auto时，适应内容宽度
  • 高度为auto时，适应内容高度
  • 浮动盒子在包含块中排列时，如果常规流盒子在前，浮动盒子会避开常规流块盒
  • 常规流盒子在排列时，浮动盒子如果在前，常规流盒子则无视浮动盒子
  • 行盒在排列时，会避开浮动盒子
    • 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒

• 为什么要清除浮动

  • 没有给父盒子设置高度。（为了方便添加子元素且不会脱离父盒子）
  • 子盒子设置了浮动
  • 影响到了下面的布局

如何清除浮动

BFC及清除浮动详解

• 设置父级元素的高度

• 结尾处加空标签clear：both

  • 即：给父元素内部添加一个空的div元素，设置clear:both。
  • clear:both的理解：理解 css - clear:both

• 父级div定义 伪类:after 和 zoom

  .container::after {
      content: "";
      display: block;
      clear: both；
  }
  

• 父级div定义 overflow:hidden

• 父级div定义 overflow:auto

包含块与控制框

• 包含块

  • 一个元素的box的定位和尺寸，会与某一矩形框有关，这个框就称之为包含块。
  • 元素会为它的子孙元素创建包含块，但是，并不是说元素的包含块就是它的父元素，元素的包含块与它的祖先元素的样式等有关系
  • 譬如：
    • 根元素是最顶端的元素，它没有父节点，它的包含块就是初始包含块
    • static和relative的包含块由它最近的块级、单元格或者行内块祖先元素的内容框（content）创建
    • fixed的包含块是当前可视窗口
    • absolute的包含块由它最近的position 属性为absolute、relative或者fixed的祖先元素创建
    • 如果其祖先元素是行内元素，则包含块取决于其祖先元素的direction特性
    • 如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界

• 控制框

  • 总结：

    • 如果一个框里，有一个块级元素，那么这个框里的内容都会被当作块框来进行格式化，因为只要出现了块级元素，就会将里面的内容分块几块，每一块独占一行（出现行内可以用匿名块框解决）
    • 如果一个框里，没有任何块级元素，那么这个框里的内容会被当成行内框来格式化，因为里面的内容是按照顺序成行的排列

  • 块框：

    • 块级元素会生成一个块框（Block Box），块框会占据一整行，用来包含子box和生成的内容

    • 块框同时也是一个块包含框（Containing Box），里面要么只包含块框，要么只包含行内框（不能混杂），如果块框内部有块级元素也有行内元素，那么行内元素会被匿名块框包围

    • 关于匿名块框的生成，示例：

      <DIV>
      Some text
      <P>More text
      </DIV>
      

      • div生成了一个块框，包含了另一个块框p以及文本内容Some text，此时Some text文本会被强制加到一个匿名的块框里面，被div生成的块框包含（其实这个就是IFC中提到的行框，包含这些行内框的这一行匿名块形成的框，行框和行内框不同）
      • 换句话说:如果一个块框在其中包含另外一个块框，那么我们强迫它只能包含块框，因此其它文本内容生成出来的都是匿名块框（而不是匿名行内框）

  • 行内框：

    • 一个行内元素生成一个行内框

    • 行内元素能排在一行，允许左右有其它元素
      关于匿名行内框的生成，示例：

      <P>Some <EM>emphasized</EM> text</P>
      

      • P元素生成一个块框，其中有几个行内框（如EM），以及文本Some ， text，此时会专门为这些文本生成匿名行内框

  • display属性的影响：

    • display的几个属性也可以影响不同框的生成：
      • block，元素生成一个块框
      • inline，元素产生一个或多个的行内框
      • inline-block，元素产生一个行内级块框，行内块框的内部会被当作块块来格式化，而此元素本身会被当作行内级框来格式化（这也是为什么会产生BFC）
      • none，不生成框，不再格式化结构中，当然了，另一个visibility: hidden则会产生一个不可见的框

BFC

CSS基础：CSS的上下文之BFC

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

• w3c定义：

  • 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

  • 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

  • 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

• 定义：BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

• 下列方式会创建块格式化上下文

  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • display 为 inline-block、table-cells、flex
  • overflow 计算值不为 visible 的块元素

• 块格式化上下文包含创建它的元素内部的所有内容。

• BFC属于普通的文档流，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，它有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

• 应用场景：

  • 清除内部的浮动，触发父元素的 BFC 属性，会包含 float 元素；防止浮动导致父元素高度塌陷，父级设置 overflow：hidden，元素float:right;
  • 分属于不同的 BFC ，可以阻止 Margin 重叠；避免 margin 重叠，两个块相邻就会导致外边距被折叠，给中间的设置 BFC 就会避免，方法就是套个父级设置 overflow:hidden
  • 阻止元素被浮动元素覆盖，各自是独立的渲染区域；
  • 自适应两懒布局；

外边距折叠（合并外边距与BFC、margin叠加）

• 定义：

  • 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

• 折叠的结果：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

• 产生折叠的必备条件：margin必须是邻接的!而根据w3c规范，两个margin是邻接的必须满足以下条件：

  • 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
  • 没有线盒，没有空隙（clearance），没有padding和border将他们分隔开
    • clearance：闭合浮动的块盒（即设置了clear:both)在margin-top上所产生的间距（clearance）的值与该块盒的margin-top 之和应该足够让该块盒垂直的跨越浮动元素的margin-bottom，使闭合浮动的块盒的border-top恰好与浮动元素的块盒的margin- bottom相邻接。
  • 都属于垂直方向上相邻的外边距，可以是下面任意一种情况
    • 元素的margin-top与其第一个常规文档流的子元素的margin-top
    • 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
    • height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
    • 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

• 以上的条件意味着下列的规则：

  • 创建了新的BFC的元素（例如浮动元素或者’overflow’值为’visible’以外的元素）与它的子元素的外边距不会折叠

  • 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）

    • 浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流，违反了上面所述的两个margin是邻接的条件同时，又因为浮动和绝对定位会使元素为它的内容创建新的BFC，因此该元素和子元素所处的BFC是不相同的，因此也不会产生margin的折叠。

  • 绝对定位元素不与任何元素的外边距产生折叠

  • inline-block元素不与任何元素的外边距产生折叠

    • inline-block不符合w3c规范所说元素必须是块级盒子的条件，因为规范中又说明，块级盒子的display属性必须是以下三种之一：‘block’， ‘list-item’， 和 ‘table’

  • 一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。

  • 一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。

  • 一个’height’ 为 ‘auto’ 并且 ‘min-height’ 为 '0’的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。

  • 一个不包含border-top、 border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 ‘height’ 为 0 或 ‘auto’， ‘min-height’ 为 ‘0’，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

• 想要解决这样的问题，我们可以通过将两个child放置于不同的BFC中

BFC 可以包含浮动的元素（清除浮动）

• 现象：
  • child因为浮动，脱离了文档流；
  • box盒子的高度只计算了border；
• 解释：
  • 因为子元素已经脱离了文档流，所以父元素在计算高度时忽略了它；
• 解决：
  • 触发容器的 BFC，使得容器包裹着浮动元素。（以此可以清除浮动）

BFC 解决文字环绕的问题

浮动的目的。最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。

现象：

• 给左侧子元素设置了左浮动，使得文字环绕在它周围，但为什么文字会被环绕，而不是被遮挡？

解释：

看到float会脱离文档流，这是相对于盒子模型来说的。但它没有脱离文本流。

• 文档流是相对于盒子模型讲的

• 文本流是相对于文子段落讲的

元素浮动之后，会让它脱离文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。

在MDN上提到，该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

解决:

将包裹文字的元素置为BFC

层叠上下文

CSS基础：CSS的上下文之层叠上下文

定义：

• 层叠上下文，英文称作”stacking context”. 我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

• 我们可以把层叠上下文同样可以理解成是元素的属性。

下列方式会形成层叠上下文：

• position 值为 static 以外的值，且 z-index 值不为 auto;
• flex (flexbox) 容器的子元素，且 z-index 值不为 auto;
• grid (grid) 容器的子元素，且 z-index 值不为 auto;
• opacity 属性值小于 1 的元素;
• transform属性 不为none的元素;

总结：

• 在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。
• 子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

层叠水平

“层叠水平”，英文称作”stacking level”，决定了同一个层叠上下文中元素在z轴上的显示顺序。网页中的每个元素都是独立的个体，他们一定是会有一个类似的排名排序的情况存在。而这个排名排序、论资排辈就是我们这里所说的“层叠水平”。

但注意，每一个层叠上下文内部的子元素都不会突破包裹它的上下文。

普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

• 举例：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmkuF0jJ-1646397774231)(/Users/wangke/Desktop/收集/图片/层叠水平.png)]

• 现象：

  • 在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 z-index 值。我们把层叠上下文的层级列在下面：
  • DIV #1
    DIV #2
    DIV #3
    DIV #4
    DIV #5
  • 不同层的z-index他们的意义只相对于同一个层叠上下文。你会发现z-index：100的也没有覆盖z-index：1的。

• 结论：

  • 千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。

层叠上下文的特性

• 准则
  • 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
  • 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
    在CSS和HTML领域，只要元素发生了重叠，都离不开上面这两个黄金准则。
• 特性
  • 层叠上下文的层叠水平要比普通元素高；
  • 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
  • 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
  • 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

Display

Flex布局

CSS之关于弹性盒子 你了解哪些（flex基本属性详解

• Flex定义:

  • Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
  • **注意：**这是您需要在父容器上设置的唯一属性，它的所有直接子容器将自动变为flex项目。

  .box{
      display: flex;
      display: -webkit-flex; /* 如果 Webkit 内核浏览器 */
      display: inline-flex; /* 如果 你希望它是行内元素 */
  }
  

• 弹性盒子的属性:

  • 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。

  • 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

• 容器默认存在两根轴：

  • 水平的主轴（main axis）

    • 主轴的开始位置叫做main-start;
    • 结束位置叫做main-end;

  • 垂直的交叉轴（cross axis）

    • 交叉轴的开始位置叫做cross-start;
    • 结束位置叫做cross-end;

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XAbvMqqb-1646397774231)(/Users/wangke/Desktop/收集/图片/flex.png)]

• 属性

  • flex-direction属性

    • flex-direction属性决定主轴的方向（即项目的main-axis方向）。
    • 取值：
      • row（默认值）：主轴为水平方向，起点在左端。
      • row-reverse：主轴为水平方向，起点在右端。
      • column：主轴为垂直方向，起点在上沿。
      • column-reverse：主轴为垂直方向，起点在下沿。

  • flex-wrap属性

    • 最初的flexbox概念是在一行中设置其项目的容器。该flex-wrap属性控制flex容器是以单行还是多行布置其项目，以及新行的堆叠方向。

    • 取值：

      • nowrap（默认值）：项目显示在一行中，默认情况下会缩小它们以适应Flex容器的宽度;

      • wrap：如果需要，从左到右和从上到下，弹性项目将显示在多行中;

      • wrap-reverse：如果需要，从左到右和从下到上，弹性项目将显示在多行中;

  • flex-flow

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

  • justify-content属性

    • 使flex项目沿着flex容器当前行的主轴对齐。当一行上的所有伸缩项目都不灵活或已达到最大大小时，它有助于分配剩余的可用空间。

    • 取值：（下面假设主轴为从左到右。）

      • flex-start（默认值）：左对齐；

      • flex-end：右对齐；

      • center： 居中；

      • space-between：两端对齐，项目之间的间隔都相等；

      • space-around：每个项目两侧的间隔相等。

  • align-items属性

    • align-items属性定义项目在交叉轴上如何对齐。

    • 取值：（下面假设交叉轴从上到下。）

      • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

      • flex-start：交叉轴的起点对齐。

      • flex-end：交叉轴的终点对齐。

      • center：交叉轴的中点对齐。

      • baseline: 项目的第一行文字的基线对齐。

  • align-content属性

    • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
    • 当存在多个轴时，此属性会在Flex容器内将Flex容器的轴线以接近justify-content的方式对齐。
    • 取值：
      • flex-start：与交叉轴的起点对齐。
      • flex-end：与交叉轴的终点对齐。
      • center：与交叉轴的中点对齐。
      • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
      • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
      • stretch（默认值）：轴线占满整个交叉轴。

• 项目的属性

  • order

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

  • flex-grow

    • 此属性指定的缩放，该属性确定当分配正的自由空间时，缩放项目相对于容器中其余其余项目将增长多少。
    • 注意：flex-grow：默认为0，即如果存在剩余空间，也不放大。

  • flex-shrink属性

    • flex-shrink的参数指定弹性收缩因子，该因子确定在分配负的自由空间时，弹性项目相对于弹性容器中其余弹性项目将收缩多少。

  • flex-basis属性

    • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    • 该属性采用与width和height属性相同的值，并在根据弹性系数分配可用空间之前指定弹性项目的初始主要尺寸。

  • flex

    • 此属性是flex-grow，flex-shrink和flex-basis的简写。默认值为0 1 auto。

    • 该属性有两个快捷值：

      • auto (1 1 auto)

      • none (0 0 auto)

  • align-self属性

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

Grid布局

CSS进阶之关于网格布局(Grid) 你了解哪些

• 基本概念

  • “容器”和“项目”
    • 采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
    • 最外层的<div>元素就是容器，内层的三个<div>元素就是项目
    • 注意：项目只能是容器的顶层子元素（直属子元素），不包含项目的子元素。Grid 布局只对项目生效。
  • 行、列、单元格
    • 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
    • 行和列隔开的格子，被称作“单元格”
  • 网格线
    • 划分网格的线（单元格），称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

• 容器基本属性

  • display

    • 当给元素设置为display: grid;后，默认情况下，容器元素都是块级元素，但也可以设成行内元素display: inline-grid;。

  • grid-template-columns、grid-template-rows

    • grid-template-columns: 定义每一列的列宽
    • grid-template-rows: 定义每一行的行高。

  • repeat()方法

    • repeat()接受两个参数，第一个参数是重复的次数（上例是 3），第二个参数是所要重复的值。
    • repeat()重复某种模式也是可以的。

    <style>
      .grid {
        grid-template-rows: repeat(3, 100px);
        grid-template-columns: repeat(3, 100px);
      }
    </style>
    

  • auto-fill 关键字

    • 有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充。

    .grid {
      grid-template-columns: repeat(auto-fill, 100px);
      grid-template-rows: repeat(2, 100px);
    }
    

  • fr(片段)

    • 网格布局提供了fr 关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。
    • fr 可以与绝对长度的单位结合使用，这时会非常方便：例如下面会显示为第一列 100px，剩余宽度内第三列是是第二列的二倍

    .grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      /*grid-template-columns: 100px 1fr 2fr;*/
    }
    

  • auto

    • auto 关键字表示由浏览器自己决定长度。
    • grid-template-columns: 100px auto 100px;

  • 网格线的名称

    • grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
    • grid-template-columns: [c1] 100px [c2] auto [col-3 c3] 100px;

  • grid-row-gap、grid-column-gap、grid-gap 属性

    • grid-row-gap属性设置行与行的间隔（行间距）
    • grid-column-gap属性设置列与列的间隔（列间距）
    • grid-gapgrid-gap: <grid-row-gap> <grid-column-gap>，它是行列间距的缩写

  • grid-template-areas 属性

    • 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas 属性用于定义区域。

    .grid {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      grid-template-areas:
        "a b c"
        "d e f"
        "g h i";
    }
    .a {
        grid-area: a; // 表示它代表grid容器内的a项目
    }
    

  • justify-items、align-items、place-items 属性

    • justify-items：设置单元格内容的水平位置（左中右）；
    • align-items：设置单元格内容的垂直位置（上中下）；
    • 取值范围：
      • start：对齐单元格的起始边缘。
      • end：对齐单元格的结束边缘。
      • center：单元格内部居中。
      • stretch：拉伸，占满单元格的整个宽度（默认值）。
    • place-items 是上面两个属性的简写形式：place-items: <align-items> <justify-items>;，

  • justify-content、align-content、place-content 属性

    • justify-content 属性是整个内容区域在容器里面的水平位置（左中右）
    • align-content 属性是整个内容区域的垂直位置（上中下）。
    • 同样place-content也是前两个属性的简写形式。

  • grid-auto-columns、grid-auto-rows 属性

    • 有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
    • grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

• 项目基本属性

  • 垂直网格线
    • grid-column-start：项目左起始网格线
    • grid-column-end：项目右结束网格线
    • grid-row-start 项目上起始网格线
    • grid-row-end 项目下结束网格线
    • grid-column：是grid-column-start和grid-column-end的合并简写形式
    • grid-row：grid-row-start和grid-row-end的合并简写形式
  • grid-area 属性
    • grid-area属性指定项目放在哪一个区域。
    • **注意：**grid-area还有另一种使用方式，他可以作为作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
    • grid-area: 1 / 1 / 2 / 2;

各种居中

块级元素水平居中（左右居中）

div {
  border: 1px solid red;
  margin: 0 auto;
  height: 50px;
  width: 80px;
}

css3 flex实现：

justify-content:center;

块级元素垂直居中

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

记录自己的前端复习之路-css（1）详解及延伸

负外边距

div {
  border: 1px solid red;
  float: left;
  position: absolute;
  width: 200px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -100px;
}

绝对居中

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

容器内居中

内容块的父容器设置为position:relative，使用上述绝对居中方式，可以使内容居中显示于父容器。

.Center-Container {
  position: relative;
}
 
.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

视区内居中

想让内容块一直停留在可视区域内？将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。

.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

变形（Transform）

这是最简单的方法，不近能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀，还要加上：top: 50%; left: 50%;

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置

translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

.is-Transformed { 
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

flex

align-items:center;

块中不定行的文字垂直居中

• line-height设置为容器height一致（只能单行）

三列布局

CSS实现三列布局

三列布局指的是两边两列定宽，中间的宽度自适应。

常用三种方法：

• 定位
  • 左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置
• 浮动
  • 让左右两边部分浮动，脱离文档流后对中间部分使用margin来自适应
• 弹性盒布局
  • 使用容器包裹三栏，并将容器的display设置为flex，左右两部分宽度设置为固定，中间flex设置为1，左右两边的值固定，所以中间的自适应

伪类和伪元素

CSS伪类与伪元素

• 为什么要引入伪类与伪元素？

  • css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。

• 定义：

  • 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
  • 伪元素：用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。

• 分类：

  • 状态伪类
    • 是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
    • 常见的状态伪类主要包括：
      • :link 应用于未被访问过的链接；
      • :hover 应用于鼠标悬停到的元素；
      • :active 应用于被激活的元素；
      • :visited 应用于被访问过的链接，与:link互斥。
      • :focus 应用于拥有键盘输入焦点的元素。
  • 结构性伪类
    • 是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
    • 常见的结构性伪类包括：
      • :first-child 选择某个元素的第一个子元素；
      • :last-child 选择某个元素的最后一个子元素；
      • :nth-child() 选择某个元素的一个或多个特定的子元素；
      • :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
      • :nth-of-type() 选择指定的元素；

• 常见的伪元素选择器

  • ::first-letter 选择元素文本的第一个字（母）。
  • ::first-line 选择元素文本的第一行。
  • ::before 在元素内容的最前面添加新内容。
  • ::after 在元素内容的最后面添加新内容。
  • ::selection匹配用户被用户选中或者处于高亮状态的部分
  • ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效

• 伪元素的应用：

  • 清除浮动：如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。

    .clear::after {
        content: '';
        display: block;
        clear: both;
    }
    

  • 画分割线

    <style>
        * {
          padding: 0;
          margin: 0;
        }
        .spliter::before, .spliter::after {
          content: '';
          display: inline-block;
          border-top: 1px solid black;
          width: 200px;
          margin: 5px;
        }
      </style>
    </head>
    <body>
      <p class="spliter">分割线</p>
    </body>
    

  • 计数器

CSS属性继承

CSS中属性继承小解

• css可以和不可以继承的属性
  • 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
  • 所有元素可继承：visibility和cursor。
  • 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
  • 终端块状元素可继承：text-indent和text-align。
  • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  • 表格元素可继承：border-collapse。
• 值的继承
  • 继承也是基于文档树的，文档树中元素的某些属性可以被其子元素继承，每一个CSS属性都定义了它能否被继承。要设定文档的某些缺省样式属性，可以在文档树的根上设定该属性，如果这个属性可以继承，则其后代元素将继承这个属性，例如color、font-size等属性。
• “inherit（继承）”值
  • 每一个属性可以指定值为“inherit”，即：对于给定的元素，该属性和它父元素相对属性的计算值取一样的值。继承值通常只用作后备值，它可以通过显式地指定“inherit”而得到加强，例如： p { font-size: inherit; }
• 继承的局限性
  • 继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补白）和背景等。
  • 这样设定是有道理的，例如，为一个

    设定了边框，如果此属性也继承的话，那么在这个

    内所有的元素都会有边框，这无疑会产生一个让人眼花缭乱的结果。同样的，影响元素位置的属性，例如margin（边距）和padding（补白），也不会被继承。

• css属性一旦继承了不能被取消，只能重新定义样式。

CSS3

Transform

Transform【变形】属性

• 旋转rotate
  • transform:rotate(30deg)
• 移动translate
  • 移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）
  • transform:translate(100px,20px)
  • transform:translateX(100px)
• 缩放scale
  • scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。如：transform:scale(2,1.5)
  • transform:scaleY(2)
• 扭曲skew
  • skew( [, ]) ：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。，其中第二个参数是可选参数，如果没有设置第二个参数，那么X轴和Y轴以同样的角度进行变形。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg)
  • transform:skewX(30deg)
• 矩阵matrix