HTML5基礎加強css樣式篇（css計算函式：calc（））（四十七）

厚積薄發2017發表於2017-04-10
HTMLCSS函式

1.calc計算函式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box-wrapper {
            margin: 100px 0 0 100px;
            width: 600px;
            height: 500px;
            background-color: orange;
        }
        .box{
            height: 200px;
            width: 200px;
            float: left;
        }
        .box-1{
            background-color: pink;
        }
        .box-2{
            background-color: #00f;
            border: 10px solid yellow;
            padding: 10px;
            /*計算寬高 ： 盒子的邊框+內邊距+內容區*/
            box-sizing: border-box;
            /* margin-left: 1px; */

            /*如果是因為外邊距導致的空間不足，只能修改元素的大小，可以使用計算函式（相容性問題）*/
            /*計算函式
                運算子左右一定要新增空格符
            */
            width: calc(200px - 1px);
            width: calc(200px + 100px);
            width: calc(200px / 2);

        }
        .box-3{
            background-color: green;
        }

    </style>
</head>
<body>

<div class="box-wrapper">
    <div class="box box-1"></div>
    <div class="box box-2">Hello</div>
    <div class="box box-3"></div>
</div>

<script type="text/javascript">
</script>
</body>
</html>



相關文章