CSS 盒子和内外边距

属性	描述	版本
height	设置元素的高度	CSS1
width	设置元素的宽度	CSS1
max-height	设置元素的最大高度	CSS2
max-width	设置元素的最大宽度	CSS2
min-height	设置元素的最小高度	CSS2
min-width	设置元素的最小宽度	CSS2
overflow	设置元素内容溢出时样式。	CSS2
overflow-x	设置元素内容水平方向溢出时样式。	CSS3
overflow-y	设置元素内容垂直方向溢出时样式。	CSS3
padding	在一个声明中设置所有内边距属性	CSS1
padding-bottom	设置元素的下内边距	CSS1
padding-left	设置元素的左内边距	CSS1
padding-right	设置元素的右内边距	CSS1
padding-top	设置元素的上内边距	CSS1
margin	在一个声明中设置所有外边距属性	CSS1
margin-bottom	设置元素的下外边距	CSS1
margin-left	设置元素的左外边距	CSS1
margin-right	设置元素的右外边距	CSS1
margin-top	设置元素的上外边距	CSS1

height

height 属性设置元素的高度。不包括边框和内外边距(未设置 box-sizing 时)。

值	描述
auto	默认。浏览器自动计算。
length	使用 px、cm 等单位定义。
%	基于包含它的块级对象的百分比。

height: 100px;
height: 100%;

width

width属性设置元素的宽度。不包括边框和内外边距(未设置 box-sizing 时)。

值	描述
auto	默认。浏览器自动计算。
length	使用 px、cm 等单位定义。
%	基于包含它的块级对象的百分比。

width: 100px;
width: 100%;

max-height

max-height 属性设置元素的最大高度。不包括边框和内外边距(未设置 box-sizing 时)。

值	描述
none	默认。没有限制。
length	使用 px、cm 等单位定义。
%	基于包含它的块级对象的百分比。

max-height: 100px;
max-height: 100%;

max-width

max-width 属性设置元素的最大宽度。不包括边框和内外边距(未设置 box-sizing 时)。

值	描述
none	默认。没有限制。
length	使用 px、cm 等单位定义。
%	基于包含它的块级对象的百分比。

max-width: 100px;
max-width: 100%;

min-height

min-height 属性设置元素的最小高度。不包括边框和内外边距(未设置 box-sizing 时)。

值	描述
none	默认。没有限制。
length	使用 px、cm 等单位定义。
%	基于包含它的块级对象的百分比。

min-height: 100px;
min-height: 50%;

min-width

min-width 属性设置元素的最小宽度。不包括边框和内外边距(未设置 box-sizing 时)。

值	描述
none	默认。没有限制。
length	使用 px、cm 等单位定义。
%	基于包含它的块级对象的百分比。

min-width: 100px;
min-width: 50%;

overflow

overflow 属性用来设置内容溢出时样式。可以有1到2个值。

值	描述
visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

overflow: auto;        /*上下左右溢出时滚动*/
overflow:hidden auto;  /*左右:hidden, 上下:auto*/

overflow-x

overflow-x 属性用来设置水平方向内容溢出时的样式。

值	描述
visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

overflow-x: auto;  /*溢出时滚动*/

overflow-y

使用 overflow-y 属性用来设置垂直方向内容溢出时的样式。

值	描述
visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

overflow-y: auto;  /*溢出时滚动*/

padding

padding 简写属性在一个声明中设置所有内边距属性。该属性可以有1到4个值。

值	描述
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

padding:10px; /*四个内边距都是10px*/
padding:10px 20px; /*上下:10px, 左右:20px*/
padding:10px 20px 30px; /*上:10px, 左右:20px, 下:30px*/
padding:10px 20px 30px 40px; /*上:10px, 右:20px, 下:30px, 左:40px*/

padding-bottom

padding-bottom 属性设置一个元素的下内边距。

值	描述
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

padding-bottom: 10px;
padding-bottom: 25%;

padding-left

padding-left 属性设置一个元素的左内边距。

值	描述
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

padding-left: 10px;
padding-left: 25%;

padding-right

padding-right 属性设置一个元素的右内边距。

值	描述
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

padding-right: 10px;
padding-right: 25%;

padding-top

padding-top 属性设置一个元素的上内边距。

值	描述
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

padding-top: 10px;
padding-top: 25%;

margin

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

值	描述
auto	浏览器计算外边距。
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

padding:10px; /*四个外边距都是10px*/
padding:10px 20px; /*上下:10px, 左右:20px*/
padding:10px 20px 30px; /*上:10px, 左右:20px, 下:30px*/
padding:10px 20px 30px 40px; /*上:10px, 右:20px, 下:30px, 左:40px*/

padding:auto 20px 30px auto; 

例: 块级元素居中显示

div{
  width:100px;
  margin: 0 auto;
}

margin-bottom

margin-bottom 属性设置一个元素的下外边距。

值	描述
auto	浏览器计算外边距。
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

margin-bottom: 10px;
margin-bottom: 25%;

margin-left

margin-left 属性设置一个元素的左外边距。

值	描述
auto	浏览器计算外边距。
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

margin-left: 10px;
margin-left: 25%;

margin-right

margin-right 属性设置一个元素的右外边距。

值	描述
auto	浏览器计算外边距。
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

margin-right: 10px;
margin-right: 25%;

margin-top

margin-top 属性设置一个元素的上外边距。

值	描述
auto	浏览器计算外边距。
length	数值单位，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比

margin-top: 10px;
margin-top: 25%;