【Effective Web】html/css优化和技巧

html/css优化和技巧

html/css可以做到一些js的功能，减少js操作dom的高昂成本。

巧用伪类

显示勾选时文案

checkbo勾选时触发，实现checkbox的简单选中事件处理

<template><input type="checkbox" /><span class="checkbox">checked</span>
</template><style lang="less">
.checkbox {display: none;
}
input[type="checkbox"]:checked + .checkbox {display: inline;
}
</style>

在这里插入图片描述

显示tooltip

使用:hover和:before组合，把提示文案放在span上，鼠标悬浮时显示提示信息。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><p >hello <span data-title="hello"> World</span></p></div>
</body>
</html><style> 
.container {width: 500px;height: 200px;padding: 20px;
}
span {position: relative;
}
span:hover::before {content: attr(data-title);position: absolute;top: -150%;left: 50%;transform: translate(-50%);white-space: nowrap;background-color: #191919;padding: 4px;color: #fff;border-radius: 4px;
}</style>

效果如下：
在这里插入图片描述

多列等高

多列文本展示在同一行，要控制高度一致。

在这里插入图片描述

方式一：使用flex布局

.container {width: 800px;display: flex;div {background-color: bisque;border: 1px solid #dfdfdf;border-radius: 4px;padding: 0 16px;margin: 0 8px;}
}

方式二：使用table布局

利用table的自适应特性，容器设置display为table,子元素数组display为table-cell.

.container {display: table;border-spacing: 8px;div {display: table-cell;background-color: bisque;border-radius: 4px;width: 1000px;p,h2 {padding: 4px 8px;}}
}

另一个优点是：响应式开发时，借助媒体查询动态调整display为block，从而改变排列顺序。

@media (max-width: 500px) {.container {display: block;div {display: block;width: 100%;}}
}

在这里插入图片描述

使用表单提交

参数拼接

form标签有个action属性,可以自动拼接输入框的值到网址参数中，不需要一个个的获取输入框的值
在这里插入图片描述

自动监听回车事件

如果需要做表单事件，那就监听submit事件,还可以用这个来自动监听回车事件。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form id="form1" name="form1" method="post" action="" onsubmit="return fun()"><input type="text" name="t" id="t" /><input type="submit"/></form><script>function fun(){var t = document.getElementById("t");alert(t.value);return false;}</script></body>
</html>

css三角形

画一个三角形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><div class="triangle"></div></div>
</body>
</html><style>
.triangle {width: 0;height: 0;border-bottom: 50px solid #000;border-left: 50px solid transparent;border-right: 50px solid transparent;
}
</style>

在这里插入图片描述

画一个等边三角形

三角形的高为border-bottom,三角形底为border-left/border-right * 2,高与底的比是sqrt(3) / 2
border-bottom为40px, border-left值应该为40 / sqrt(3) 约等于23px
在这里插入图片描述

画消息框的三角形

消息框的左侧有一个指向左边的三角形，这个三角形可以这样画，先画一个指向左边的三角形，颜色和消息框的border一致
再画一个白色的三角形叠在上面，看起来就像突出的三角形。对面是这样的：

<div class="message">Hello World</div>
.message {width: 200px;height: 50px;border: 1px solid #dfdfdf;position: relative;line-height: 50px;padding: 0px 4px;border-radius: 4px;
}
.message::before {content: '';position: absolute;top:20px;left: -10px;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right:  10px solid #dfdfdf;
}.message::after {content: '';position: absolute;top:20px;left: -8px;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right:  10px solid white;
}

效果如下：
在这里插入图片描述
如果有阴影还可以加filter

.message {width: 200px;height: 50px;border: 1px solid #dfdfdf;position: relative;line-height: 50px;padding: 0px 4px;border-radius: 4px;filter: drop-shadow(0 0 2px #999);background-color: #ffffff;
}

在这里插入图片描述

尽可能地使用伪元素

伪元素是一个元素的子元素，像:before/:after可以看成是元素的第一个元素或最后一个元素，且伪元素不能被js获取。优点就是可以用伪元素来制造视觉效果，又不影响dom渲染，对js是透明的。

例子：

分割线

.hr {font-size: 14px;position: relative;text-align: center;
}
.hr::before,
.hr::after {content: '';position: absolute;top: 10px;width: 200px;height: 1px;background-color: #ccc;
}
.hr::before {left: 0px;
}
.hr::after {right: 0px;
}

在这里插入图片描述

清除浮动

给要清除浮动加一个：after:

.clear:after {
content: "";
display: table;
clear: both;

禁用所有表单项

当表单提交后，所有表单禁用，如果一个个加disabled比较麻烦，可以用after给form加一个同样大小的元素，覆盖原来的form元素

    .form::after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;}

在这里插入图片描述

计算个数

counter-reset结合伪元素显示勾选的个数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="container"><div class="choose"><label><input type="checkbox" />苹果</label><label><input type="checkbox" />葡萄</label><label><input type="checkbox" />西瓜</label><label><input type="checkbox" />芒果</label></div><span>选择了<span class="count"></span>种水果</span></div></body>
</html><style>.container {width: 500px;margin: 0 auto;}.choose {counter-reset: fruit;}.choose input:checked {counter-increment: fruit;}.count::before {content: counter(fruit);}
</style>