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>



  • 相关阅读:
    Traefik使用
    kubernetes nfs-client-provisioner外部存储控制器
    基于腾讯云CLB实现K8S v1.10.1集群高可用+负载均衡
    k8s-rabbitmq-(一)集群部署
    TabSet 实现拖动后并保存配置
    C# MD5加密
    VSS “vc6.0vssum.dat may be corrupt”错误
    C#编程基础笔记
    android.view.WindowLeaked的解决办法
    【转】java线程系列---Runnable和Thread的区别
  • 原文地址:https://www.cnblogs.com/ygm125/p/2112701.html
Copyright © 2011-2022 走看看