前言
该文章记录一些CSS基础知识，慢慢将会添加更多知识，所有内容均从网上整理而来，加上自己的理解做一个整合，方便工作中使用。
二、实际问题
1. Flex布局+文本隐藏问题
一个父级容器里包含三个子级容器，中间容器自适应宽度，左右容器内容不一定，当左右容器内容过多时，挤压中间的容器的宽容，如果中间容器文字内容过多时单行打点处理
<div class="case">
<div class="no">10001号</div>
<div class="name">
天齐锂业股份有限公司
</div>
<div class="vote_nums">99999票</div>
</div>
//css
//样式解决方法：
//父盒子使用display：flex
//左右盒子使用 flex-shrink: 0;//不许变形
//中间盒子使用 flex:1; 自动占满剩余宽度
.case {
width: 16rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.no,
.vote_nums {
flex-shrink: 0;//左右盒子使用 flex-shrink: 0;//不许变形
height: .96rem;
font-size: .3733rem;
line-height: .96rem;
}
.name {
flex: 1; //flex:1; 自动占满剩余宽度
overflow: hidden; //单行打点
white-space: nowrap;
text-overflow: ellipsis;
height: .96rem;
margin: 0 .5333rem;
font-size: .3733rem;
line-height: .96rem;
}
2. 文字使用渐变色
<div class="desc">
他出生于单亲家庭，自小父母离异，13岁随家人移民加拿大。
</div>
.desc {
/* 线性渐变背景，方向向上 */
background-image: linear-gradient(to top, #00C6FF, #8AFFD2);
/* 背景被裁剪成文字的前景色 兼容性不太好*/
-webkit-background-clip: text;
/* 文字填充颜色变透明 */
-webkit-text-fill-color: transparent;
/* 设置字体颜色不起作用 */
color: red;
}
3. 模糊背景
需求：当一个父盒子有边框时，里面有个子盒子需要在父盒子下边框上冒出一半，且子盒子是png做背景图，所以父盒子的边框线依旧能被看见，不符合需求。使用css3中背景模糊属性backdrop-filter
//子盒子使用
backdrop-filter: blur(8px);
4.hover改变同级元素样式，需要改变样式的元素，class名或id名前要加上一个+号
//当鼠标移动到one元素上时，two元素变色
<div class="case">
<div class="one">上</div>
<div class="two">下</div>
</div>
//css
.case > div {
width: 100px;
height: 100px;
}
.case .one {
cursor: pointer;
background-color: palegoldenrod;
}
.case .two {
background-color: yellowgreen;
}
//hover改变同级元素样式，需要改变样式的元素，class名或id名前要加上一个+号
.case .one:hover + .two {
background-color: orange;
}
5.文本超出打点
//1.单行打点：文本需要设置宽度，不换行，超出部分隐藏，文本超出打点展示
.demo{
width:200px;
overflow:hidden; //超出部分隐藏
white-space:nowrap;//段落中的文本不进行换行
text-overflow:ellipsis;//当文本溢出包含它的元素时,省略符号显示
}
//2.多行打点:要明确是多少行，容器高度设置的不要高于文字总的高度，不然没有效果
.demo2{
display:-webkit-box;
widht:200px;
overflow:hidden; //超出部分隐藏
-webkit-box-orient:vertical;//子元素的排列方式，垂直排列，子代总高度等于父代高度
-webkit-line-clamp:2; //限制文本行数
}
6.媒体查询
通过媒体查询改变html根元素的font-size的值，rem是相对单位，比如html根元素的font-size:16px;那么1rem=16px、2rem=32px,其他元素设置成rem单位，就能根据视口宽度发生响应变化。谷歌浏览器目前最小字号12px
/* 大屏 */
@media screen and (max-width: 2560px) {
html,
body {
font-size: 20px !important;
}
}
@media screen and (max-width: 1920px) {
html,
body {
font-size: 18px !important;
}
}
/* 中屏 */
@media screen and (max-width: 1680px) {
html,
body {
font-size: 16px !important;
}
}
@media screen and (max-width: 1440px) {
/* 包含1366 */
html,
body {
font-size: 14px !important;
}
}
/* 小屏 */
@media screen and (max-width: 1280px) {
html,
body {
font-size: 12px !important;
}
}
@media screen and (max-width: 1024px) {
html,
body {
font-size: 8px !important;
}
}
7.ch和em的区别
ch 是一个相对单位，相对于数字0的大小，1ch=数字0的宽度，根据所在容器的font-size变化而变化;1ch=一个数字的宽度=一个字母的宽度=0.5个汉字的宽度
em 是相对单位，相当于所在容器的font-size，假如font-size=16px,1em=16px
.box{
width: 8ch;
font-size:2em;
}
8.打字效果
//html部分
<div class="typing">
<div class="typing-effect">我是胡歌</div>
</div>
//less
.typing {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
.typing-effect {
width: 4em;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
animation: typing 1s steps(4), effect .25s step-end infinite alternate;
//1.因为内容是汉字，width使用的是em；如果是字母，可以使用ch；总之内容的字数要和width对应
//2.使用border-right作为输入光标
//3.animation使用多个动画，每个动画分开设置，逗号隔开
//4.typing动画使用steps(4)表示将1s拆成4帧，将typing-effect元素宽度在1s内从0到4em
//5.effect动画将border-color重复不停的变色
}
}
//动画
@keyframes typing {
0% {
width: 0;
}
}
@keyframes effect {
50% {
border-color: transparent;
}
}
9.img的视觉效果(filter属性)
- 黑白图片
img {
filter: grayscale(100%);
}
- 透明图片的阴影效果
img {
filter: drop-shadow(2px 4px 8px #3723a1);
}
- 图片模糊
img{
filter: blur(5px);
}
10.自定义cursor
.box{
//auto浏览器默认光标，防止url没生效，图片有大小限制
cursor: url("./img/add.png"), auto;
}
11.首字母大写，使用伪类::first-letter
//html
<p>here we target the wrapper and select the p element.</p>
//css
p::first-letter {
color: pink;
float: left;
font-size: 4rem;
line-height: 4vw;
padding-right: 8px;
}
12.伪类元素content可以获取父元素身上的属性
//html
<a href="www.baidu.com">百度：</a>
<div data-name="李逍遥">胡歌演过的角色：</div>
//css
a::after {
content: attr(href);
}
div::after {
content: attr(data-name);
}
// conent:url() 也可以引入图片图标等
13.弹性布局解决父级使用min-height子级使用百分比不生效问题
//html
<div class="f_box">
<div class="s_box">
</div>
</div>
//css
.f_box{
width: 400px;
min-height: 600px;
background-color: brown;
.s_box{
width: 200px;
height: 100%;
background-color: burlywood;
}
}
s_box盒子高度为0，f_box高度为600px，min-height不是确定值，100%没有生效
解决方法：最外层加一个弹性布局盒子,此处利用弹性盒align-item默认拉伸高度(align-item:stretch;拉伸(默认)，从起点(cross start)到终点(croos end))，f_box盒子的高度确认为600px，s_box盒子的100%生效,高度为600px
//html
<div class="outer">
<div class="f_box">
<div class="s_box">
lorem*1000
</div>
</div>
</div>
//css
.outer {
display: flex;
.f_box {
width: 400px;
min-height: 600px;
background-color: brown;
.s_box {
width: 200px;
height: 100%;
background-color: burlywood;
}
}
}
14.css变量
//在:root中以--定义的变量，其他元素css中可以使用
:root{
--baseColor: pink;
--baseFontSize: 30px;
}
h1{
font-size:var(--baseFontSize);
color:var(--baseColor);
}
span{
font-size:var(--baseFontSize);
color:var(--baseColor);
}
//在js中设置变量，在css中使用
//1.js设置变量
dom节点.style.setProperty('--name',value)
//css中可以直接使用改变量
span{
font-size: var(--name);
}
//2.js读取变量
方式一：dom节点.style.getPropertyValue('--name')
注意：该方式只能读取setProperty设置的变量,不能读取在css中设置的变量
方法二：window.getComputedStyle(dom节点).getPropertyValue('--name')
注意：能读取css中设置的变量和setProperty设置的变量
//3.js删除变量
dom节点.removeProperty('--name')
15.css设置点击穿透，可见不可点击
/* 点击穿透，元素可见，无法点击 */
pointer-events: none;
16.# ios移动端数字1和0的宽度是不一样的
.demo{
font-variant-numeric: tabular-nums; //可以让所有数字的宽度一致
}
