CSS3笔记011 - 第11章 盒子模型

第11章 盒子模型

CSS盒子模型

每个元素都看成一个盒子，一个盒子模型是由content(内容)、padding(内边距)、margin(外边距)、border(边框)这四个属性组成。记住，所有的元素都可以视为一个盒子。

1、内容区：是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是必备的，其他的三部分是可选的。
内容区有三个属性：width、height、overflow
2、内边距:指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
内边距的属性有五种：padding-top、padding-bottom、padding-left、padding-right以及综合了以上四个方向的简写内边距属性padding。
3、外边距：指的是两个盒子之间的距离，使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
外边距的属性有五种：margin-top、margin-bottom、margin-left、margin-right以及综合了以上四个方向的简写外边距属性margin.
4、边框：
边框属性有border-width、border-style、border-color以及综合了三类属性的简写边框属性border.
border-width:1px;border-style:solid;border-color:gray;等价于border:1px solid gray;

宽和高

元素的宽度和高度是针对内容区而言的，只有块元素才可以设置width和height
width:像素值;
height:像素值;

边框

border:1px solid red;
第一个值指的是边框宽度(border-width)，第二个值指的是边框外观(border-style)，第三个值指的是边框颜色(border-color)

内边距

又称"补白"，指的是内容区到边框之间的那一部分。

padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
简写形式：
padding:像素值;
padding:像素值1、像素值2;
padding:像素值1、像素值2、像素值3、像素值4;

外边距

外边距指的是边框到"父元素"或"兄弟元素"之间的那一部分。外边距是在元素边框的外部。

margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
简写形式：
margin:像素值;
margin:像素值1、像素值2;
margin:像素值1、像素值2、像素值3、像素值4;

浏览器审查元素

检查或者快捷键Ctrl+Shift+I弹出的控制台中，找到该元素的盒子模型