CSS 知识点总结
2020-10-19 本文已影响0人
limengzhe
CSS，全称 Cascading Style Sheets，即层叠样式表，用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其它装饰性的特征。
盒模型和 box-sizing 属性？
.box {
box-sizing: content-box; /* 标准（默认）盒子模型 */
box-sizing: border-box; /* width = border + padding + 内容的 width，height = border + padding + 内容的 height。 */
box-sizing: padding-box; /* 仅 Firefox 50 之前的版本支持 */
box-sizing: initial; /* 初始值 */
box-sizing: inherit; /* 继承父元素 */
box-sizing: unset; /* 未设置 */
}
CSS 中常见的隐藏元素的方法？
/* 以下属性设置其中一项即可 */
.hide {
opacity: 0; /* 设置透明度为 0 */
visibility: hidden; /* 设置可见性为隐藏 */
display: none; /* 设置为不显示 */
width: 0; /* 同上 */
height: 0; /* 同上 */
}
简述渐进增强和优雅降级之间的不同？
-
概述
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 -
区别
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
如何使用 CSS 创建一个三角形?
<style>
div {
width: 0;
border: 30px transparent solid;
border-right-color: red;
}
</style>
常用的水平垂直居中一个元素的方法有哪些？
- 使用
flex
<html>
<head>
<style>
.outer {
width: 200px;
height: 200px;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 100px;
height: 100px;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
- 使用
position
<html>
<head>
<style>
.outer {
width: 200px;
height: 200px;
background-color: #ddd;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: #aaa;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
- 使用
transform配合position
<html>
<head>
<style>
.outer {
width: 200px;
height: 200px;
background-color: #ddd;
position: relative;
}
.inner {
width: 100px;
height: 100px;
background-color: #aaa;
position: absolute;
top: 0;
left: 0;
transform: translate(50%, 50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
使用 inline-block
<html>
<head>
<style>
.outer {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #ddd;
font-size: 0;
}
.inner {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background-color: #aaa;
line-height: initial;
}
.span {
display: inline-block;
vertical-align: middle;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<span class="span"></span>
</div>
</body>
</html>
- 使用
table-cell
<html>
<head>
<style>
.outer {
width: 200px;
height: 200px;
background-color: #ddd;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.inner {
width: 100px;
height: 100px;
display: inline-block;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
- 使用
grid
<html>
<head>
<style>
.outer {
width: 200px;
height: 200px;
background-color: #ddd;
display: grid;
}
.inner {
width: 100px;
height: 100px;
background-color: #aaa;
align-self: center;
justify-self: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
