zoukankan      html  css  js  c++  java
  • css盒相关样式

    display: inline-block;使元素在一行显示,且能设置高宽,vertical-align设置对齐方式

    <style>

        span

        {

            display: inline-block;

            background-color: Aqua;

            50px;

            vertical-align:bottom;

        }

    </style>

    <span>11111</span> <span style="height: 50px">22222</span>

     display:list-item使元素像li方式表示

    <style>

        span

        {

            display: list-item;

        }

    </style>

    <span>11111</span> <span>22222</span>

    display: inline-table;使文字与table在同一行

    <style>

        table

        {

            display: inline-table;

        }

    </style>

    <span>11111</span><table>

    </table>

    <span>22222</span>

    text-overflow: ellipsis;使文本超出宽度时以...代替

    <style>

        div

        {

            overflow: hidden;//超出部分隐藏

            text-overflow: ellipsis;

            white-space: nowrap;//设置不换行

            50px;

        }

    </style>

    <div>

        sdfsdfsdfsdfsdf</div>

    box-shadow:length length length color 分别代表阴影离开文字的横向,纵向距离,模糊半径和阴影颜色,横纵向值为0时在盒周围绘制阴影,支持负值,对第一个文字或第一行可使用选择器first-letter,first-line(如div:first-letter{...})

    <style>

        div

        {

            100px;

            height: 100px;

            background-color: AliceBlue;

            -moz-box-shadow: 10px 10px 10px gray;

            -webkit-box-shadow: 10px 10px 10px gray;

        }

    </style>

    <div>

        sdfsdfsdff</div>

    box-sizing:content-box|border-box; content-box表示元素高宽不包括内部补白及边框高宽,border-box表示元素高度包括内部补白及边框高宽

    <style>

        div#d1

        {

            box-sizing: content-box;

            200px;

            height: 100px;

            border: 20px solid red;

            margin: 20px;

            padding: 10px;

        }

        div#d2

        {

            box-sizing: border-box;

            200px;

            height: 100px;

            border: 20px solid red;

            margin: 20px;

            padding: 10px;

        }

    </style>

    <div id="d1">

        sdfsdfsdff</div>

    <div id="d2">

        sdfsdfsdff</div>

    box-sizing默认为content-box(对内容设置高宽),使用box-sizing可以控制元素的总高宽(border-box),确保div的并列显示

    <style>

        div

        {

            box-sizing: border-box;

            50%;

            height: 100px;

            border: 20px solid red;

            padding: 10px;

            float: left;

        }

        div#d2

        {

            border: 20px solid blue;

        }

    </style>

    <div id="d1">

        sdfsdfsdff</div>

    <div id="d2">

        sdfsdfsdff</div>



  • 相关阅读:
    phpstorm使用svn爆出“cannot load supported formats” 的解决
    本地wamp的Internal Server Error错误解决方法
    mac下apache的多站点配置
    Git 一些错误的解决方法
    【总结整理】登录模块---摘自《人人都是产品经理》
    【总结整理】产品经理优秀品质----《结网》
    【总结整理】传统行业如何合理利用互联网思维----摘自《人人都是产品经理》
    【总结整理】租房产品创业的三个方向和三个产品---摘自《人人都是产品经理》
    【总结整理】KANO 模型
    【总结整理】关于GrowingIO、友盟、google analysis等数据分析
  • 原文地址:https://www.cnblogs.com/ygm125/p/2112701.html
Copyright © 2011-2022 走看看