11-CSS透明度 margin取值以及圣杯，滑动门，三角

最新推荐文章于 2022-12-09 17:41:35 发布

Sarrykiss

最新推荐文章于 2022-12-09 17:41:35 发布

阅读量342

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_38178755/article/details/78737451

版权

学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一补充：

1 如果定位的盒子没有宽度默认宽高为0
2如果给子盒子设置宽度是100%那么子盒子的宽度就和父盒子的宽度一样宽。
3 透明度
opacity（不透明）
取值：opacity：0.5; 在0到1之间的小数。
*这个属性ie6不支持，如果要在ie6中设置透明，要用：
filter: Alpha(opacity=50);*

二. margin补充：

１用法：
margin: 0 auto;
作用：让容器水平居中。
２ margin-right: auto;
作用：如果不设置其它属性只设置这个属性，那么浏览器在解析的时候会将一个盒子的所有的默认的margin全部给margin-right
３ margin设置为负数：
如果margin-left设置为负数，那么将来这个盒子会向左方向移动。
如果margin-right设置为负数，那么盒子会向右移动。

三. 圣杯布局/双飞翼布局：

１名称：圣杯布局
目的：加载文档时先加载中间区域，再加载左右两边。
特点：中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变。
２双飞翼布局
目的：加载文档时先加载中间区域，再加载左右两边
特点：中间的内容可以根据屏幕的大小的改变而改变,左右两边的内容保持不变。
总结：其实就是先设置一个padding然后在左右padding里面放两个浮动块，宽度就是padding的宽度中间的内容继承父元素 width：100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content {
            padding: 0 200px;
            height: 200px;
            min-width: 200px;
        }
        .left {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
            margin-left: -200px;
        }
        .right { 
            width: 200px;
            height: 200px;
            background: yellow;
            float: right;
            margin-right: -200px;
        }
        .center {
            width: 100%;
            min-width: 200px;
            height: 200px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

这里写图片描述

滑动门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动门</title>
    <style>


       b{
        /*display: inline-block;*/
        /*高度根据背景图片决定*/
        height: 35px;
        line-height: 35px;
        background:url(img/01_c.png);
         /*浮动使对齐 浮动就是变成了行内块级元素*/
        float: left;
       }
        span{
            /*display: inline-block;*/
            /*根据图片设置宽高*/
            width: 6px;
            height:35px;
            background: url("img/01_l.png" );
            float: left;
        }

      i{
            display: inline-block;
            /*根据图片设置宽高*/
            width: 25px;
            height:35px;
            background: url("img/01_r.png" );
            float: left;
        }




      </style>
</head>
<body>
    <div>
       <span></span><b>导航1</b><i></i>
    </div>
</body>
</html>
```![这里写图片描述](https://img-blog.csdn.net/20171207110048104?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MTc4NzU1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
***下面的代码是符合seo语义的导航加图片的结构！***




<div class="se-preview-section-delimiter"></div>

Document

三角

1三角的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角</title>
    <style>
         div{
            width: 0px;
            height: 0px;
            border-top: 20px solid red;
            border-right: 20px solid yellow;
            border-bottom: 20px solid blue;
            border-left: 20px solid green;
         }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这里写图片描述

下面换成行内元素显示结果发生了改变!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角</title>
    <style>
         span{
            width: 0px;
            height: 0px;
            border-top: 20px solid red;
            border-right: 20px solid yellow;
            border-bottom: 20px solid blue;
            border-left: 20px solid green;
         }



    </style>
</head>
<body>
    <span></span>
</body>
</html>

这里写图片描述
但是加一个displ就好了就一样了。
如果给一个盒子不设高和宽就只设计边框，而且边框足够大就会出现这个现象。
现在只想要一个向下的三角就可以使得其他三个边框设一个透明度就好了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角</title>
    <style>
    div{
        /*子绝父相定位使得文本和三角对齐*/
        position: relative;
    }
         span{
            display: inline-block;
            width: 0px;
            height: 0px;
            /*改变了三角的大小之后 为了是文本还是和三角对齐就让向下移动一点*/
            top: 5px;
            border-width: 10px;
            /*transpa透明*/
            border-color: red transparent transparent transparent;
            border-style: solid dashed dashed dashed;
            position: absolute;
         }
    </style>
</head>
<body>
    <div>这是一段文本<span></span></div>
</body>
</html>

这里写图片描述

淘宝的三角！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>taobao</title>
    <style>
    div{
        position: relative;
        width: 500px;
        height: 500px;
        border: 1px solid #000;
    }
        b{
            display: inline-block;
            width: 0px;
            height: 0px;               
            border-width: 10px;
            /*transpa透明*/
            border-color:  transparent  transparent transparent red;
            border-style: dashed dashed dashed solid ;
            position: absolute;

        }
        .one{
            bottom: 0px;
            right: 0px;

        }
        .two{
            bottom: 0px;
            right: 6px;
            border-color:  transparent  transparent transparent white;
        }

    </style>
</head>
<body>
    <div>
      <b class="one"></b>
      <b class="two"></b>
    </div>
</body>
</html>