隐藏盒子的几种方式
隐藏盒子，有以下几种方式：
（1）方式一：
overflow：hidden; //隐藏盒子超出的部分
（2）方式二：
display: none; 隐藏盒子，而且不占位置(用的最多)
比如，点击X，关闭京东首页上方的广告栏。
（3）方式三：
visibility: hidden; //隐藏盒子，占位置。 visibility: visible; //让盒子重新显示
（4）方式四：
opacity: 0; //设置盒子的透明度（不建议，因为内容也会半透明），占位置
（4）方式五：
Position/top/left/...-999px //把盒子移得远远的，占位置。
（5）方式六：
margin-left: 1000px;
设置盒子的半透明
方式一：opacity: 0.4。优点是方便。缺点是：里面的内容也会半透明。
方式二：css3的技术来解决半透明。如下：
-
background: rgba(0,0,0,0.3);
-
background: rgba(0,0,0,.3);
备注：a指的是alpha透明度。
给标签的形状设置为圆角矩形
border-radius: 50%; border-radius: 10px 0 0 10px;
行高的问题：儿子把父亲撑开
比如对于下面这样的标签：
<div> <a href=""></a> </div>
前置条件：如果我们给父亲div的行高设为31px，然后给儿子a的行高也设置为31
结果：当我们给儿子a设置了字体属性之后，会发现，父亲被撑高为32px了。因为font字体自身会比较大，多撑出了一个像素。
解决办法：行内元素尽量不要设置font属性。对于行内元素而言，如果它和父亲都设置了行高，就不要去给自己设置font属性了。要么就，不要同时设置行高。
背景图不能撑开盒子
高和行高都可以城开盒子，但背景图不能撑开盒子。
JS
超链接<a>的href跳转
一个空白的超链接如下：
<a href=""></a>
当点击超链接时，由于 href 的属性值的不同，可以产生很多种情况：
href="" //刷新页面 href="#" //跳转到当前页面的顶部（不会刷新） href="javascript:void(0)" // 什么都不做 href="javascript:;" // 什么都不做
---------------------
让flex盒子中的子元素们，居中
flex布局常用的三行代码：
display: flex; justify-content: center; // 子元素在横轴的对齐方式 （左右居中） align-items: center; // 子元素在竖轴的对齐方式（上下居中）
让文字只显示一行，超出显示省略号
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
让文字最多只显示两行，超出后显示省略号
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
上面的代码中，我们把 -webkit-line-clamp的值设为1，也能达到“让文字只显示一行，超出显示省略号”的效果。
参考链接：css 实现div内显示两行或三行，超出部分用省略号显示_css 两行 省略-CSDN博客
让文字最多只显示三行，超过后显示省略号
如果当前元素处于flex布局等复杂的场景中，那么，样式可能比较难调，用上面两种写法未必能达到预期效果。此时可以试试下面这种写法（多加了一行
white-space: normal）。
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; white-space: normal;
问题描述：文本内容里自带了换行，但是在前端没有展示出来
解决办法：增加如下属性即可。
white-space: pre-wrap;
或者：
white-space: pre-line;
2019-11-12-CSS的逗号和空格
CSS的逗号一般写在()里。不同属性值之间，用的是空格，不是逗号。比如：
transform: translate(-50%, -50%); /* 这种写逗号 */ transform: translate(-50%, -50%) scale(0.5); /* 不同属性值之间，用的是空格 */ background-size: 100% 100%; /* 这里是空格，不是逗号 */
2019-11-01
人民币价格中的羊角符号，有半角和全角之分：
-
¥半角
-
￥全角
可以看出，半角的宽度更小。考虑到容器的空间一般比较紧张，所以推荐使用半角。
2019-11-19-鼠标悬停时，弹出提示文字
参考链接：css实现鼠标悬浮后的提示效果
2019-11-27-图片的宽度固定，高度自适应
这个场景下，别用background。直接放img元素就好了，将图片的高度设置为auto。
2020-03-26-通过CSS扩大点击热区
.button {
position: relative;
/* [其余样式] */
}
.button::before {
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
注意，button 里面不要写 overflow: hidden 属性，否则扩大的热区无效。
参考链接：CSS：扩大可点击区域 - 简书
2020-10-09-上下滚动，不显示滚动条
.sku_list {
margin-left: 25rpx;
display: flex;
flex-wrap: wrap;
height: 617rpx;
overflow: hidden;
overflow-y: scroll;
/* 去掉滚动条 */
&::-webkit-scrollbar {
display: none;
}
}
注意，去掉滚动条的那行代码里，建议用display: none;，不要用width: 0;。因为，当你需要设置横向滚动的效果时，display: none;这个属性的效果更好，不会改变容器的size；width: 0;可能会改变容器的size。
参考链接：
2021-05-06-设置页面的宽高，撑满屏幕
一般来说，我们在开发一个页面的时候，默认是希望这个页面的宽高能够撑满屏幕的。代码可以这样写：
.app {
width: 100vw;
min-height: 100vh;
}
2021-09-13-JS中插入CSS
代码举例：
new_element = document.createElement("style");
new_element.innerHTML =(".tucao-content p{font-size:18px;}");
document.body.appendChild(new_element);
参考链接：
-
js 插入公共css的方法：js 插入公共css的方法_js 插入一个公共样式-CSDN博客
---------------------
常见问题
你是如何理解 HTML 语义化的？
语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。
举例：段落用 p，边栏用 aside，主要内容用 main 标签。
好处：
-
便于开发者阅读和维护
-
有利于SEO：让浏览器的爬虫和辅助技术更好的解析，
语义化标签介绍：
在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。
20180322_1120.jpg
参考链接：
meta viewport 是做什么用的，怎么写？
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
控制页面在移动端不要缩小显示。
canvas 元素是干什么的？
看 MDN 的 canvas 入门手册。
说一下CSS盒模型
可以参考本人的另外一篇文章：《02-CSS基础/06-CSS盒模型详解》。
css reset 和 Normalize.css 有什么区别
此题考英文。
二者都是用来统一浏览器的默认样式：
-
reset：重置。相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。（一刀切）
-
Normalize.css：标准化。相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。（去伪存真）
参考链接：
选择器的优先级如何确定
-
选择器越具体，优先级越高。 #xxx 大于 .yyy
-
同样优先级，写在后面的覆盖前面的。
-
color: red !important; 优先级最高。
BFC 是什么
overflow:hidden ：取消父子 margin 合并。 （另一种推荐做法：padding-top: 0.1px;）
如何清除浮动
（1）overflow: hidden
（2）.clearfix 清除浮动写在爸爸身上
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 兼容 IE */
.clearfix {
zoom: 1;
}
伪类和伪元素的区别是什么？
概念上的区别：
-
伪类表示一种状态
-
伪元素是真的有元素。比如 ::after 是真的有元素，可以在页面上显示内容。
使用上的区别：
-
伪类：使用单冒号
-
伪元素：使用双冒号
参考链接
Bootstrap 中文文档：表格 · Bootstrap
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
