CSS学习笔记一

标签： Css 分类： 前端 创建时间：2019-03-29 02:46:52 更新时间：2023-10-20 11:23:25

1、中英文混排导致文字基线不一致。

如果所示,两个都是行内元素，数字看起来就要小，中文看起来就要大，谷歌浏览器中使用元素选择，中文高度是22,数字高度是20.问题主要产生的原因是字体的问题，解决方式也就是统一字体。

2、子元素设置50%无法并排显示

将子元素的两个div设置为display:inline-block,并设置width:50%，我们感觉上应该时两个div并排显示，实际上会错开,b-item两个会分行显示。有人说是bug，但是我在火狐和谷歌中，也同样遇到了这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .b-page{
        float: right;
        width:100%;
        position:absolute;
    }
    .b-item{
        width:50%;
        display: inline-block;
    }
</style>
<div class="b-page">
    <div class="b-item">
        <div class="back-title">这里啥都没有，还是去别处看看吧</div>
    </div>
    <div class="b-item">
        <img src="/404/index/m.png"/>
    </div>
</div>

解决方式，就是把50%换成49%，或者是在b-item去掉display,改用float:left;

参考文献：
1.两个div并排，为各占50%宽度，为何错开？？
2.子元素宽度设置50%无法并排显示的问题
3.css实现两个div填满一行

3.footer自动固定在底部

大体上分为两者，一种是：footer高度固定，使用绝对定位，父元素使用padding-bottom将footer所处的高度预留出来。这种方式的缺点当然就是高度必须固定啦。另一种就是使用Flex布局，缺点吗，当然也是因为使用了Flex布局，所以其兼容性有待商榷啊。最少是IE 10+。当然，现在Edge都换成了Chrome内核了，也无所谓了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//HTML代码如下
<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

