margin会受到border和display的影响
以div元素为例
三个并列的div，必然是上下排列，外边距是10px,也就是我们通常说的上下间隔10px
demo
<!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的坑继续探索中，加油！！！
网友评论