纯CSS实现气泡框

参考网址：http://www.cnblogs.com/daxiong/articles/3158630.html

1)根据博主的操作可以很书实现这个操作，操作过程中主要是利用了chrome devtools来实现定位的；

2）相关知识的补充：

定位（position之常规使用）

  • position的属性值有static, fixed, relative, absolute，主要注意这四个的参照对象;
  • static是默认设置，遵行基本的定位规定，是文档流中的一部分。
  • fixed的参照对象是可视窗口而非父级元素，可通过z-index 进行层次分级。（比如可用于实现一个随窗口移动而移动的导航栏
  • relative 设定元素，其参照主要是其原先的位置，根据top, rigth, bottom, left 这四个位置元素进行调节；relative设定的元素仍属于文档流的一部分，而且占据了其原来的空间。
  • absolute其参照是浏览器左上角，这种设置的元素已经脱离了文档流，不占据空间，可以使用z-index进行层次分组。
  • 关联：如果父容器使用相对定位，而子元素使用了绝对定位，那么子元素的位置参照就是父窗口左上角，而不是浏览器左上角了。fixed与absolute很相似，但absolute是被固定在网页中的某个位置，而fixed是被固定于浏览器中的某个位置。
  • position需要配合top, right, bottom, left使用，这四个值可以为正数，也可以是负数，负数一般可以用于将元素拖出其父元素范围或是浏览器视角
<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>

<body>
    <div class="mytag">
    </div>
</html>

/*index.css>
.mytag {
    width: 200px;
    height: 30px;
    background-color: #288;
    border: 5px solid #09F;
    position:relative;
}

.mytag::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -25px;
    left: 50px;
    border: 10px solid #09F;
    border-color:#09F transparent transparent transparent;
}
.mytag::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -18px;
    left: 50px;
    border: 10px solid #09F;
    border-color:#288 transparent transparent transparent
}

 

posted @ 2015-10-09 14:39  Kinthon  阅读(472)  评论(0)  编辑  收藏  举报