CSS不正交的几个例子

最新推荐文章于 2022-08-20 23:05:15 发布

方小圆

最新推荐文章于 2022-08-20 23:05:15 发布

阅读量712

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/fengfangyuan/article/details/89348506

版权

技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS之间影响

margin和border
多个div，分别设置margin-top和margin-bottom，margin会合并，比如我统一设置margin为10px，3个div上下间隔应该是10px。

	<!DOCTYPE html>
	<html>
	<head>
	  <meta charset="utf-8">
	  <title>JS Bin</title>
	  <style>
	    .demo{
	        background:green;
	        height:30px;
	        margin:10px;
	      }
	  </style>
	</head>
	<body>
	    <div class="demo"></div>
	    <div class="line"></div>
	    <div class="demo"></div>
	    <div class="demo"></div>
	</body>
	</html>

在这里插入图片描述
但，如果在元素中间加一个div，且设置其border-top为1px，则margin不会合并：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .demo{
        background:green;
        height:30px;
        margin:10px;
      }
    .line{border-top:1px solid red}
  </style>
</head>
<body>
    <div class="demo"></div>
    <div class="line"></div>
    <div class="demo"></div>
    <div class="demo"></div>
</body>
</html>

在这里插入图片描述
将border-top高度设置为0.1，边框肉眼不可见，margin同样不会合并。如果将.line设置display:table，不设置margin，margin合并也会被阻断。display:flex也会阻断margin合并。
父子之间的margin也会被合并，但是加border也会阻断margin合并。同样能阻断margin合并的属性还有padding、display:inline-block、display:flex、display:table、overflow:hidden。

display和小圆点
li默认有小圆点

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    
  </style>
</head>
<body>
    <ul>
      <li>选项1</li>
      <li>选项2</li>
      <li>选项3</li>
    </ul>
</body>
</html>

在这里插入图片描述
但，如果给li加上display:block，则小圆点会消失

原因是小圆点只出现在display:list-item标签前面，修改display:block;小圆点就会消失。

inline和inline-block元素加了position:absolute;则该inline元素会变成block元素。

元素之间影响

子元素加了position:fixed;该子元素应该相对于视口定位，但如果给父元素加上transform:scale();属性，则子元素又会相对于父元素定位。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .parent{
      background:green;
      height:100px;
      transform:scale(0.9);
    }
    .child{
      border:1px solid red;
      position:fixed;
      bottom:0;
      left:0;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="child">内联样式</div>
    </div>
</body>
</html>

在这里插入图片描述

方小圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS不正交的几个例子

CSS之间影响margin和border多个div，分别设置margin-top和margin-bottom，margin会合并，比如我统一设置margin为10px，3个div上下间隔应该是10px。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl...
复制链接

扫一扫