css html

1、基础知识

* 行内元素inline、块级元素block

*文字基线

2、flex布局

容器成员：flex item

• 采用flex布局的元素，其所有子元素（而非后代元素）自动成为容器成员

容器构成：item默认按照主轴排列

• 水平的主轴main axis
• 垂直的交叉轴cross axis

容器属性

• flex-direction：row | row-reverse | column | column-reverse，属性决定主轴的方向（即项目的排列方向）。
• flex-wrap：nowrap（通过调整item大小） | wrap | wrap-reverse
  • 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow： || ;
• justify-content：flex-start | flex-end | center | space-between | space-around;
  • 属性定义了项目在主轴上的对齐方式。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
  • space-between 两端对齐，项目之间的间隔都相等
• align-items：flex-start | flex-end | center | baseline | stretch;
  • 属性定义项目在交叉轴上如何对齐
  • 属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。
  • baseline对齐，就是以基线（字母f的）为基准对齐：而是英文字母“x”的下端沿。
• align-content：flex-start | flex-end | center | space-between | space-around | stretch;
  • 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  • 将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：①子项多行且flex容器高度固定 ②子项单行，flex容器高度固定且设置了flex-wrap:wrap;
• align-item与align-content的区别
• 深入理解flex-grow、flex-shrink、flex-basis

项目属性

• order：;属性用来定义项目的排列顺序。数值越小，排列越靠前，默认为 0
• flex-grow：;定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大.
• flex-shrink：定义了项目的缩小比例，默认为 1 ，即如果空间不足，该项目将缩小。
• flex-basis： | auto；属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  • 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
  • 当主轴设置为水平时，当设置了flex-basis，设置的项目宽度值会失效，flex-basis需要跟flex-grow和flex-shrink配合使用才能生效。因为如果空间不匹配，会自适应的，因此要配合使用，控制不匹配时的空间
  • 在flex容器分配剩余空间前flex子项在主轴方向上的初始尺寸。flex子项在主轴方向上的实际尺寸是根据元素自身尺寸、flex-basis、flex-grow、flex-shrink 等属性共同决定的。
• flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
• align-self：auto | flex-start | flex-end | center | baseline | stretch;允许单个项目有与其他项目不一样的对齐方式
• flex:1等同于设置flex: 1 1 0%。等分项目
• flex:auto等同于设置flex: 1 1 auto。按照各自比例伸缩

3、居中/常见布局

position布局

• 只有当position是除了static之外的定位方式的时候，top left right bottom才会生效，否则无效

• position:static，按照文档流一个个布局

• position:relative，没有脱离文档流，相对的是它原本在文档流中的位置而进行的偏移

• position:absolute，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的

  • left: 表示设置元素左边缘的偏移量。

• position:fixed，脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是 fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移 。

居中手段

• 水平且垂直：

  • 绝对定位与负边距（上、左）实现（已知高度宽度）

  • 绝对定位与margin:auto(已知高度宽度)

     #container {
          position: relative;
          height:100px;//必须有个高度
        }
     #center {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
         /*auto是计算剩余空间然后平分，从而实现居中*/
          margin: auto;//注意此处的写法
        }
    

  • 绝对定位+transform

  • flex（必须有高度）

  • flex/grid与margin:auto(最简单写法)

      #container {
          height: 100vh;//必须有高度
          display: grid;
        }
      #center {
          margin: auto;
        }
    

• 行内元素（如果不是用display:inline-block强转块级元素）

  • 水平居中：text-align:center

  • 垂直居中：

    • 单行：line-height设置为元素高度；
    • 多行：flex-firection：column（为啥）；表布局的vertical-align:middle可以实现

• 块级元素

  • 单个水平居中：
    • margin:0 auto
    • position:absolute;left:50%;transform:translateX(-50%);向左平移自身宽度的50%
    • flex+justify-content
  • 多个水平居中：
    • flex+justify-content
    • inline-block，text-align:center
  • 垂直居中：
    • 已知高度：absolute+负margin，通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。
    • 未知高度：absolute+transform，当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中（Y轴反向是向上）
    • flex+align-items

• 浮动元素

  • 水平居中
    • 对于定宽的浮动元素，通过子元素设置relative+负margin
    • 对于不定宽的浮动元素，父子容器都用相对定位？
    • 通用方法：flex布局

• 绝对定位元素水平居中：子元素绝对定位，并margin：0 auto

4、重绘回流

• 前置知识：
  • 浏览器使用流式布局模型
  • 浏览器会把HTML解析为DOM，把CSS解析为CSSOM，DOM与CSSOM合并就形成了Render Tree
  • 有了renderTree，我们就知道了所有节点的样式，然后计算她们在页面上的大小和位置，最后把节点绘制到页面上
  • 计算通常只遍历一次，table布局可能需要多次计算
• 回流必定导致重绘，重绘不一定回流
• 回流：渲染树中的每个节点都被分配一个在屏幕上的位置和大小。这个过程称为布局或回流（reflow）。
  • 定义：当renderTree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程成为回流
  • 导致回流的操作：
    • 页面首次渲染
    • 浏览器窗口大小发生改变
    • 元素尺寸、位置、内容、字体大小发生改变
    • 添加或删除 可见 的DOM元素
    • 激活CSS伪类
    • 查询某些属性或调用某些方法
• 重绘：浏览器使用 GPU 或 CPU 将布局后的元素绘制到屏幕上。这个过程称为绘制或重绘（repaint）。
  • 定义：当页面中元素样式的改变并不影响它在文档流中的位置时（例如，Color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它
  • 性能影响：回流比重绘代价更高，有时候仅仅回流一个单一元素，其父元素与其子元素也会回流
