盒相關樣式

最新推荐文章于 2022-08-19 15:51:45 发布

lulu_jiang

最新推荐文章于 2022-08-19 15:51:45 发布

阅读量526

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7802023

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

盒的類型

1.inline-block類型

屬於block類型盒的一種，但顯示時具有inline類型盒的特點

以前如果要在一行中並列顯示多個block類型元素，需要使用float屬性，這會使得樣式複雜。因此追加inline-block類型使得並列顯示多個block類型變的簡單

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div.inlineblock{display:inline-block;background-color:#00aaff;width:300px;}
        /* 寬，高設定對於inline類型來說無效 */
        div.inline{display:inline;background-color:#aaff00;width:300px;}
        </style>
    </head>
    <body>
        <div>
            <div class="inlineblock">inline-block類型</div>
            <div class="inlineblock">inline-block類型</div>
        </div>
        <div>
            <div class="inline">inline類型</div>
            <div class="inline">inline類型</div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        /*#a,#b{display:block;width:200px;float:left;}*/
        div{display:inline-block;width:200px;vertical-align:top;}
        #a{background-color:#0088ff;}
        #b{background-color:#00ccff;}
        #c{width:400px;background-color:#ffff00;}
        
        ul{margin:0;padding:0;}
        li{
            display:inline-block;
            background-color:#00ccff;
            border:solid 1px #666666;
            text-align:center;
        }
        a{
            display:inline-block;
            color:#000000;
            text-decoration:none;
            background-color:#ffcc00;
            width:100px;
        }
        </style>
    </head>
    <body>
        <div id="a">A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
        <div id="b">B B B B B B B B B B B B B B B B B B B B B B B B B B B B</div>
        <div id="c">C C C C C C C C C C C C C C C C C C C C C C C C C C C C</div>
        <ul>
            <li><a href="#">菜單1</a></li>
            <li><a href="#">菜單2</a></li>
            <li><a href="#">菜單3</a></li>
        </ul>
    </body>
</html>

2.inline-table類型

例中tabel為block類型，不能與其他文字處於同一行，如果修改為inline-table類型，可讓表格與其他文字處於同一行中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        table{display:inline-table;border:solid 3px #00aaff;vertical-align:bottom;}
        td{border:solid 2px #ccff00;padding:5px;}
        </style>
    </head>
    <body>
        哈羅
        <table>
            <tr>
                <td>A</td><td>B</td><td>C</td>
            </tr>
            <tr>
                <td>D</td><td>E</td><td>F</td>
            </tr>
            <tr>
                <td>G</td><td>H</td><td>I</td>
            </tr>
        </table>
        哈羅
    </body>
</html>

3.list-item類型

可將多元素作為列表顯示，同時在元素開頭加上列表標記

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{display:list-item;list-style-type:circle;margin-left:30px;}
        </style>
    </head>
    <body>
        <div>列表1</div>
        <div>列表1</div>
        <div>列表1</div>
    </body>
</html>

4.run-in類型與compact類型

如果元素後面還有block類型元素，run-in類型元素被包含在block類型元素內部

compact類型元素被放置在block類型元素左邊

目前只被Opera，Safari瀏覽器支持

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        dl#runin dt{display:run-in;border:solid 2px red;}
        dl#compact dt{display:compact;border:solid 2px red;}
        dd{margin-left:100px;background-color:Yellow;}
        </style>
    </head>
    <body>
        <dl id="runin">
            <dt>一</dt>
            <dd>解釋一</dd>
        </dl>
        <dl id="compact">
            <dt>二</dt>
            <dd>解釋二</dd>
        </dl>
    </body>
</html>

5.表格相關類型

table：整個表格 inline-table：整個表格

table-row：表格一行 table-cell：表格單元格

table-row-group：表格中所有行 table-header-group：表頭

table-footer-group：表格註腳 table-column：表格一列

table-column-group：表格所有列 table-caption：表格標題

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        .table{display:table;border:solid 3px #00aaff;}
        .caption{display:table-caption;text-align:center;}
        .tr{display:table-row;}
        .td{display:table-cell;border:solid 2px #aaff00;padding:10px;}
        .thead{display:table-header-group;background-color:#ffffaa;}
        </style>
    </head>
    <body>
        <div class="table">
            <div class="caption">表格</div>
            <div class="thead">
                <div class="tr">
                    <div class="td">1</div>
                    <div class="td">2</div>
                </div>
            </div>
            <div class="tr">
                <div class="td">A</div>
                <div class="td">B</div>
            </div>
            <div class="tr">
                <div class="td">C</div>
                <div class="td">D</div>
            </div>
        </div>
    </body>
</html>

6.none類型

指定為none類型后，元素將不顯示

對於盒中容不下的內容的顯示

1.overflow屬性

overflow:hidden 超出部份隱藏不顯示

overflow:scroll 出現固定水平，垂直滾動條

overflow:auto 當內容超出是，根據需要出現水平或垂直滾動條

overflow:visible 效果與不用overflow屬性時一樣

2.overflow-x屬性與overflow-y屬性

可單獨指定在水平或垂直方向上內容超出時的顯示方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            overflow-x:scroll;
            overflow-y:hidden;
            width:70px;
            height:70px;
            border:solid 1px orange;
        }
        </style>
    </head>
    <body>
        <div class="table">
            哈羅哈羅哈羅
            哈羅哈羅哈羅
            哈羅哈羅哈羅
            哈羅哈羅哈羅
            哈羅哈羅哈羅
        </div>
    </body>
</html>

3.text-overflow屬性

當吧overflow屬性設置為hidden，將隱藏超出內容，結合text-overflow屬性，可在末尾加一個省略號(僅在水平方向上超出容納範圍時有效)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            overflow:hidden;
            text-overflow:ellipsis;
            /* Safari瀏覽器寫法 */
            -webkit-text-overflow:ellipsis;
            /* Opera瀏覽器寫法 */
            -o-text-overflow:ellipsis;
            /* 不允許換行 */
            white-space:nowrap;
            width:100px;
            border:solid 1px orange;
        }
        </style>
    </head>
    <body>
        <div>
            哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
        </div>
    </body>
</html>

對盒使用陰影

box-shadow:length length length color;

該屬性得到Safari瀏覽器和FireFox瀏覽器支持

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            background-color:#ffaa00;
            /* FF瀏覽器寫法 */
            -moz-box-shadow:10px 10px 10px gray;
            /* Safari瀏覽器寫法 */
            -webkit-box-shadow:10px 10px 10px gray;
            width:200px;
            height:100px;
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

1.對盒內子元素使用陰影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            width:400px;height:200px;
            -moz-box-shadow:2px 2px 10px gray;
            -webkit-box-shadow:2px 2px 10px gray;
        }
        div.span
        {
            display:inline-block;
            width:auto;height:auto;
            background-color:#ffaa00;
            -moz-box-shadow:2px 10px 10px gray;
            -webkit-box-shadow:2px 10px 10px gray;
        }
        </style>
    </head>
    <body>
        <div>哈羅哈羅哈羅哈羅<div class="span">哈羅哈羅哈羅哈羅</div>哈羅哈羅哈羅哈羅哈羅</div>
    </body>
</html>

注：在FF下測試，必須要寫成這樣，子元素才有陰影，原因不明

2.對第一個文字或第一行使用陰影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div:first-letter{
            font-size:22px;
            background-color:#ffaa00;
            -moz-box-shadow:10px 10px 10px gray;
            -webkit-box-shadow:10px 10px 10px gray;
        }
        </style>
    </head>
    <body>
        <div>哈羅</div>
    </body>
</html>

3.對表格或單元格使用陰影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        table{
            border-spacing:10px;
            -moz-box-shadow:5px 5px 10px gray;
            -webkit-box-shadow:5px 5px 10px gray;
        }
        td{
            background-color:#ffaa00;
            -moz-box-shadow:5px 5px 10px gray;
            -webkit-box-shadow:5px 5px 10px gray;
            padding:10px;
        }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td><td>2</td><td>3</td>
            </tr>
            <tr>
                <td>4</td><td>5</td><td>6</td>
            </tr>
        </table>
    </body>
</html>

指定針對元素的寬高的計算法 box-sizing屬性

CSS中，使用width與height屬性指定元素寬高。但使用box-sizing屬性，可指定width，height屬性分別指定的寬度值與高度值是否包含元素內部的補白區，及邊框寬，高。box-sizing屬性的目的是控制元素的總寬度。

box-sizing:content-box; (默認)元素的寬度與高度不包括內部補白區域，以及邊框的寬度高度

box-sizing:border-box; 元素的寬度與高度包括內部補白區域，以及邊框的寬度高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div
        {
            width:300px;
            border:solid 30px #ffaa00;
            padding:30px;
            background-color:#ffff00;
            margin:20px auto;    
        }
        #div1
        {
            box-sizing:content-box;
            -moz-box-sizing:content-box;
            -webkit-box-sizing:content-box;
            -ms-box-sizing:content-box;   
        }
        #div2
        {
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -ms-box-sizing:border-box;   
        }
        </style>
    </head>
    <body>
        <div id="div1">
        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
        </div>
        <div id="div2">
        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
        </div>
    </body>
</html>

lulu_jiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒相關樣式

盒的類型1.inline-block類型屬於block類型盒的一種，但顯示時具有inline類型盒的特點以前如果要在一行中並列顯示多個block類型元素，需要使用float屬性，這會使得樣式複雜。因此追加inline-block類型使得並列顯示多個block類型變的簡單 div.inlineblock{dis
复制链接

扫一扫