CSS

css初始化

reset.css

necolas/normalize.css

常用属性

white-space：文本如何处理空白符/换行符，以及是否自动换行

word-break：文本内容断行规则，默认CJK文字断行，非CJK单词内不断行

overflow-wrap：文本溢出边界时断行处理

特殊属性

基础布局

头部/侧边栏

// 主题定位方法
.header{
    height:300px;
}
.main{
    position:absolute;
    top:300px;
    bottom:0;
}
// 头部定位方法
.header{
    position: absolute;
    height: 300px;
}
.main{
    box-sizing: border-box;
    padding-top: 300px;
    height: 100%;
}

sticky

粘黏定位

.wrapper {
  overflow: auto;
}
.ele {
  position: sticky;
  top: 0;
}

内容布局

垂直水平居中

行内元素： 适用于文本框，文字，图片等，兼容性优

.child{
    line-height:40px;
    text-align:center;
}

块级元素： 适用于宽高固定块级元素，兼容性良

.parent{
    position:relative;
    height:200px;
}
.child{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    right:0;
    left:0;
    width:100px;
    height:80px;
}

兼容性更优

.parent {
    position: relative;
    height: 200px;
}
.child {
    position: absolute;
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
    left: 50%;
    top: 50%;
}

宽高不固定的块级元素： 兼容性IE9+且前缀(-ms-)可行

.parent {
    position: relative;
    height: 200px;
}
.child {
    position: absolute;
    width: 160px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}

table块实现居中

.parent {
    display: table-cell;
    height: 300px;
    vertical-align: middle; //子元素垂直居中
}

子元素须设置 margin:0 auto; 水平居中，兼容性良

文字内容居中

单行居中，多行居左

.container{
  width: 300px;
}
.content {
  display: inline-block;
  margin: 0 auto;
}

同理可用 flex 实现

Rem布局

css实现：html { font-size: calc(100vw / 750 * 100); }

less实现：html { font-size: 100vw / 750 * 100; }

sass实现：

@use "sass:math";
html {
  font-size: math.div(100vw, 750) * 100;
}

注：750存在的意义是，在750宽下1rem=100px，由于我们设计图是750基准，所以此时28px=0.28rem，在浏览器上有助于开发调试换算；且在375px能整除；

js实现：适用于控制页面内容展示范围，且不依赖vw计算html字号，兼容性更好；

const docEle = document.documentElement;
const minDeviceWidth = 320;
const maxDeviceWidth = 540;
setRemUnit();
window.addEventListener('resize', setRemUnit);
window.addEventListener('pageshow', function(e) {
  if (e.persisited) setRemUnit();
})
//计算并设置rem单位
function setRemUnit() {
  var docEleWidth = docEle.clientWidth;
  var w = docEleWidth > maxDeviceWidth ? maxDeviceWidth :
    (docEleWidth < minDeviceWidth ? minDeviceWidth : docEleWidth);
  const remFontsize = (w / 750) * 100 + 'px';
  docEle.style.fontSize = remFontsize;
}

css技巧

下三角形

width: 0;
height: 0px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #ff260a transparent transparent transparent;

0.5像素的边框/分割线

.microBorder{
  background-image: -webkit-linear-gradient(to bottom,#eee 50%,transparent 50%);
  background-image: linear-gradient(to bottom,#eee 50%,transparent 50%); 
  background-size:  100% 1px;
  background-repeat: no-repeat; 
  background-position: bottom right;
}

自定义滚动条样式

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  background-color: #c4c4c4;
  border-radius: 3px;
}

常见问题

替换图片闪烁

更换img src时闪烁，原因是css加载资源并渲染需要时间；

解决：

预加载图片：使用 <link rel="preload"...> 或 js手动预加载；
使用切换背景图方式替代，hover 下将旧图片移除元素视口；

速查笔记——CSS篇

优雅使用css布局网页以及添加样式

CSS