• 如何避免
  • CSS：避免使用table布局，尽可能在DOM树最末端改变class，避免设置多层内联样式，避免使用CSS表达式，将动画效果应用到position属性为absolute或fixed的元素上
  • js：避免频繁操作样式与DOM；可以先将元素设置为display:none，操作结束后再显示出来
  • 使用绝对定位，脱离文档流，否则会引起父元素及后续元素频繁回流

5、层叠上下文

6、浮动与清除浮动

首先了解浮动是：脱离文档流，但不脱离文本流，浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素**。

• 脱离文档流，也就是说不会影响普通元素的布局

对自身的影响：形成“块”BFC；位置尽量靠上；位置尽量靠左（右）

对兄弟的影响：上面贴非float元素；旁边贴float元素；不影响其他块级元素；影响其他块级元素内部文本

对父级元素的影响：从布局上“消失”；高度塌陷（父级元素里面没有东西，即便设置了高宽，还是会变成0）

清除浮动：

• clear：在父级元素末尾添加的元素必须是一个块级元素；利用:after和:before在元素内插入两个元素块，从而达到清除浮动的效果。
  • clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间
• BFC：overflow：auto；

//利用:after和:before在元素内插入两个元素块，从而达到清除浮动的效果。
.container2::after{
        content: 'aaa';
        clear:both;
        display: block;
        visibility: hidden;
        height:0;
    }

尽量往上往左靠，所以案例中把第二个float写在前面，就可以实现三栏布局了

7、BFC视觉格式化模型

BFC定义了盒box的生成，盒主要包括块盒、行内盒、匿名盒等，盒的类型由display决定，也就是用于决定块级盒的布局及浮动相互影响范围的一个区域。

什么元素会创建BFC：

• 根元素
• 浮动元素、绝对定位元素、行内块元素、overflow的值不为visible的元素
• 弹性元素、网格元素
• 表格的标题和单元格
• 匿名表格单元格元素

BFC的范围：包含创建它的元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，隔离特性

BFC的特性：

• BFC 内部的块级盒会在垂直方向上一个接一个排列 ①
• 同一个 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免的外边距折叠 ②
• 每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此 ③
• 浮动盒的区域不会和 BFC 重叠 ④
• 计算 BFC 的高度时，浮动元素也会参与计算，毕竟不会重叠？ ⑤

BFC的应用：

• 清除浮动（高度塌陷）
• 防止外边距折叠：外边距折叠指的是相邻块级元素的上下外边距（margin）会合并（折叠）成一个外边距
• 自适应多栏布局：由于盒子的 margin box 的左边和包含块 border box 的左边相接触，同时浮动盒的区域不会和 BFC 重叠，所以中间栏的宽度会自适应，示例。

8、CSS选择器与优先级

选择器：

选择器	用法	示例
标签选择器	选择特定的 HTML 标签	p { color: red; }
类选择器	选择使用特定类名的元素	.my-class { color: blue; }
ID 选择器	选择使用特定 ID 的元素	#my-id { font-size: 24px; }
属性选择器	选择具有特定属性的元素	[title] { font-weight: bold; }
后代选择器	选择指定元素的后代元素	ul li { list-style: none; }
子元素选择器	选择指定元素的直接子元素	ul > li { list-style: none; }
相邻兄弟选择器	选择紧接在指定元素后面的同级元素	h2 + p { font-style: italic; }
通用兄弟选择器	选择在指定元素后面的所有同级元素	h2 ~ p { font-style: italic; }
:hover 伪类选择器	选择元素在鼠标悬停在上方时的状态	a:hover { text-decoration: underline; }
:focus 伪类选择器	选择元素在获得焦点时的状态	input:focus { border: 2px solid blue; }
:active	选择元素在被点击时的状态	button:active { background-color: green; }
:nth-child()	选择父元素中的第 N 个子元素	li:nth-child(odd) { background-color: #eee; }
:first-child	选择父元素中的第一个子元素	li:first-child { font-weight: bold; }
:last-child	选择父元素中的最后一个子元素	li:last-child { font-weight: bold; }
:not()	排除指定的元素	input:not([type="submit"]) { border: 1px solid #ccc; }
:checked	选择被选中的表单元素	input[type="checkbox"]:checked { background-color: yellow; }
:before	在元素内容前面添加样式（伪元素）	p:before { content: ">> "; }
:after	在元素内容后面添加样式（伪元素）	p:after { content: " <<" }

• id选择器(#myid)
• 类选择器(.myclass)
• 属性选择器(a[rel=“external”])
• 伪类选择器(a:hover, li:nth-child)
• 标签选择器(div, h1,p)
• 相邻选择器（h1 + p）
• 子选择器(ul > li)
• 后代选择器(li a)
• 通配符选择器(*)

优先级

• !important
• 内联样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/伪元素选择器（0001）
• 关系选择器/通配符选择器*（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：`!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 、盒子模型

box-sizing属性：

1. context-box：默认，且是w3c的标准盒子模型
2. border-box：IE传统盒子模型
3. padding-box：width、height只包括content+padding，不包括边框border

**标准盒子模型：**content+padding+border+margin，高度宽度是content

**低版本IE：**content+padding+border+margin，高度宽度是content+padding+border

9、HTML5新特性、语义化

**语义化标签：**header\nav\main\article\section\aside\footer

语义化的优点:

• 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
• 代码结构清晰，易于阅读，
• 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
• 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

10、隐藏元素

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件 ，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

z-index属性值并不是在任何元素上都有效果。它仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果。

11、px和rem的区别

px：像素单位

rem：相对于根元素的大小