<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
color: white;
}
</style>
</head>
<body>
<!-- 先写一个外层div,表示这是一块东西,一行 -->
<!-- 需要着重注意的是:
1、由于文字是有大小的,也就导致了div与div之间的空行或者空格是有宽度的,这样会导致三个div无法放到一行的情况,解决办法常见的有三种:(一、设置总div的font-size为0,后期用到字体之后再重新设置回来。二、让标签收尾相连,不美观。三、使用注释,把两个div之间的空白注释掉,切记切记)
2、html会根据先后顺序来覆盖层,也就是中间那个div会遮住左边那个div,这样的话后期如果左侧div上有按钮或者链接都无法点击。解决方法:设置左侧div的z-index,让该值大于中间那个div的z-index,但是必须注意的是:z-index在一个被inline-block的div上是不起作用的,必须设置position为relative才行
3、所有div一旦被设置了inline-block,那么他的盒模型就有了问题,会把宽度和margin和padding加到一起,需要设置box-sizing:border-box才可以解决 -->
<div style="width:100%;height:200px;position:relative;">
<div style="width:80px;height:100%;display:inline-block;background:red;z-index:1;position:relative;">abc</div><!--
--><div style="width:100%;height:100%;margin-left:-80px;padding-left:90px;margin-right:-100px;padding-right:100px;display:inline-block;background:gray;box-sizing:border-box;z-index:0;">1231</div><!--
--><div style="width:100px;height:100%;display:inline-block;background:yellow;">hij</div>
</div>
</body>
</html>