盒子
盒子
文章目录
  1. margin会受到border和display的影响
  2. li的样式受到display的影响
  3. 绝对定位会改变display的属性
  4. transform会对fixed的元素影响
  5. float影响inline元素

CSS的五个奇怪特性

margin会受到border和display的影响

以div元素为例
三个并列的div,必然是上下排列,外边距是10px,也就是我们通常说的上下间隔10px
demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.demo{
border: 1px solid red;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo"></div>
<!-- <div class="demo2" style="border: 0.1px solid green"></div> -->
<div style="display: flex" class="demo2"></div>
<div class="demo"></div>
<div class="demo"></div>
</body>
</html>

margin和border的影响.png
以上是正常的效果图
但是
凡事总有例外
一个boder就可以给你分开,像一条隐形的线分隔开了
border分割.png
中间的div其实不影响,但就是分开了.png
而且,你改变中间那个div的display即使没有border也可以分割

  • display: flex 可以分割
    flex影响.png
    flex隔开.png
    对比的效果图如上
  • displa: table 可以分割
    table.png
  • 最令我震惊的是display: inline-block,间距是40px
    inline-block.png

以上特例要记住

li的样式受到display的影响

ul标签的字标签li标签默认会有小圆点,但是一旦你想给li的display属性点更改,圆点就消失
li的样式.png

  • 上图是默认样式
    li的小圆点消失.png
  • 你更改了display就完蛋了

    绝对定位会改变display的属性

    一旦你使用了position: relative position: absolute之后,即使你写了display: inline,但是浏览器计算出来的的仍然是block
    position的影响.png
  • 以上是没绝对定位的时候
    绝对定位的坑.png
    你会发现绝对定位之后的display不是你规定的inline.
    inline-block 和 inline都会被改成block

    transform会对fixed的元素影响

    正常来说fixed的元素是相对于视口定位的,但是与transform结合后就不是这个现象了。CSS3规范说的是会整体缩放,所以要根据父元素定位。
    实例如下
    fixed之后.png
    上图是正常的,无论你如何拖动滚动条都无所谓。
    但是
    transform之后.png

    float影响inline元素

    其实float属性不是真正的浮起来来了,而是希望做到文图环绕的效果。文字会环绕在浮动元素的周围。
    未浮动.png
    没有浮动的时候,通过这个图,你也会发现一个奇怪的现象,两个子元素的高度可以超过父元素的高度,而父元素不影响。
    下图是浮动后神奇的效果
    浮动之后.png
    一般人的理解是你浮起来的,我是正常元素啊这几个字会出现到 一个浮动元素的下面,也就是它本体灰色框的左边,而实际上不是的,会感知到有个浮动元素,文字环绕在哪个浮动元素的旁边。

以上是目前碰到的比较奇怪的五个坑,CSS的坑继续探索中,加油!!!