CSS学习（十七）-盒模型_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS学习（十七）-盒模型_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:23 AM

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

二、实践：

    <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>    <div class="wrapper">        <div id="header">hedaer</div>        <div class="sidebar">left</div>        <div class="content">main</div>        <div id="footer">footer</div>    </div>

登录后复制

    <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>    <div class="wrapper">        <div id="header">hedaer</div>        <div class="sidebar">left</div>        <div class="content">main</div>        <div id="footer">footer</div>    </div>

登录后复制

    <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>    <div class="wrapper">        <div id="header">hedaer</div>        <div class="sidebar">left</div>        <div class="content">main</div>        <div id="footer">footer</div>    </div>

登录后复制

    <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>    <div class="wrapper">        <div id="header">hedaer</div>        <div class="sidebar">left</div>        <div class="content">main</div>        <div id="footer">footer</div>    </div>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7663

CakePHP 教程

1393

C# 教程

1205

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。