CSS学习笔记（二）标准盒模型与怪异盒模型，margin，border，padding

标准盒模型与怪异盒模型

一、盒子模型

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域:内容( content)、内边距( padding)、边框( border)、外边距( margin)。转换到我们日常生活中,可以拿手机盒来对比,手机=内容,内边距=盒子中的填充物,边框-盒子的厚度,外边距两个手机盒之间的距离。通常我们设置的宽和高是指“手机” content的宽高,一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离。

二、W3C盒模型

盒模型由内容（content）、填充（padding）、边框（border）、边界（margin）组成
在这里插入图片描述

外边距

围绕在元素边框周围的空白区域

会在元素外创建额外的空白区域
外边距是透明的

语法：margin: value;

单边设置

margin- top/right /bottom/left: value;
value可取值为像素,%,auto,负值

使用以下margin形式可以使块状元素居中

  /* 实现块状元素居中显示 */
            margin: 10px auto;

外边距简写：

margin: value(四个方向相同);
margin: value(上下) value(左右);
margin: value(上) value(左右) value(下);
margin: value(上) value(右) value(下) value(左);

以上四个位置按顺序分别为：margin-top–margin-right–margin-bottom–margin-left，即“上-右-下-左”。以下简写为top–right–bottom–left。其中需要注意的是后三种情况，当有像素值缺省时，浏览器会自动对缺省像素按照“bottom=top”和“left=right”的方法进行赋值。

外边距合并

在这里插入图片描述

●当两个垂直外边距相遇时,他们将形成一个外边距,成为外边距合并
●合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

margin设置元素外边距的宽度,它有这么几个特点
1.块级元素的垂直相邻外边距会合并
2.行内元素实际上不占上下外边距。行内元素的左右外边距不合并
3.浮动元素的外边距也不会合并
4.允许指定负的外边距值,不过使用时要小心

border边框

border属性设置一个元素的边框,它有三个要素:宽、样式、颜色,统称“边框三要素”。

要素书写的时候一般如下顺序：

border:宽度样式颜色
border: 1px solid red;

不过不按此顺序来写依然能正常显示。

border- style设置边框的样式,有五种常用样式可选

点状 dotted
实线 solid
双线 double(需要最起码设置为3像素,不然显示不下
虚线 dashed
无边框 none

border的三要素可以统一写在” border”属性中,也可以单独设置。
统一的写法: border: 1px solid red
单独设置的写法

	border-width
	border-style
	border-color

要注意,在 style属性为空的情况下,整个边框是不会出现的。这不论是统一写在 border或是单独设置都是这样的不写 width会有默认3像素的值，不写颜色会默认为黑色。

几种不同的border实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几种不同的边框</title>
    <style>
        div>div{
                background: aqua;
                margin: 3px;
                float: left;
            }
            div>div:nth-child(1){
                width: 200px;
                height: 200px;
                border: 3px dotted black;
            }
            div>div:nth-child(2){
                width: 200px;
                height: 200px;
                border: 3px solid black;
            }
            div>div:nth-child(3){
                width: 200px;
                height: 200px;
                /* double(双线的宽度必须大于3px，不然显示不下) */
                border: 3px double black;
            }
            div>div:nth-child(4){
                width: 200px;
                height: 200px;
                border: 3px dashed black;
            }
            div>div:nth-child(5){
                width: 200px;
                height: 200px;
                border: 3px none black;
            }
    </style>
</head>
<body>
    <div>
        <div>点状边框</div>
        <div>实线边框</div>
        <div>双线边框</div>
        <div>虚线边框</div>
        <div>无边框</div>
    </div>
</body>
</html>

在这里插入图片描述

内边距

●内容区域和边框之间的空间
●会扩大元素边框所占用的区域
语法: padding: value;
单边设置

padding-top/right/bottom/left: value;

· value可取值为像素,百分比,但不能为负数

内边距的简写

padding: value(四个方向相同);
padding: value(上下) value(左右);
padding: value(上) value(左右) value(下);
padding: value(上) value(右) value(下) value(左);

注意：padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内但是margin并不算在宽高之内，所以在书写宽高时注意减去内边距和边框（标准盒子模型）

三、怪异盒模型

盒子模型分两种,一种是符合W3C规范的标准例子模型,另一种是IE的盒子模型,IE的盒子模型也被叫怪异盒子，可以看到IE盒子模型也包括 margin、 border、 padding、content,不过和标准盒子模型不同的是：IE盒子模型的宽,包含了 border和 padding。

在这里插入图片描述
box- sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素以适应区域。换句话说当前元素使用哪种盒模型,可以由box- sizing属性来指定它有两个值：

content-box(标准)

padding和 border不被包含在 width和 height内，元素的实际大小为宽高+ border+padding,此为标准模式下的盒模型。
border-box(怪异)

padding和 border被包含在定义的 width和 height中,元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。