CSS学习（十七）-盒模型

一、理论：

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>

时间： 2024-07-29 02:18:40

CSS学习（十七）-盒模型的相关文章

CSS学习笔记——盒模型，块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在

  Css中的盒模型及盒模型宽度计算

CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素(element box),可以形象地将其看作是一个盒子.CSS围绕这些盒子产生了一种"盒子模型"概念. 盒模型,实际上就是把某些标签元素看成为一个箱子.箱子与其他箱子之间的距离,是箱子的最外围,它不是一条边线而是添加在边框外面的空间.这个外边距使元素盒子之间不必紧凑地连接在一起,是CSS布局的一个重要手段.用margin(外边距)属性来表示,margin-top,margin-right,ma

87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 display:flex 注:设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 注:Safari 6.1+(前缀-webkit-) iOS 7.1+(前缀-webkit-)最新flex 兼容性查看请点此处最新Flex兼容性 Flex 容器 flex contain

【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距组成. 2.如果在元素上添加背景,则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸.即width=element 注意:ie的盒模型中,width指的是内容,内边距,和边

css－－盒模型

---恢复内容开始--- 盒模型: 1.基本内容: 2.基本概念:标准模型+IE模型 3.标准模型和IE模型的区别: 4.css如何设置这两种模型: 5.js如何设置获取盒模型对应的宽和高 6.根据盒模型解释边距重叠 7.BFC(边距重叠解决方案) 基本内容: content+padding+border+margin 基本概念: 标准模型:css设置的width是指content的width,比如width:100px,指的是内容100px ,实际的width ＝ content+paddin

CSS学习摘要-盒子模型

注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容.内边距.边界和外边距像洋葱的膜那样,一层包着一层构建起来.浏览器渲染网页布局时,它会算出每个框的内容要用什么样式,周围的洋葱层有多大,以及框相对于其它框放在哪里.在理解如何创建 CSS 布局之前,你需要理解框模型. 框属性文档的每个元素被构造成文档布局内的一个矩形框,框每层的大小都可以使用一些特定的CSS

(前端)html与css，css 8、盒模型、宽高、盒模型内减

盒模型概述盒模型:也叫框模型一个盒子内容包含了五部分:宽度.高度.内边距.边框.外边距. 代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

CSS学习之盒子模型

1. 前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容. 2. 盒子中的区域一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距. border:边框. margin:外边距. 盒子模型的示意图:

CSS两种盒模型

盒模型有两种,W3C 和IE 盒子模型 W3C定义的盒模型包括margin.border.padding.content,元素的宽度width=content的宽度 IE盒模型与W3C盒模型的唯一区别就是元素的宽度,元素的width=border + padding + content IE定义的盒模型较为合理,所以在css3中新增了box-sizing,包含两个属性content-box和border-box. content-box 元素的width = content border-bo

CSS中的盒模型

网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 原理先说说我们在网页:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子