CSS学习（十七）-盒模型

时间：2016-03-18 01:55:47 阅读：218 评论：0 收藏：0 [点我收藏+]

标签：

一、理论：
1.CSS盒模型
a.外盒尺寸计算--高度
element空间高度=内容高度+内距+边框+边距
b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距
c.内盒尺寸计算--高度
element高度=内容高度+内距+边框
d.内盒尺寸计算--宽度
element宽度=内容宽度+内距+边框
2.box-sizing
a.content-box 默认值
b.border-box 元素维持IE传统的盒模型
c.inherit 使元素继承父元素的盒模型模式
d.此值主要目的是控制元素的总宽度

二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color:#6bb2ff;
            font-size: 30px;
            text-align: center;
        }
        #header{
            height: 100px;
            background: #228833;
            margin-bottom: 10px;
        }
        .sidebar{
            float:left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #ebf3fc;
        }
        .content{
            float:left;
            width: 720px;
            height: 300px;
            background: #ffcc99;
            margin-bottom: 10px;
        }
        #footer{
            background: #a6f821;
            height: 100px;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="header">hedaer</div>
        <div class="sidebar">left</div>
        <div class="content">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color:#6bb2ff;
            font-size: 30px;
            text-align: center;
            background: #ffcc99;
        }
        #header{
            height: 100px;
            background: #228833;
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
        }
        .sidebar{
            float:left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #ebf3fc;
            padding: 10px;
        }
        .content{
            float:left;
            width: 720px;
            height: 300px;
            background: #ffcc99;
            margin-bottom: 10px;
            padding: 10px;
        }
        #footer{
            background: #a6f821;
            height: 100px;
            clear: both;
            padding: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="header">hedaer</div>
        <div class="sidebar">left</div>
        <div class="content">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color:#6bb2ff;
            font-size: 30px;
            text-align: center;
            background: #ffcc99;
        }
        #header{
            height: 100px;
            background: #228833;
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
            border: 10px solid darkgray;
        }
        .sidebar{
            float:left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #ebf3fc;
            padding: 10px;
            border: 10px solid red;
        }
        .content{
            float:left;
            width: 720px;
            height: 300px;
            background: #ffcc99;
            margin-bottom: 10px;
            padding: 10px;
            border: 10px solid chartreuse;
        }
        #footer{
            background: #a6f821;
            height: 100px;
            clear: both;
            padding: 10px;
            width: 100%;
            border: 10px solid #202189;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="header">hedaer</div>
        <div class="sidebar">left</div>
        <div class="content">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            color:#6bb2ff;
            font-size: 30px;
            text-align: center;
            background: #ffcc99;
        }
        #header{
            height: 100px;
            background: #228833;
            margin-bottom: 10px;
            padding: 10px;
            width: 100%;
            border: 10px solid darkgray;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing:border-box;
            -ma-box-sizing:border-box;
            box-sizing: border-box;
        }
        .sidebar{
            float:left;
            width: 220px;
            margin-right: 20px;
            margin-bottom: 10px;
            height: 300px;
            background: #ebf3fc;
            padding: 10px;
            border: 10px solid red;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing:border-box;
            -ma-box-sizing:border-box;
            box-sizing: border-box;
        }
        .content{
            float:left;
            width: 720px;
            height: 300px;
            background: #ffcc99;
            margin-bottom: 10px;
            padding: 10px;
            border: 10px solid chartreuse;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing:border-box;
            -ma-box-sizing:border-box;
            box-sizing: border-box;
        }
        #footer{
            background: #a6f821;
            height: 100px;
            clear: both;
            padding: 10px;
            width: 100%;
            border: 10px solid #202189;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing:border-box;
            -ma-box-sizing:border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="header">hedaer</div>
        <div class="sidebar">left</div>
        <div class="content">main</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

CSS学习（十七）-盒模型

标签：

原文地址：http://blog.csdn.net/bwshqh/article/details/50919671

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行