HTML的盒子模型

盒子模型（css）

三大模块： 盒子模型 、 浮动 、 定位。

1. 盒子模型（Box Model）

就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括： 外边距（ margin ）、边框

（ border ）、内边距（ padding ）、实际内容（ content ）四个属性。 每个盒子除了有自己大小和位置外，还影响着其他盒子的大 小和位置。

2. 盒子边框（border）

语法：

border : border-width || border-style || border-color

边框属性 — 设置边框样式（ border-style ）

边框样式用于定义页面中边框的风格，常用属性值如下：

none ：没有边框即忽略所有边框的宽度（默认值）

solid ：边框为单实线 ( 最为常用的 )

dashed ：边框为虚线

dotted ：边框为点线

double ：边框为双实线

小提示：我们在开发中，经常把表单原本的边框去掉，然后添加任意的样式。（ border: 0 ）

2.1 边框综合设置

例如：border : border-width || border-style || border-color

2.2 border 的三角形原理

当我们加大边框并且各个颜色不一样时，我们先来看看 border 的表现形式。

#box{

width:100px;

height:100px;

background:yellow;

border-top: 20px solid red;

border-right:20px solid black;

border-bottom:20px solid green;

border-left:20px solid blue;

}

2.3  圆角边框 (CSS3)

从此以后，我们的世界不只有矩形。 radius 半径（距离）

允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这 个( 椭 ) 圆与边框的交集形成圆角效果。

语法格式： border-radius : 左上角 右上角 右下角 左下角 ;

1.其中每一个值可以为 数值或百分比的形式。

2.技巧： 让一个正方形 变成圆圈

border-radius: 50%;