11

使用.close和×构建一个关闭按钮;

 

<style>
    .temp{
        width: 100px;
        height: 100px;
        background-color: #6f42c1;
    }
</style>
<!--解析：close鼠标放上去会变色交互  &times; 是哪个x符号-->
<button class="temp close"><span>&times;</span></button>

使用.float-left、.float-right、.float-none实现浮动效果

 

<style>
    .temp{
        width: 100px;
        height: 100px;
        background-color: #6f42c1;
    }
</style>
<!--解析：左浮 右浮  清除浮动-->
<div class="temp float-left">float-left</div>
<div class="temp float-none">float-none</div>
<div class="temp float-right">float-right</div>

使用.clear-fix给浮动的区域的父元素添加，实现清理浮动的功能;还可以使用.float-*-left等来实现不同屏幕的浮动效果

 

<style>
    .temp{
        width: 100px;
        height: 100px;
        background-color: #6f42c1;
        margin: 10px;
    }
</style>
<!--使用.clear-fix给浮动的区域的父元素添加清理浮动的功能-->

<!--说白了就是清除浮动-->
<div class="clearfix">
    <div class="temp float-left">float-left</div>
    <div class="temp float-right">float-right</div>
</div>

<!--还可以使用.float-*-left等来实现不同屏幕的浮动效果 只有在他的屏幕宽范围内才会实现浮动效果【细心去F12】-->
<div class="clearfix">
    <div class="temp float-md-left">float-md-left</div>
    <div class="temp float-sm-right">float-sm-right</div>
</div>

使用.text-hide来隐藏元素标签内容，但本身还存在保持SEO优化【即代码还在 内容不可见】;

使用.overflow-auto和.overflow-hidden来设置区域显示方式;

使用.visible和.invisible来设置内容可见或不可见;

<style>
    .temp {
        width: 300px;
        height: 50px;
        background-color: #c6abf5;
        margin: 10px;
    }
</style>
<!--使用.text-hide来隐藏元素标签内容，但本身还存在保持SEO优化;
使用.overflow-auto和.overflow-hidden来设置区域显示方式;
使用.visible和.invisible来设置内容可见或不可见;-->

    <div class="temp">
        可见的我
    </div>

    <div class="temp text-hide">
        不可见的我【但是我其他还显示 代码也在 就是内容不见】
    </div>
<!------------------------------------------------------->
<p>----------------------------------------------------</p>
<!--  超出隐藏  -->
    <div class="temp overflow-hidden">
        中国 - 广东 - 中山 - 东区街道
        <br>
        中国 - 广东 - 中山 - 东区街道
        <br>
        中国 - 广东 - 中山 - 东区街道
        <br>
        中国 - 广东 - 中山 - 东区街道
    </div>

<!--  超出+滚动条  -->
<div class="temp overflow-auto">
    中国 - 广东 - 中山 - 东区街道
    <br>
    中国 - 广东 - 中山 - 东区街道
    <br>
    中国 - 广东 - 中山 - 东区街道
    <br>
    中国 - 广东 - 中山 - 东区街道
</div>

<!------------------------------------------------------->
<p>----------------------------------------------------</p>

<!--和 text-hide 其实刚好相反的啊 我是啥也没 text-hide只有内容不可见 -->
<div class="temp visible">
    可见的我【内容可见 啥都可见！】
</div>

<div class="temp invisible">
    不可见的我【样式什么什么的都没了 就是代码还在】
</div>

使用.align-*来设置内容文本的对齐方式

 

标签：11,东区,float,100px,可见,中山,left
来源： https://www.cnblogs.com/bi-hu/p/14872429.html