css盒子模型_CSS 盒子模型详解（一）

在网页布局中，一定离不开盒子模型这个东西。今天就来说一下这个概念。

概念

所谓盒子模型（Box Model）就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。或者说，每一个可见的 HTML 元素都是一个盒子。

组成

每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。

每个盒子的大小是由内容(content)、内边距（padding）、边框（border）这三个部分的实际大小来决定的，外边距不算在宽度里面。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

<

这里我们可以看到 box2 的宽度受到 内边距（padding）、边框（border）的影响，他的宽度成为了 240px

盒子模型的特性

每个盒子都有：边界、边框、填充、内容 4个属性
每个属性都包括4个部分：上、下、左、右。属性的四个部分可以同时设置，也可以分别设置

Margin(外边距) 清除边框外的区域，外边距是透明的。 Border(边框) 围绕在内边距和内容外的边框。 Padding(内边距) 清除内容周围的区域，内边距是透明的。 Content(内容) 盒子的内容，显示文本和图像。

一、边框 border

border 属性来定义盒子的边框，该属性包含3个子属性：

• border-style 边框样式
• border-width 边框宽度
• border-color 边框颜色

边框样式 border-style ：

border-style 边框样式属性指定要显示什么样的边界

dotted 点线

<

solid实线

border-style

边框宽度 border-width：

注意！！：当定义边框宽度时，必须要定义边框的显示样式，由于默认样式为none,所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为 0。

通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：

直接在属性后面指定宽度值

border-width

关键字（不常用，几乎不用）

不同浏览器对此解析的宽度值不同，不会用到。

border-width

如果想为单独某条边设置宽度的话使用：

border-top-width      

也可以简写：

border-width

案例

<

边框颜色 border-color：

border-color属性用于设置边框的颜色。可以设置的颜色

定义边框颜色可以使用颜色名、RGB 颜色值或十六进制颜色值。

<

综合写法

border 

知乎视频​www.zhihu.com

https://www.bilibili.com/video/BV13b411g78D/?p=62​www.bilibili.com