写CSS会遇到的问题及常用属性

1. 盒子模型塌陷
   网页结构布局 会遇到的问题
   给子元素设置外间距 会导致父容器连带移动
   如何处理：
   1. 给父元素设置 超出隐藏overfolw:hidden（构建相对独立的BFC）
   2. 给父元素设置边框
2. 单行溢出省略号显示和多行溢出省略号显示
   单行溢出：
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   多行溢出省略：
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp:2;
   -webkit-box-orient: vertical;
3. 元素的显示隐藏：
   隐藏： display: none;
   visibility: hidden;
   元素的显示就是没有上面的两个属性
   隐藏 display:none 显示： display: block; inline-block
   隐藏 visibility: hidden; 显示： visibility: visible;
4. display属性的table值 表格布局
   下面这三个是表格布局
   display: table;
   display: table-row;
   display: table-cell;
   display: list-item; 元素以列表的形式展示
5. 元素的水平浮动 float
   元素浮动之后会脱离文档流（不占位置）
   left 相对元素左边对齐
   元素在浮动之后 会不占位置 导致父容器撑不开：
   1.给父容器设置超出部分隐藏
   2.给父容器设置高
   3.在父元素内容之后 添加一个空元素 设置clear:both; left right
   <div style="clear: both;"></div>
6. 使用浮动构建多列布局：
   css里面的定位布局
   元素的定位 left top right bottom zindex 浏览器默认分层0
   static 静态的定位 默认定位 不能使用定位的属性
   relative 正常的文档流 占位置 可以使用定位属性
   相对自身的位置进行移动和分层
   absolute 绝对定位 不占位置脱离文档流 可以使用定位属性 默认相对浏览器定位
   绝对定位的元素相对父元素定位 给父元素设置相对定位
   fixed 固定定位 不占为值 相对浏览器 位置不变 可以使用定位属性
   下面这个定位是 默认是相对的 滑出屏幕且固定定位

position: -webkit-sticky;
              position: sticky;
              top: 0;

7. filter属性 调图片高亮模糊
   blur px单位值 模糊程度
   brightness %值 高亮
   contrast %值 明暗程度
   grayscale %值 灰白
   invert() %值 正常–会
   opacity %值 调透明度的
   saturate %值 饱和度