-
css盒子模型塌陷问题（当父容器没有内容，给子容器设置外间距，父容器连带向下）怎么处理：
1-1给父容器设置上边框border-top: 1px solid transparent;box-sizing:border-box;
1-2给父元素设置内边距 padding: 1px;
1-3给父元素设置超出部分隐藏 overflow: hidden -
css盒子超出部分隐藏（父元素框内如果有文字超出，超出部分会存在隐藏还是显示）
overflow: hidden内容会被修剪，并且其余内容是不可见的。
overflow: visible默认值。内容不会被修剪，会呈现在元素框之外。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。（超出部分会通过滚动条显示）
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 //会跟随父元素
inherit 规定应该从父元素继承 overflow 属性的值。overflow-x: hidden;
overflow-y: scroll;//x轴隐藏，y轴显示 -
css 里面的display属性
3-1作用：3-1-1块元素转化行元素: display: inline; // 转为行元素，行元素的大小由内容自动撑开。 display: inline-block;//转换成行级块。
网页正常情况 : 两个行级块对不齐的问题时考虑BFC（给元素添加overflow: hidden； 构建成另一个BFC来处理）
3-1-2行元素转化块元素:display:block; // 行元素的大小由内容自动撑开。
3-2值： block/none作用是元素的显示/隐藏，隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是这两种方法会产生不同的结果： visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
元素隐藏：display:none；/visibility: hidden;
显示：display:block/inline-block; / visibility: visible;
3-3table :用于table表格多列布局
display: table;//table表格布局，块级元素
display: table-row;//作为行显示相当于tr
display: table-cell;//表格里面的列相当于td
3-4list-item；// 把元素当列表显示，不排成一排 -
元素的浮动布局（浮动之后元素不占位置）
4-1元素水平浮动float ：left元素左浮动和right右浮动，元素浮动之后不会影响前面的元素 ，导致后边元素的重排，浮动元素会脱离文档流（浮动元素不占位置）
4-2 子元素浮动，影响父元素撑不开(或影响后边元素的布局)处理时要 针对性选择
4-2-1.直接给父元素设置高
4-2-2.给父元素设置 overflow: hidden; 撑开父元素 不影响后边元素的布局
4-2-3.在父元素内部后边添加一个空容器 设置<div style="clear: both;"></div>//clear 清除浮动 ， both /(left right ) /left / right -
元素的定位： position属性： 元素在除静态定位时会使用： left //左边距 right top bottom(边距属性) z-index(分层 浏览器默认0 ，越往9999层，越在上面 )，注意 ： 固定定位和绝对定位的元素都需要设置宽高
5-1.static （静态定位） 默认定位：即没有定位，正常的文档流，不受上面的五个属性影响
5-2.relative 相对定位 ： 占位置的，受五个属性的影响；其中四个移动属性 ， 是相对原先的位置进行移动
5-3.absolute 绝对定位：不占位置 脱离文档流，下面的元素自动顶上， 受五个属性的影响；如果父元素没有相对定位，则默认相对浏览器定位 四个属性 相对浏览器移动，反之 父容器有相对定位 则相对父容器移动（有父容器相对于父容器定位，没有父容器相对于浏览器定位）。子集元素 后绝对定位在上面。
5-4. fixed固定定位：不占位置 ，相对浏览器定位的 ， 进行左上右上移动的，可分层
5-5.sticky粘性定位：可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：1、父元素不能overflow:hidden或者overflow:auto属性。2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位3、父元素的高度不能低于sticky元素的高度4、sticky元素仅在其父元素内生效 -
图片滤镜的样式 filter：
blur//模糊程度， blur(10px) ， px像素值 ， 越高越模糊
brightness//设置暗和高亮 ， 百分比值，越大越亮
contrast//设置图像的对比度 ， 百分比值，
grayscale//设置图像的灰度 ， 百分比值，越大越黑白效果
opacity//设置透明度 ， 百分比
saturate//设置饱和度 ，百分比
img{
filter:drop-shadow(10px 10px 10px red ) blur(1px);//给图像设置阴影效果（x偏移量，y偏移量，blur模糊度，spreed，color）
}
- 背景色渐变background: linear-gradient(90deg, red, green, blue, orangered, deeppink, cornflowerblue);
第一个参数：为方向 to left //从左开始渐变；也可以角度 0deg//下到上渐变，90deg//从左开始渐变 - 块元素水平居中
margin: 0 auto; - vertical-align: middle; 让父元素内部的子集 相对垂直对齐
总结：1.什么是文档流和标准流
2.z-index(分层 浏览器默认0 ，越往前层值越大 )？？？？
3.relative 相对定位 ： 占位置的。是占什么位置？?
4.css设置雪碧图
5.y轴坐标越往上越负
6. 块元素转化为行级块之后,元素之间默认大概5px的间距,处理时给父元素设置字体大小为0，再给子集设置字体大小
7. 做导航等宽时，直接给子集设width和text-align：center；或padding
8. .menu:after{} 应该是menu的所有子集之后，伪类？？??
9. content内容的意思