文章目录
1. 实现两栏、三栏布局的方法:
1.1 表格布局:
<style>
.container {
display: table;
width: 100%;
}
.left-column, .right-column {
display: table-cell;
}
</style>
<div class="container">
<div class="left-column">左栏内容</div>
<div class="right-column">右栏内容</div>
</div>
1.2 浮动 + 外边距布局(已不推荐使用):
<style>
.container {
overflow: hidden; /* 清除浮动 */
}
.left-column, .right-column {
float: left;
width: 50%;
}
</style>
<div class="container">
<div class="left-column">左栏内容</div>
<div class="right-column">右栏内容</div>
</div>
1.3 内联块布局:
<style>
.left-column, .right-column {
display: inline-block;
width: 49%; /* 防止换行导致间距 */
vertical-align: top; /* 使列顶部对齐 */
}
</style>
<div class="left-column">左栏内容</div><div class="right-column">右栏内容</div>
1.4 弹性盒子布局(Flexbox):
<style>
.container {
display: flex;
}
.left-column, .right-column {
flex: 1;
}
</style>
<div class="container">
<div class="left-column">左栏内容</div>
<div class="right-column">右栏内容</div>
</div>
2. position:absolute / fixed区别:
2.1 前者相对最近的 absolute/relative 定位:
position: absolute;
元素会相对于最近的具有定位属性(position: relative/absolute/fixed)的父元素进行定位。
2.2 后者相对屏幕(viewport):
position: fixed;
元素会相对于浏览器窗口进行定位,始终固定在屏幕上的某个位置,不随滚动条滚动而改变位置。
3. dispaly:inline-block间隙:
3.1 原因:字符间距
display: inline-block;
元素会受到字符间距的影响,因为HTML中 inline 元素之间的空格和换行都会导致间距。
3.2 解决:消除字符或者消除间距
- 消除字符间距:将HTML中 inline-block 元素写在一行,去掉空格和换行。
- 消除间距:设置父元素
font-size: 0;
或者给父元素添加letter-spacing: -1em;
。
4. 如何清除浮动:
4.1 父元素布局不会管浮动元素:
- 当子元素浮动时,父元素的高度会坍塌,不会自动撑开,导致布局混乱。
4.2 让盒子负责自己的布局:
- 给父元素添加
overflow: hidden;
或overflow: auto;
可以使父元素包裹浮动元素,从而保持正确的布局。
4.3 ::after
伪元素清除浮动:
<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="clearfix">
<!-- 浮动元素在这里 -->
</div>
5. 如何适配移动端布局:
5.1 viewport:
- 在移动端,通过设置视口的宽度,让网页以正确的宽度显示在移动设备上,可以在HTML文件的头部添加以下代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5.2 rem、viewport、media query:
- 使用相对单位
rem
,根据不同设备的 viewport 宽度来设置基准字体大小,从而实现响应式布局。 - 使用
@media
查询来根据不同屏幕尺寸应用不同的样式。
5.3 设计上:隐藏、折行、自适应:
- 根据设备尺寸,可以隐藏某些不必要的元素或调整元素的显示方式。
- 对于大块文本,可以考虑使用折行或自适应布局,以适应不同屏幕尺寸。
6. CSS样式(选择器)的优先级:
6.1 计算权重:
- ID选择器的权重最高,class选择器次之,标签选择器最低。
- 在计算优先级时,将权重表示为四位数:
a,b,c,d
,其中a
表示ID选择器的个数,b
表示class选择器、属性选择器和伪类选择器的个数,c
表示标签选择器的个数,d
表示伪元素选择器的个数。 - 权重高的样式会覆盖权重低的样式。
6.2 !important
:
- 使用
!important
声明的样式具有最高优先级,尽量避免滥用该特性,以免造成难以维护的代码。
6.3 内联样式:
- 在HTML标签内使用
style
属性设置的样式具有更高的优先级。
6.4 后写的优先级高:
- 当出现样式冲突时,后写的样式会覆盖前面的样式。
7. 雪碧图作用:
7.1 减少HTTP请求数,提高加载性能:
- 将多个小图标或背景图合并成一个
雪碧图,减少了图片请求的数量,加快了页面加载速度。
7.2 有一些情况可以减少图片加载:
- 通过调整背景图的位置来实现状态切换,而不需要再加载不同状态的图片。
8. 自定义字体使用场景:
8.1 宣传、品牌、banner等固定文案:
- 使用自定义字体可以增加页面的独特性和吸引力,用于突出品牌或特定文案。
8.2 字体图标:
- 自定义字体可以将图标制作成字体图标,优势是可以调整图标大小和颜色,减少图标文件的数量,提高性能和可维护性。
9. Base64使用:
9.1 减少HTTP请求:
- 将小图片转换为Base64编码,直接嵌入HTML或CSS中,从而减少图片的HTTP请求,适用于较小的图标或背景图片。
9.2 适用于小图片:
- Base64编码会增加图片大小,适用于小图标或者图形,不适合大图片,因为会导致HTML或CSS文件体积增大。
9.3 Base64的体积约为原图的4/3:
- Base64编码会让图片数据增大,约为原图的4/3,所以只适用于小图标或小图片。
10. 伪类和伪元素的状态:
10.1 伪类表示状态:
- 伪类用于选择元素的特定状态,例如
:hover
表示鼠标悬停状态,:active
表示元素被激活状态,:focus
表示获取焦点状态等。
10.2 伪元素是真的有元素:
- 伪元素用于在选中的元素的前面或后面插入一些内容,例如
::before
和::after
。
10.3 前者单冒号,后者双冒号:
- 伪类使用单冒号
:
表示,伪元素使用双冒号::
表示(CSS3规范)。在旧版CSS中,伪元素使用单冒号表示,但为了兼容性,建议使用双冒号。
11. 如何美化checkbox:
11.1 使用 label[for]
和 id
:
- 将checkbox隐藏,使用label标签关联checkbox,点击label时会触发checkbox的选中状态。
11.2 隐藏原生input:
<style>
input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
</style>
11.3 使用:checked
+ label
:
<style>
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
display: inline-block;
width: 20px;
height: 20px;
background-color: #ccc;
}
input[type="checkbox"]:checked + label {
background-color: #f00; /* 当复选框被选中时改变样式 */
}
</style>
<input type="checkbox" id="checkbox">
<label for="checkbox"></label>