Bootstrap布局
container容器是窗口布局的最基本元素，我们所推荐的样式都定义在。container或.container-fluid容器之中
flex-basis 该属性可以设置元素的宽，如果元素上同时使用wight，wight将会被覆盖失去作用，如果其中一个属性设置auto，那么另一个非auto的属性优先等级会更高。

flex-grow 就是比如有三个盒子总共空间比如有500px三个盒子每个用100px剩下的空间怎么办呢 现在就可以用到flex-grow比如，想让其中一个盒子表达就可以给这个盒子加入flex-grow属性，这个盒子变大另外两个被挤到右边，这个时候加flex-grow属性的盒子宽度比实际设置的宽度要大。他的目的很简单就是索取父元素容器的剩余空间，当然flex-grow；0的时候这时候所有盒子都不索取剩余空间。

如果其中一个盒子flex-grow属性值设置为1的时候，剩余的空间分成一份给他，在一个盒子如果在基础的情况下设置2的时候。他就会站剩下空间的2份，剩下一份给第一个盒子。

bootstrap,页面有四个宽度 大于768px小于768px ，小于992px,小于1220px。

bootstarp网格布局，可以想象把一个盒子分成12份 超小手机class前缀用col-xs-单位小于768px,小型设备平板电脑大于等于768px,class前缀用。col-sm-，中型设备台式电脑大于等于992px，class前缀.col-md-,大型大脑大于等于1200px class前缀用。col-lg-。上面每个盒子没列都是12份。

bootstrap 制作简单的卡片，
<div class="card">
<div class="card-body">简单的卡片</div>
</div>
卡片上面图片居中
<img src="..." class="rounded mx-auto d-block" alt="...">

display grid 网格布局

首先网格的父级元素display：grid

1. 网格列宽设置 竖向排列
   1grid-template-colums:100px 10px 100px 10px 100px;1表示第1列100px，第2列10px(此列可作为列与列之间的间隙
   )

2.网格高度设置 横向排列
grid-template-rows:auto 10px auto 10px;1表示第1行高度自适应内容，第2行10px(此列可作为列与列之间的间隙)
锚链接

必须要用a标签，#后面加上命名比如
<a href="#fff" class="text-f">
跳转的也是文件
<span class="text-q" id="fff">前端开发选项</span>想要跳转的文件加上id 加上之前的命名就ok了
ul 的使用 这是一个声明，后面跟属性比如文字type图像image 位置postion

list-style-type:none;什么意思
设置列表的格式为none。也就是没有格式。列表格式有好几种。有前面是圆点的。有是小正方快的等等。
动画效果展示

第一如何实现轮播图？

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持

通过 .carousel 命名样式引入轮播组件，同时为此控件设置唯的ID-尤其是当你在同一页面使用多个轮播效果时这是必须的。

经典幻灯片效果

这是一个经典的幻灯片示例，请注意轮播上的图像引用了 .d-block 、 .w-100两个样式，以修正浏览器预设的图像对齐带来的影响。

第二bootstrap有哪些常用组件？

第三margin负值在页面布局中有哪些应用？

MARGIN为负值时产生的影响1、对于自身的影响当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

2、对文档流的影响元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。3、

对浮动元素的影响负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。

4、对绝对定位的影响对于绝对定位元素，负margin会基于其绝对定位坐标再偏移

第四div+css的布局较table布局有什么优点？

一、div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

二、table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

1.容易上手。

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

第四css有哪些方式可以实现垂直居中？

第五什么是外边距重叠？重叠的结果是什么？

1.背景介绍外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。2.知识剖析当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加

2.知识剖析

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加

3.常见问题外边距重叠的意义？外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。解决外边距重叠？

4.解决方案外层元素padding代替内层元素透明边框 border:1px solid transparent;内层元素绝对定位 postion:absolute:外层元素 overflow:hidden;内层元素 加float:left;或display:inline-block;内层元素padding:1px;

    任务耗时8天