一、浮动元素的一些特点
浮动的目的是做文字环绕效果的。
浮动元素，只会压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字/图片。
绝对定位/固定定位会压住下面标准流所有的内容，包括文字/图片。
二、为什么要清除浮动？怎么清除浮动？
浮动脱离了正常文档流，会导致父元素高度塌陷，后面元素会挤到浮动元素下方，造成布局错乱。
清除浮动:
1、给父盒子设置合适的高度。
2、给父盒子添加样式overflow: hidden/auto
相当于触发 BFC，让父级紧贴内容，包括使用了浮动的盒子，为了去除兼容性问题，会添加zoom：1
3、在浮动元素后面添加一个元素，并设置clear: both
4、采用伪元素，在父元素上添加。
.parent::after {
content: "";
clear: both;
}
5、父元素使用 Flex 布局，display: flex。
三、什么是 BFC
1、BFC 块级格式化上下文的特征：
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
- 内部的 Box 会在垂直方向，从顶部开始一个接一个地放置。
- Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
- 每个元素的 margin box 的左边，与包含块 border box 的左边相接触，即使存在浮动也是如此。
- BFC 的区域不会与 float box 重叠。
- 计算 BFC 的高度时，浮动元素也参与计算。
2、创建块级格式化上下文：
- 浮动元素的 float 不为 none
- 绝对定位元素的 position 不为 static 或 relative
- display：inline-block、table-cell、table-caption、flex、inline-flex
- overflow 值不为 visible 的块元素(overflow: hidden，overflow: auto)
3、BFC 作用：
- 可以清除浮动，防止父元素高度塌陷。overflow: hidden
- 防止外边距 margin 重叠，给两个元素分别设置 BFC
- 可以阻止元素被浮动元素覆盖
- 自适应两栏布局
四、display：flex 和 display：box 浏览器兼容写法
display：flex 和 display：box 都可用于弹性布局。
.container {
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
五、CSS 实现禁止鼠标点击事件
pointer-events: none
六、如何使文本以大写字母开头
text-transform: capitalize
七、取消 input 输入框获取焦点时的蓝色轮廓线
outline: none
八、防止拖拽文本域 textarea 放大缩小
resize: none
九、如何修改 Chrome 记住密码后自动填充表单的黄色背景
input: -webkit-autofill,
textarea: -webkit-autofill,
select: -webkit-autofill {
background-color: #fff;
background-image: none;
color: #000;
}
十、隐藏滚动条
只要网页内容大于视窗，滚动条就会出现。
目标：没有滚动条影响美观，但仍旧可以滚动。
方法一：在 webkit 内核的浏览器里可以定义滚动条样式，在 CSS 初始处定义。
/* Chrome */
body::-webkit-scrollbar {
display: none;
}
/* IE/Edge */
body {
-ms-overflow-style: none;
}
/* Firefox */
html {
overflow: -moz-hidden-unscrollable; /* 注意！若只打 hidden，chrome 的其它 hidden 会出问题 */
height: 100%;
}
body {
height: 100%;
width: calc(100vw + 18px); /* 浏览器滚动条的长度大约是 18px */
overflow: auto;
}
方法二：在 div 外面再套一个 div，内层是有滚动条的，但是我们看不到了。
外面的 div 设置overflow: hidden;
里面的 div 设置overflow-y: scroll; overflow-x: hidden;
再设置外层 div 的 width 小于内层 div 的 width。
<div class="outer">
<div class="inner">
</div>
</div>
.outer {
overflow: hidden;
width: 200px;
}
.inner {
overflow-y: scroll;
overflow-x: hidden;
width: 220px;
}