笔记CSS基础 CSS 基础盒模型每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding

CSS基础

CSS 基础盒模型以及后续引申问题

基本概念：content、padding、margin
标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人
CSS如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续追问这一条。
JS如何设置、获取盒模型对应的宽和高？这一步，已经有很多人答不上来了。
实例题：根据盒模型解释边距重叠。
BFC（边距重叠解决方案）或IFC。

每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
box-sizing:content-box; 标准盒模型
box-sizing:border-box; 怪异盒模型
标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；怪异模式下总宽度=width+margin（左右）

CSS如何设置

/* 设置当前盒子为 标准盒模型（默认） */
box-sizing: content-box;

/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box;

标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。

PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。

margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。

所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的`margin。

BFC 块级格式化上下文

块级格式化上下文浮动定位(float) 清除浮动（clear）

....一大推的规则会创建块格式化上下文

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件

根元素
position: absolute/fixed
display: inline-block / table / table
float 元素 float属性值不为none
overflow: 不为visible，可以让属性是 hidden、auto。
ovevflow !== visible

规则属于同一个 BFC 的两个相邻 Box 垂直排列属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 中子元素的 margin box 的左边，与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外) BFC 的区域不会与 float 的元素区域重叠计算 BFC 的高度时，浮动子元素也参与计算文字层不会被浮动层覆盖，环绕于周围

应用

阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

BFC的应用

举例1：解决 margin 重叠比如：针对下面这样的一个结构

<div class="father">
    <p class="son">
    </p>
</div>

上面的div结构中，如果父元素和子元素发生margin重叠，我们可以给子元素创建一个 BFC，就解决了：

<div class="father">
    <p class="son" style="overflow: hidden">
    </p>
</div>

第二条：BFC区域是一个独立的区域，不会影响外面的元素。

举例二: BFC区域不与float区域重叠

代码见github仓库

举例三: 清除浮动

有高度的盒子，才能关住浮动

如果想要清除浮动带来的影响，方法一是给父亲设置高度，然后采用隔墙法。方法二是 BFC：给父亲增加 overflow=hidden属性即可，增加之后，效果如下：

层叠式上下文

层叠式上下文的触发条件根层叠上下文(html)

position css3属性 flex transform opacity filter will-change webkit-overflow-scrolling

层叠等级：层叠上下文在z轴上的排序

左右居中方案

行内元素: text-align: center
定宽块状元素: 左右 margin 值为 auto
不定宽块状元素: table布局，position + transform

.wrap {
  text-align: center
}
.center {
  display: inline;
  /* or */
  /* display: inline-block; */
}
/* 方案2 */
.center {
  width: 100px;
  margin: 0 auto;
}
/* 方案2 */
.wrap {
  position: relative;
}
.center {
  position: absulote;
  left: 50%;
  transform: translateX(-50%);
}

上下垂直居中方案

定高：margin，position + margin(负值)
不定高：position + transform，flex，IFC + vertical-align:middle

/* 定高方案1 */
.center {
  height: 100px;
  margin: 50px 0;   
}
/* 定高方案2 */
.center {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}
/* 不定高方案1 */
.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* 不定高方案2 */
.wrap {
  display: flex;
  align-items: center;
}
.center {
  width: 100%;
}
/* 不定高方案3 */
/* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */
.wrap::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.wrap {
  text-align: center;
}
.center {
  display: inline-block;  
  vertical-align: middle;
}

选择器权重计算方式

!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

清除浮动

给父元素添加 overflow:hidden 或者 auto 样式，触发BFC
使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

.clearfix{
    zoom: 1; /*IE6*/
}
.clearfix:after{
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

左边定宽右边自适应方案

有四种布局方法 DOM树的解构

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

使用float+margin 来实现

.box {
 height: 200px;
}

.box > div {1.
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  margin-left: 200px;
  background-color: red;
}

利用calc计算宽度

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  width: calc(100% - 200px);
  float: right;
  background-color: red;
}

利用float+overflow实现

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  overflow: hidden;
  background-color: red;
}

使用flex实现

.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: blue;
}

.box-right {
  flex: 1; // 设置flex-grow属性为1，默认为0
  overflow: hidden;
  background-color: red;
}

两边定宽，中间自适应

方法：浮动，绝对定位 flexbox. grid

同时也需要注意HTML5的语义化表达方法1 方法2源码

方法一浮动方式

左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。中间不用设置宽度

方法二绝对定位

左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left和right 都为300px，即可。中间的宽度会自适应。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0px;
            margin: 0px;
        }

        .layout {
            margin-bottom: 150px;
        }


        .layout article div { /*注意，这里是设置每个小块儿的高度为100px，而不是设置大容器的高度。大容器的高度要符合响应式*/
            height: 100px;
        }

        /* 方法一 start */

        .layout.float .left {
            float: left;
            width: 300px;
            background: red;
        }

        .layout.float .right {
            float: right;
            width: 300px;
            background: blue;
        }

        .layout.float .center {
            background: green;

        }

        /* 方法一 end */


        /* 方法二 start */
        .layout.absolute .left-center-right {
            position: relative;
        }

        .layout.absolute .left {
            position: absolute;
            left: 0;
            width: 300px;
            background: red;
        }

        /* 【重要】中间的区域，左侧定位300px，右侧定位为300px，即可完成。宽度会自使用 */
        .layout.absolute .center {
            position: absolute;
            left: 300px;
            right: 300px;
            background: green;
        }

        .layout.absolute .right {
            position: absolute;
            right: 0;
            width: 300px;
            background: blue;
        }


        /* 方法二 end */
    </style>
</head>

<body>

    <!-- 方法一：浮动 start -->
    <!-- 输入 section.layout.float，即可生成  -->
    <section class="layout float">
        <!-- 用  article 标签包裹左、中、右三个部分 -->
        <article class="left-right-center">
            <!-- 输入 div.left+div.right+div.center，即可生成 -->
            <div class="left">
                我是 left
            </div>
            <div class="right">
                我是 right
            </div>
            <div class="center">
                浮动解决方案
                我是 center
            </div>

        </article>

    </section>
    <!-- 方法一：浮动 end -->

    <section class="layout absolute">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="right">
                我是 right
            </div>
            <div class="center">
                <h1>绝对定位解决方案</h1>
                我是 center
            </div>
        </article>
    </section>
</body>
</html>

使用flexBox 布局

将左中右所在的容器设置为display: flex，设置两侧的宽度后，然后让中间的flex = 1，即可。

使用网格布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        /* 重要：设置容器为网格布局，宽度为100% */
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;  /* 重要：设置网格为三列，并设置每列的宽度。即可。*/

        }

        .layout.grid .left {
            background: red;
        }

        .layout.grid .center {
            background: green;
        }

        .layout.grid .right {
            background: blue;
        }
    </style>

</head>

总结:

语义化掌握到位：每个区域用section、article代表容器、div代表块儿。如果通篇都用。div，那就是语义化没掌握好。
思维灵活且积极上进。题目中可以通过网格布局来体现。代码书写规范。注意命名。上面的代码中，没有一行代码是多的。

CSS页面布局方式

Position

关键字： static , absolute , relative , fixed ,sticky

auto自适应。受父级css影响，并自适应。全部占满可用区域

static

top , bottom , left, right, z-index 无效正常的布局方式 (上下文默认的方式)

relative

首先元素停留在原始的默认位置，而后在不改变原始布局的情况下调整位置(top,right.....)，同时保留原始位置,(所以可能会在原始的样式上留白) 对于table-row table-group 等无效

absolute

会被移出正常的文档流，相对于最近的非static的祖先元素进行偏移(没有的话就是body，则相当于初始的ICB(inital container block, 初始包含块)),不会保留原始位置可以设置外边距同时不会与其他位置合并

fixed

移出正常的文档流，不保留位置。相对于页面的视口(viewport)为固定定位.滚动时不变，会创建新的层叠式上下文。
当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky

正常的文档流，相对于最近的可滚动的祖先(nearing-scrolling-ancestor)以及contain-block(块级作用域).偏移值不影响其他元素的位置。
创建新的层叠式上下文，依附于最近的拥有滚动机制的祖先身上。(overflow:hidden,auto,scroll,overlay).即使该祖先不是真实可滚动的
跨越相对的阈值前为相对定位，跨越后为绝对定位

层叠式上下文 z-index 的计算方法

HTML 像是在z轴排列的样式，而层叠式上下文就像是对于HTML的一种三维构想

核心意思就是 index 为同一级别的比较。子元素就像版本号一样向后面叠加

子元素的 z-index都是相当于兄弟元素来说的。不影响父元素

层叠上下文可以包含层叠上下文，，从而共同构成层级
独立于兄弟元素，只考虑子元素
每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。

Root
 z-index 为 2
 z-index 为 4
    z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1
    z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3
    z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6
 z-index 为 5

外边距折叠

margin-top 和 margin-bottom 折叠为单边距，其大小为单个边距的最大值，称为边距折叠

有设定float以及position: absolute 的不会产生折叠行为也就是BFC

产生的条件

同一相邻元素之间就是兄弟元素之间
没有内容将父元素与后代元素分隔开也称之为margin击穿
- 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
空的块级元素

Why is float

一开始我并不了解浮动的意义，我不明白很多语句的作用是为了清除浮动。直接不写不就行了。 float的用处

例如头像问题，左边图片，右边文字。
如果对图片进行绝对定位的话。在改变图像的大小之后。可能会覆盖掉文字 清除float
clear both left right none inherit

float所引申出来的问题 --- 塌陷 float 是如何影响他们的父元素的

父元素只包含浮动元素，那么它的高度会塌缩为0 清楚浮动的技术
空div
overflow

省略写法四个值上右下左三个值上.左右.下两个值上下.左右

网页中，元素有三种布局类型

流动模型 (Flow)
浮动模型 (Float)
层模型 (Layer)

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动模型

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

浮动模型

任何元素在默认的情况下都不是浮动的。float我们可以由此定义

层模型

position: static relative absolute fixed

relative 和 absolute的联合使用

弹性盒模型flex

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性

三、容器的属性

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

flex-direction

决定主轴的方向，也就是项目排列的方向
默认为row 横向排列

flex-wrap属性

怎么换行
nowrap 默认不换行

justify-content属性

决定了项目在主轴上的对齐方式
flex-start 默认左对齐

align-items属性

决定了项目在交叉轴上的对齐方式
默认值为stretch

align-content属性

决定了项目在多跟轴线上的对齐方式

stretch 默认值

四、项目的属性

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

order 属性定义的是项目的排列顺序

flex-grow

flex-grow 定义的是项目放大的比例
默认为0

flex-shrink属性

flex-shrink属性定义的是项目的缩小比例默认为1 空间不足的话。项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性

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

flex属性

flex-grow flex-shrink flex-basis的简写默认值为0 1 auto

flex: 1 不是 1，1，auto 如果是auto的话，那么盒子会按照内容进行放大缩小 flex: 1 === flex: 1 1 + 0% 而设计成具体数字的时候，则会按照设计的长度等比例的放大缩小

align-self

align-items 的对项目的单独设置

grid 布局

是将网页划分成网格

grid-template-columns 属性，

grid-template-rows 属性

可以使用repeat 属性 repeat(3, 100px 50px 200px)

auto-fill 关键字每行自动填充关键字

fr 按照比例进行划分

grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

设置行间距与设置列间距

grid-template-areas

justify-items 属性，

align-items 属性， place-items

设置单元格内容的水平位置

参数设置： start,end,center,stretch

justify-content 属性，align-content 属性，place-content 属性

start | end | center | stretch | space-around | space-between | space-evenly

grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

设置项目在整个容器的位置

grid-row grid-colume

&-start &-end

grid-area

设置元素位于容器的位置
还可以当作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
grid-area: 1 / 1 / 3 / 3

display

可以设置的是元素的内部和外部显示类型

水平居中的方法

脱离文档流元素的居中

magin: auto
margin: 为负值另外设置top left为宽高的一半已知宽高
宽高不定实现盒子的水平垂直居中

未脱离文档流元素的居中

text-align: center vertical-align: center

弹性盒子方法

flex align-items: center justify-content: center

文档流

我经常可以看到什么脱离文档流。一直不太懂

Q: 脱离文档流就不占据空间了吗？ A: 可以这么说。更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。

Q: 脱离文档流是不是指该元素从dom树中脱离？ A: 不是，用浏览器的审查元素就可以看到脱离文档流的元素（例如被float了）依然会出现在dom树里，下面的截图里也可以看到。

另外需要注意的是

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

CSS动画和过渡

自己到面试指南的进阶里面看吧

关键词：animation / keyframes

自己到面试指南的进阶里面看吧

CSS3新特性

自己到面试指南的进阶里面看吧

列举一些CSS中可继承和不可继承的元素

绝大多数都是不可继承的

笔记

CSS基础

CSS 基础盒模型 以及后续引申问题

CSS如何设置

BFC 块级格式化上下文

层叠式上下文

左右居中方案

上下垂直居中方案

选择器权重计算方式

清除浮动

左边定宽右边自适应方案

两边定宽，中间自适应

CSS页面布局方式

Position

层叠式上下文 z-index 的计算方法

外边距折叠

Why is float

省略写法 四个值 上右下左 三个值上.左右.下 两个值上下.左右

网页中，元素有三种布局类型

弹性盒模型flex

三、容器的属性

四、项目的属性

grid 布局

grid-template-columns 属性，

grid-template-rows 属性

grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

grid-template-areas

justify-items 属性，

justify-content 属性，align-content 属性，place-content 属性

grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

grid-row grid-colume

grid-area

display

水平居中的方法

文档流

CSS动画和过渡

CSS3新特性

列举一些CSS中可继承和不可继承的元素

CSS 基础盒模型以及后续引申问题

省略写法四个值上右下左三个值上.左右.下两个值上下.左右