CSS学习笔记二

标签： 无 分类： 未分类 创建时间：2019-12-25 01:32:10 更新时间：2025-01-20 09:45:24

继续css的探索。

1.display:inline-block对齐问题

问题是这样产生的，我有两个div，然后我想让两个div并排着，而不是竖排，所以就使用了设置display:inline-block，这样两个div就可以再一行内显示了，但是问题随之而来了，一个div是包含了一张图片，这张图片很长，但是另一边，只是一些文字，很短。我想让左边的文字居中显示，结果出现了左边的div，明显比右边的div低一截的问题。

问题产生的原因是因为：inline-block的默认对齐方式是vertical-block：baseline，就是inline-block元素要根据父元素的基线对齐。基线是什么？我就不解释了，可以想象成一行文字的底部。问题找到了，只需要设置div的vertical-align: middle;就可以了，这个时候，左边的文字还是不居中，我是用了transform和top搞定了。

1
2
3
4
5
6
7
8
9
10
.b-item-left{
    position: relative;
    text-align: right;
    margin-right: 30px;
    line-height: 30px;
    font-size: 16px;
    font-style: italic;
    transform: translateY(-50%);
    top: 50%;
}
参考文章:
1.inline-block元素vertical-align的问题分析
2.Align inline-block DIVs to top of container element
3.CSS百分比padding都是相对宽度计算的

2.图片自适应大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.picLUp{
    background:url(m.png) no-repeat;
    background-size:100% 100%;
}


/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;
参考文章：
1.css让图片自适应容器（div）大小
2.CSS背景图片自适应、全屏、填充、拉伸
3.用background-size实现 背景图片自适应浏览器大小，但不变形
4.background-size

3.设置td宽度不生效

table中的td总是以最大的单元格宽度来定义这一列的宽度。
(1) 可以使用min-width代替width>
(2) 在td中定义一个div,设定这个div的宽度，将td撑开。

1
2
3
<td>
    <div style="width: 100px">123</div>
</td>
参考文章：
1.为什么CSS td宽度无效？
2.为何在特定情况下td没法设置宽度？

4.阿里巴巴的矢量图表库

(1) 引入阿里巴巴的矢量图表库
使用 @font-face 的方式，在官网我的项目->Unicode ,查看在线连接，将在线链接复制到项目中，然后添加一个自定义的类iconfont并使用font-family。

1
2
3
4
5
6
7
8
9
10
11
12
@font-face {
  font-family: 'iconfont';  /* project id 1470483 */
  src: url('//at.alicdn.com/t/font_1470483_jl4ygc7g4y9.eot');
  src: url('//at.alicdn.com/t/font_1470483_jl4ygc7g4y9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1470483_jl4ygc7g4y9.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1470483_jl4ygc7g4y9.woff') format('woff'),
  url('//at.alicdn.com/t/font_1470483_jl4ygc7g4y9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1470483_jl4ygc7g4y9.svg#iconfont') format('svg');
}
.iconfont{
    font-family: 'iconfont';
}

(2) 在html中使用想要的代码

1
2
3
<div class="overviewmap" id="overviewmap">
    <i class="iconfont icon-close">&#xe647;</i>
</div>
参考文章：
1.@font-face的用法

5.span之间的空隙

在多个span之间的会出现空隙，即使设置了display: inline-block;

解决方法:父元素设置font-size:0; 子元素重新定义font-size:16px;

参考文章：
1.如何去掉两个span间的间距
2.两个span标签的间距问题

6.div文字居中

1
<div class="blank">暂无数据</div>

(1) 高度不确定
主要使用了flex布局，align-items和justify-content；垂直居中：align-items:center; display: -webkit-flex; 水平居中：justify-content:center; display: -webkit-flex;

1
2
3
4
5
6
7
8
9
10
11
.blank{
        height: 100%;
        width: 100%;
        position: absolute;
        text-align: center;
        vertical-align: middle;
        align-items: center;
        font-size: 45px;
        justify-content: center;
        display: -webkit-flex;
    }
参考文章：
1.一个高度不固定的div，里面的文字如何垂直居中？ (利用flex布局)
2.div中文字各种垂直居中的方法 (单行，多行文本)
3.css 如何使文字垂直居中
4.让div中的文字水平居中和垂直居中的css (利用line-height和height设置成一样的)

7.多行多列布局下最后一行左对齐

这个其实是一个需求，就是说有多行和多列的div,每行要两边对齐，也就是中间间隔一至，但是最后一行，不能排满的时候，要让div左对齐。类似于下面的效果(这里我使用的是一个插件masonry，它会自动计算每一个div的大小和高度，进行自动布局，最终实现这个效果)。除了插件之外，还有哪些方法可以实现呢？

参考文章：
1.让CSS flex布局最后一行列表左对齐的N种方法
2.【CSS】flex实现多行多列的多种方式
3.三列布局——flex布局

8.子元素float或者是absulute导致父元素高度塌陷

常见的高度塌陷问题的解决方法:

  • 1.给父元素添加固定高度,缺点：添加了固定高度的父元素高度不再自适应;
  • 2.给父元素添加属性overflow: hidden,缺点：当子元素有定位属性时,容器以外的部分会被裁剪掉;
  • 3.在子元素的末尾添加一个高度为0的空白 div来清除浮动属性,缺点：在页面中添加无意义的div会造成代码冗余。
  • 4.给父元素中添加一个伪元素。

当高度塌陷是因为position设置为absolute所导致的时候，上面的四种方法除了第一种把高度写死之外，其它三种方法都是无效的。原因：解决父元素高度塌陷的通常解决办法是在父元素中开启BFC。当子元素脱离文档流的原因是float，则可以通过开启BFC解决。但是如果子元素脱离文档流是因为absolute或者fixed，则开启BFC同样不管用。这种情况下，CSS没有办法解决，只能通过JS获取子元素的高度然后赋值给父元素来解决。

参考文章:
1.absolute导致的高度塌陷问题——解决方法 我摘录了这里的说明。

9.奇怪的问题

这里我记录下一个奇怪的问题，使用ZTE中兴的一台设备，自带的浏览器进行调试的时候，一个弹出框，设置了top为50%,其他的浏览器都好的，但是就是这个浏览器不行。

1
2
3
4
5
6
7
8
9
10
11
.msg-wrap{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}
.msg{
    top: 50%;
    
}

【解决方法】
设置了父元素的宽高为100%。我怀疑是因为 msg-wrap 没有高度，所以导致了浏览器无法计算百分比导致的。

1
2
3
4
5
6
7
8
9
.msg-wrap{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    height:100%;
    width:100%;
}
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.display:inline-block对齐问题
  2. 2. 2.图片自适应大小
  3. 3. 3.设置td宽度不生效
  4. 4. 4.阿里巴巴的矢量图表库
  5. 5. 5.span之间的空隙
  6. 6. 6.div文字居中
  7. 7. 7.多行多列布局下最后一行左对齐
  8. 8. 8.子元素float或者是absulute导致父元素高度塌陷
  9. 9. 9.奇怪的问题
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文