煲纸学习笔记——cssTips

清浮动 .clearfix::before, .clearfix::after{ content:" "; display: block; clear:both; } 定位 相对定位：起点是该元素在文档流中的位置 但是会提高该元素的层级 如和其他层相遇会覆盖 不脱离文档流 元素不会脱离文档流（重要）不改变后面的元素布局 绝对定位 ：起点是包含块 起点是开启定位的祖先块元素 行内元素的会变块元素 高度被内容撑开 开启绝对定位的时候，把偏移量都变0就可以在包含块中 垂直水平居中 元素会脱离文档流会影响后面的布局 宽度 可以设置一个公共类 设置页面最小的宽度min-width文字多出来的变省略号 效果如下图 .class{ width:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

元素对齐 居中问题

水平对齐text-align: 可选值 left right center justity (两边对齐)

垂直对齐 当字体大小不一样时对齐方式

line-hight:和元素高度一样就可以

vertical-align: baseline基线对齐 （默认值）top 顶部对齐bottom 底部对齐middle居中对齐

隐藏文字方式: text-index: -9999px；

如何隐藏一个元素

height：0; over-flow:hidden； // 和display：none一样 visibility:hidden; // 渲染但是隐藏 display:none; // 不渲染 opacity:0 // 透明度为0

在项目上线的时候需要压缩代码，以保证加载速度。

做背景图片全覆盖

body { background: url(../assets/img/welcome.jpg) center no-repeat; background-size: cover; min-height: 100vh; // 最小高度 justify-content: center; align-content: center; display: flex; margin: 0; padding: 0; box-sizing: border-box; } 移动端滚动条卡顿需要 overflow: scroll; -webkit-overflow-scrolling: touch;//这个属性可以实现，手指离开屏幕会惯性滑动一段距离