一、盒子模型
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。
W3C组织建议把网页上元素看成是一个个盒子。
盒模型主要定义四个区域:
- 内容content
- 内边距padding
- 边框border
- 外边距margin
转换到我们日常生活中,可以拿两个手机来对比
- 内容content=手机
- 内边距padding=盒子中的填充物
- 边框border=盒子的厚度
- 外边距margin=两个手机盒之间的距离
通常我们设置的宽和高是指"手机"content的宽高
一整个盒子还包含了填充物、盒子、盒子和盒子的距离
二、W3C盒模型
盒模型由内容content
、填充padding
、边框border
、边界margin
组成
对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距
接下来我们来实验一下
我们先简单的弄一个布局出来
<style>
#box{
width: 600px;
height: 600px;
background: pink;
float: left;
}
#box>div:nth-child(1){
width: 600px;
height: 200px;
background: blue;
float: left;
}
#box>div:nth-child(2){
width: 200px;
height: 200px;
background: red;
float: left;
}
#box>div:nth-child(3){
width: 200px;
height: 200px;
background: green;
float: left;
}
#box>div:nth-child(4){
width: 200px;
height: 200px;
background: yellow;
float: left;
}
#box>div:nth-child(5){
width: 600px;
height: 200px;
background: lemonchiffon;
float: left;
}
</style>
</head>
<body>
<div id="box">
<div>顶部元素</div>
<div>左侧元素</div>
<div id="self">当前元素</div>
<div>右侧元素</div>
<div>底部元素</div>
</div>
</body>
浏览器显示结果:
我们给当前元素加上外边距
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
上面的代码可以简写为
margin:10px;
如果四个值是不一样的
可以这样写
margin:10px 20px 30px 40px;
它们分别代表上、右、下、左(顺时针哦)
还可以写三个代表上、左右、下
margin:10px 20px 30px;
可以写两个代表上下、左右
margin:10px 20px;
margin还有一个作用:设置块状元素居中
<!-- K可以设置块状元素居中 -->
<div id="block"></div>
body{
background: lemonchiffon;
}
#block{
width:1200px;
background: yellow;
border: 1px solid red;
height: 40px;
margin:20px auto;
}
浏览器显示结果:
接下来我们来玩一玩外间距合并的问题
目前布局是这样
<div id="box1"></div>
<div id="box2"></div>
body{
background: lemonchiffon;
}
#box1{
width: 200px;
background: rgb(128, 236, 137);
height: 200px;
}
#box2{
width:200px;
background:yellow;
height: 200px;
}
浏览器显示结果
当我们给第一个盒子加上底部边距的时候
这个时候我们如果给底部边距加上margin-top: 50px;
浏览器显示结果依旧那样,因为它以最大的那个边距为主
我们来试一试包含式外间距合并吧
<div id="father">
<div id="son"></div>
</div>
body{
background: lemonchiffon;
}
#father{
width: 500px;
height: 200px;
background: green;
}
#son{
width: 200px;
height: 200px;
background: #000;
}
浏览器显示结果
这个时候如果我们给子元素加如下代码
margin-top:100px;
浏览器显示结果
这个时候我们发现,它的父元素也下来了
这个也属于外边距合并的一种
那么要怎么解决这个问题呢?
我们给父元素加边框
这就是我们解决外边距合并的方式
小结:
外边距margin围绕在元素边框周围的空白区域
- 会在元素外创建额外的空白区域
- 外边距是透明的
语法:margin:value
;
单边设置
- mergin-top/right/bottom/left:value
- value可取值为像素,%,auto,负值
可以设置为负值,例如下面的代码,代表的是向上移动100像素
margin-top:-100px;
小结 外间距简写
- margin:value(四个方向相同)
- margin:value(上下) value(左右)
- margin:value(上) value(左右) value(下)
- margin:value(上) value(右) value(下) value(左)
小结 外间距合并
- 当两个垂直外边距相遇时 他们将形成一个外边距,成为外边距合并
- 合并后的外边距的高度等于两个发生合并的外边距的高度中较大者
margin设置元素外边距的宽度,它有这么几个特点:
- 块级元素的垂直相邻外边距会合并
- 行内元素实际上不占上下外边距,行内元素的左右外边距不合并
- 浮动元素的外边距也不会合并
- 允许指定负外边距,不过使用时要小心
接下来是边框border
<style>
div{
width: 200px;
height: 200px;
background: green;
border-right-color:red;
border-right-width: 4;
border-right-style: solid;
}
</style>
</head>
<body>
<div></div>
</body>
border属性设置一个元素的边框border
它有三个要素:宽,样式,颜色,统称"边框三要素"
三要素书写时一般按照如下顺序
border:宽度 样式 颜色
border: 1px solid red
不过不按照这个顺序来写依然可以正常显示
border的三要素可以统一写在"border"属性中,也可以单独设置
统一的写法:
-
border: 1px solid red
单独的设置 -
border-width:;
-
border-style:;
-
border-color:;
要注意,在style属性为空的情况下,整个边框说不会出现的
这不论是统一写或是单独设置都是这样的
- 不写width会有默认3像素的值
- 不写颜色会默认为黑色
border-style设置边框的样式,有五种常用的样式可以选
- 点状dotted
- 实线solid
- 双线double(需要最起码设置为3像素,不然显示不下)
- 虚线dashed
- 无边框node
内边距
- 内容区域和边框之间的空间
- 会扩大元素边框所占用的区域
- 语法:padding:value;
单边设置
- padding-top/right/bottom/left:value
- value可取值为像素,%,但不能为负值
内边距简写
-
padding:value(四个方向相同)
-
padding:value(上下) value(左右)
-
padding:value(上) value(左右) value(下)
-
padding:value(上) value(右) value(下) value(左)
进行尝试
span{
border: 1px solid grey;
float: left;
padding-top:10px;
padding-left: 10px;
padding-right:10px;
padding-bottom: 10px;
/* padding:10px; */
}
<span>这是内容</span>
值得注意的是
在设置内间距和边框的时候,注意对应地减去我们的宽度,否则它会全部占用
小结:
padding的宽高要记录在盒子模型的宽高之内,于此相同的是border也要记录在盒子模型的宽高之内
但是margin并不算在宽高之内所以在书写宽高的时候要注意减掉内边距和边框(标准盒模型)
三、怪异盒模型
盒子模型分两种
- 一种是符合W3C规范的标准例子模型
- 另一种是IE的盒子模型,IE的盒子模型也被叫做怪异盒子
可以看见IE盒子模型也包括margin、border、padding、content
不过,和标准盒子不同的是:IE盒子模型的宽包含了border和padding
Box-sizing: border-box
box-sizing
属性允许你以"W3C的盒模型"或"IE盒模型"来定义元素,以适应区域
也就是说,当前元素使用哪种盒模型,可以由box-sizing属性来指定
它有两个值
-
content-box(标准)
padding和border不被包含在width和height内
元素的实际大小为宽高+border+padding,此为标准模式下的盒模型 -
border-box(怪异)
padding和border被包含在定义的width和height中,元素实际的大小为你定义了多宽就是多宽
此属性为怪异模式下的盒模型
这是默认的标准盒模型
现在我们设置一下,让第二个元素成为怪异盒模型