第六章 盒子模型

第六章 盒子模型

一，什么是盒子模型

​ 盒子模型就如图片所示，它有高和宽，有外边距，边框，内边距和网页元素构成的一个整体。接下来我们就着重介绍一下上面的几个概念。

外边距：外边距顾名思义就是对外的间距，两个盒子的之间的间距称为外间距。

边框： 生活中每个盒子都有一个边界，如果边界有宽度，那么就可以看作边框。

内边距：盒子里的内容离边界的距离，就是内边距。

二，盒子模型的使用

1.边框

​ 边框分为上，右，下，左四个部分，我们都可以单独设置边框的颜色，粗细，样式等风格。下面我们先来看颜色。

​ 边框的所有属性都可以分成四个部分设置，格式：border-top|right|bottom|left-属性：属性值。

<1> 颜色

<2>粗细

​ 调整边框粗细，我们用border-width,这个属性的属性值有两种写法。

• 英文单词：thin，medium，thick。
• 像素值：X px；

<3>样式

​ 边框样式有很多种，我们只说常用的几种。

• solid：实线边框。
• dashed：虚线边框。
• dotted：点形边框。
• double：双实线边框。
• none：无边框。

<4>border简写

语法： border: 粗细 样式 颜色;

​ 补充：粗细和颜色有默认值，样式必须有，否则不显示。

2.外边距

属性:margin: 像素值；

• 四个方向都可以分别设置外边距，margin-left|right|top|bottom：属性：属性值。
• 网页居中对齐： margin: 0 px auto;
• 网页居中对齐的必要条件
  • 块元素
  • 固定宽度

3.内边距

属性：padding：像素值；

• 四个方向都可以分别设置内边距，paddingight|top|bottom：属性：属性值。

4.小知识

盒子模型总尺寸: border+padding+margin+内容宽度。

5.box-sizing

box-sizing: 是设置盒子的解析模式，通俗的说就是边框加在里面还是外面。

应用场景：定义一个正方形盒子边长为：100 px，加了一个2 px的边框，现在默认盒子就是边长104 px，但是，我们只想让盒子为100 px，当我们盒子太多的时候，这个就很难算，所以可以设置一个box-sizing:border-box，如此边框就直接加到内部去了，100 px是不会变的。

三，圆角边框

border-radius: 20px 10px 50px 30px;

• 四个值分别是上右下左，顺时针的顺序。

1.绘制圆形

利用border-radius属性制作圆形的两个要点:

• 元素的宽度和高度必须相同
• 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

 div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }

​ 效果图：

2.绘制半圆形

利用border-radius属性制作半圆形的两个要点:

• 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
• 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

​ 效果图：

3.扇形

利用border-radius属性制作扇形遵循“三同，一不同”原则:

• “三同”是元素宽度、高度、圆角半径相同
• “一不同”是圆角取值位置不同

四，盒子阴影

​ 盒子阴影和字体阴影有些许相似。

1.语法

box-shadow: inset x-offset y-offset blur-radius color;

• inset：阴影类型为内阴影。
• x-offset y-offset ：X , Y轴偏移量。
• blur-radius： 阴影模糊半径。
• color：阴影颜色。

五，总结

lur-radius color;

• inset：阴影类型为内阴影。
• x-offset y-offset ：X , Y轴偏移量。
• blur-radius： 阴影模糊半径。
• color：阴影颜色。

五，总结