首页 > 代码库 > css3盒子相关样式

css3盒子相关样式

2024-09-08 12:52:33   215人阅读

1、css3的display属性:
　　inline:内联
　　inline-block:可以设置宽高的内联
　　block:设置为块:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3盒子类型</title>
    <style>
        /*inline:内联，inline-block:可以设置宽高的内联,*/
        p{
            /*此处设置宽高无用*/
            background: #999999;
            display: inline;
            width:200px;
        }
        span{
            background: #fff000;
            display: inline-block;
            width:200px;
        }
    </style>
</head>
<body>
<p>这是一段测试文字</p>
<p>这是一段测试文字</p>
<span>这是一段测试文字</span>
<span>这是一段测试文字</span>
</body>
</html>

inline-table:内联表格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line-table属性</title>
    <style>
        /*inline-table:内联表格*/
        table{
            border: 2px solid #999;
            display: inline-table;
        }
        table td{
            border: 2px solid rebeccapurple;
        }
    </style>
</head>
<body>
我是上面文字
<table>
    <tr>
        <td>单元1</td>
        <td>单元1</td>
        <td>单元1</td>
    </tr>
    <tr>
        <td>单元1</td>
        <td>单元1</td>
        <td>单元1</td>
    </tr>
    <tr>
        <td>单元1</td>
        <td>单元1</td>
        <td>单元1</td>
    </tr>
</table>
我是下面文字
</body>
</html>

list-item:把元素设置为列表项:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list-item属性</title>
    <style>
        /*list-item:把元素设为列表项。可设置列表项样式*/
        div{
            display: list-item;
            list-style-type: circle;
            margin-left:50px;
        }
    </style>
</head>
<body>
<div>我是一段测试文字</div>
<div>我是一段测试文字</div>
<div>我是一段测试文字</div>
</body>
</html>

2、盒子的大小计算方式:box-sizing属性：

border-box:此情况下设置的宽高为整个盒子(包含padding)的宽高;

content-box:此情况下设置的宽高为盒子内容(不包含padding)的宽高;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的box-sizing属性</title>
    <style>
        /*下面两个div宽高此情况下是一样的，*/
        #div1{
            box-sizing: border-box;
            width:240px;
            height:240px;
            padding:20px;
            background: #fff000;
        }
        #div2{
            box-sizing: content-box;
            width:200px;
            height:200px;
            padding:20px;
            background: #00ff00;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

 

 

css3盒子相关样式


联系
我们