CSS 盒模型基础简介

1. 基础模型

2. 怪异盒子模型 border-box

box-sizing:border-box;

使用 box-sizing:border-box; 可以改变实际占用大小。如下图。

3. margin 外边距、padding 外边距

    1）margin 外边距：指定元素四个方向的外边距，取值可以是长度、百分数、auto。

         外边距存在一个现象：margin collapse 边距合并（只发生在垂直方向上，垂直方向 margin   会被合并。）

    2）padding 内边距：指定元素四个方向的内边距，取值可以是长度、百分数、auto。

属性值个数

属性值个数	方向
1个	指四个方向（ top、right、bottom、left ）
2个	指上下、右左
3个	指上、右左、下
4个	指上、右、下、左

4. border 边框

    语法糖：

border: width style color
         粗细  样式  颜色

 样式有：none（无边框）、solid（实线）、dashed（虚线）、dotted（点状型）

5. overflow 内容溢出时的操作

属性值说明

visible（默认）	内容都可见
hidden	内容溢出被隐藏
scroll	内容溢出显示滚动条

6. min-width、max-width、min-height、max-height

• min-width 属性设置元素的最小宽度。
• max-width 属性设置元素的最大宽度。
• min-height 属性设置元素的最小高度。
• max-height 属性设置元素的最大高度。