css3盒子相关样式

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>

 

 

转载于:https://www.cnblogs.com/chooper/p/6542265.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值