盒子模型、显示与隐藏

一、盒子模型

组成部分（从内向外）

1. 内容区

content：放内容的

2. 内边距

padding：设置内容与边框的距离

padding：上 右 下 左;

值：top：上内边距

right：右内边距

botton：下内边距

left：左内边距

可通过top，right，bottom，left单独设置内边框距离

3. 边框

border：区分盒子内外

border-style:上 右 下 左;

值：solid：实线

dashed：虚线

double：双线

dotted：点线

可通过top，right，bottom，left单独设置边框样式

4. 外边距

margin：设置元素与元素之前的距离，设置元素位置

用法与padding基本一致

5. box-sizing

设置盒子尺寸，设置width，height作用的对象

默认值：content-box：内容盒

border-box：边框盒 设置的宽高=border+padding+content

6.分类

盒子模型的分类有两种：

①标准盒子/W3C盒子：元素默认设置的宽高指内容区域

②IE盒子/怪异盒子：元素默认设置的宽高指内容区域+内边距+边框

二、显示与隐藏

两种方法：

①display：

值：none（隐藏）

block（显示）

②visibility：

值：hidden（元素不可见）

visible（元素可见）

两者的区别是display设置隐藏时不占用原来的位置，visibility设置隐藏时占用原来位置