loveEveryWeb的博客

【代码】001-CSS-水平垂直居中布局。

Tips：在普通三角形基础上，添加 box-shadow ，设置阴影方向、偏移量，搭配伪元素遮挡 实现。Tips：filter 为滤镜的意思，可实现很多特殊样式。此处采用 filter 实现阴影。Tips：设置 div 盒子宽高为零，使用单边框实现。

Tips：background-position 控制绘制位置，linear-gradient 控制绘制内容。Tips：通过 linear-gradient 配合 background 属性实现。

Tips：父盒子font-size: 0，子盒子行内块，左侧子盒子100px，右侧子盒子 calc(100% - 100px)Tips：左侧子盒子浮动，右侧盒子 overflow:hidden;Tips：父盒子相对定位，左侧子盒子绝对定位，右侧子盒子margin-left。Tips：父盒子相对定位，padding-left，左侧子盒子绝对定位。Tips：左侧子盒子宽度固定，右侧子盒子 flex: 1。

前端兼容问题主要包含：不同浏览器兼容、Web端不同分辨率适配、H5移动端适配：不同浏览器兼容主要针对的是 IE 浏览器，因当前 IE 浏览器已下线，暂不讨论；Web端常用分辨率主要适配 1366-1920 屏幕，主要采用 媒体查询 实现，定制化可使用 window.onsize 监听；H5移动端适配，采用物理像素点，跟 px 之间的对应关系，做动态适配；

Tips：ul > li 元素布局时，li 元素行内块，设置 li 25% 宽度，但 4 个 li 放不下问题；Tips：BFC 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用；解决方案：给父元素设置 margin 保证外边距，给父元素设置 padding 保证内边距。对父元素设置 font-size: 0;应用：外边距合并问题、子元素浮动，父盒子高度塌陷问题、清除浮动、两栏布局；解决方案：尽量只给一个元素设置 margin。

💡Tips：动画效果会有影响浏览器加载性能，无特殊要求，尽量减少动画使用。

【代码】008-CSS-谷歌浏览器滚动条设置。

在实际工作中，CSS 编写更多的采用 CSS 扩展语言，像 Scss、Less 等，因其学习成本低，实用性高，被广泛应用。

💡Tips：项目开发需要定义书写规范，保证项目成员编写代码规范性，一致性。以下示例都采用 Less 扩展语言演示。