//CSS代码如下
.Site {
  display: flex;
  display: -webkit-flex; /* Safari */
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
参考文章：
1.完美解决HTML中footer保持在页面底部问题
2.css让footer始终位于页面的最底部
3.Flex 布局教程：语法篇

4.translateY无效的原因

通常为了使div中的文字水平垂直居中，通常的做法是在div的文字中加一层span,为了使translateY有效，应为span添加display:inline-block;这样才能使一个行内块元素，transform就有效果了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="blank">
  <span>作者很累，啥都没留下</span>
</div>

**css
.blank{
  text-align: center;
}
span{
  top: 50%;
  display: inline-block;
  position: relative;
  font-size: 25px;
  transform: translateY(-50%);
}
参考文章：
1.CSS进阶篇–div中的内容垂直居中的五种方法

5.display:inline-block对齐问题

对于两个并排的div，使用display：inline-block是一般的选择，但也会带来文字对齐的问题。

解决方式就是添加：vertical-align: top;

6.offsetParent为null或者offsetTop始终为0

获取元素的左上角坐标，通常会有如下的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * getElementTop 获取元素的offsetTop
 * @param  {DOMObject} element 元素
 * @return {Number}    offsetTop值
 */
getElementTop: function (element) {
  var _actualTop = element.offsetTop,
    _current = element.offsetParent;
  while (_current !== null) {
    _actualTop += _current.offsetTop;
    _current = _current.offsetParent;
  }
  return _actualTop;
}
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 “none”），或者该元素的 style.position 被设为 “fixed”，则该属性返回 null。在 IE 9 中，如果该元素的 style.position 被设置为 “fixed”，则该属性返回 null。（display:none 无影响。）
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
需要解释的是，如果该元素是display:none的话，offsetTop为0，offsetParent为null
参考文章：
1.用Javascript获取页面元素的位置
2.深入理解定位父级offsetParent及偏移大小

7.offsetHeight高度和显示的高度不一致

offsetheight，它包含padding、border、横向滚动轴高度。 offsetheight=padding+height+border+横向滚动轴高度。这个解释很明白了，但是如果内容中存在line-height这个样式，那么你得到的可能并不是你想要的东西。

参考文章：
1.CSS > 行内格式化上下文中的各种高度计算
2.css clientheight、offsetheight、scrollheight详解
3.原生js获取left值和top值

8.奇葩的transform导致字体模糊

如上图所示，最左侧的标签栏上，在使用transform使div进行居中之后，可以看出字体有明显的模糊状态。解决的办法就是让width或者使height属性值变成偶数即可，我这里有个padding:7.5px的内边距，我让其失效，看看效果：

参考文章：
1.CSS3 transform 字体模糊问题
2.transform导致字体模糊

9.文字竖排

(1) CSS属性write-mode可以实现文字竖排，writing-mode:vertical-rl从右向左竖排,writing-mode:vertical-lr从左向右竖排。
(2) css属性transform:rotate实现文字竖排(不好使，要旋转包裹文字的span元素)
(3) css属性float实现文字竖排(这个较复杂，还得设置div的宽度，放不开的字挤到下一行，不好使)

参考文章：
1.网页文字竖排的几种实现方式

10.强制换行和不换行

1
2
3
4
5
1. word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

注意，一定要指定容器的宽度，不然的话是没有用的

参考文章：
1.CSS强制英文、中文换行与不换行 强制英文换行

11.锚点链接偏移问题

需求产生的原因主要是因为添加的锚点，会将锚点移动到页面的开头，如果此时页面的顶部有菜单栏并且是flex定位常驻的，菜单栏就会压盖住锚点。这个时候就需要将锚点的位置下移一定的距离，使其能在页面中正常显示。例如如下的html，主要是使用了参考文章中(1)的代码。

1
2
<a href="#box">box</a>
<div class="box" id="box">1<br />2<br /></div>

方式一：锚点通过padding和margin进行偏移

1
2
3
4
.box{
   padding-top:50px;
   margin-top:-50px;  
}

方式二：使用css的 :target (主要推荐这种方式，主要是不对页面布局产生负面的影响)

1
2
3
.box:target{
   padding-top:50px;
}

其他的方法我就不一一列举了，详情就参考下面的文章吧。

参考文章：
1.锚链接偏移
2.锚点链接跳转后位置上下偏移一定位置方法

12.向下居中的三角箭头

向下的箭头：border-top有颜色，left和right没有颜色；向上的箭头：border-bottom有颜色，left和right透明；向右的箭头：border-left有颜色，top和bottom透明；向左的箭头：border-right有颜色，top和bottom透明。居中，联合使用left和transform属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 箭头 */
.ztOverlay.pipelineproperty::after{
    content:"";
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    width:0px;
    height:0px;
    bottom: -10px;
    border-top: 10px solid rgba(255,255,255,0.8);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

参考文章：
1.CSS 实体三角箭头
2.CSS实现空心三角指示箭头
3.卡片右上角三角形效果,按钮点击变色 (这篇文章，是使用了三角行，写出了右上角的vip菜单的感觉，正好最近也在用，就摘录在这里了。)

13.html不能正确识别换行符的问题

最近遇到一个奇怪的问题，我的文章中明明有 “\n” 这样的换行符，但是在html中就是显示不了换行。

解决方式有两种：
(1) 使用js将换行符“\n”转换成 < br >,这样好像有点得不偿失，毕竟如果我自己手动写了一个换行符（就像这句话里面有个换行符一样），js代码如何区分是手动添加的换行，还是编辑器自动添加的换行符呢？
(2) 使用css的white-space属性, pre-wrap:保留空白符序列，但是正常地进行换行,然后结合word-break,就可以实现正确的识别换行符了。

1
2
3
code
    white-space: pre-line;
    word-break: break-all;
参考文章：
1.HTML文章页面，识别不了换行问题的解决
2.说一说“换行”踩的坑(看来在使用\n方式实现换行时，是否能用html()/innerHTML/text()/innerText，取决于在哪个 HTML 元素上使用这些方法。对于那些会保留纯文本中原有空格、换行符的 HTML 元素如
、
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1、中英文混排导致文字基线不一致。
  2. 2. 2、子元素设置50%无法并排显示
  3. 3. 3.footer自动固定在底部
  4. 4. 4.translateY无效的原因
  5. 5. 5.display:inline-block对齐问题
  6. 6. 6.offsetParent为null或者offsetTop始终为0
  7. 7. 7.offsetHeight高度和显示的高度不一致
  8. 8. 8.奇葩的transform导致字体模糊
  9. 9. 9.文字竖排
  10. 10. 10.强制换行和不换行
  11. 11. 11.锚点链接偏移问题
  12. 12. 12.向下居中的三角箭头
  13. 13. 13.html不能正确识别换行符的问题
  14. 14. 14.css四周阴影
  15. 15. table自适应宽度
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 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 ——— 美文