文章目录
| 属性 | 描述 | 版本 |
|---|---|---|
| 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%;
来源：CSDN
作者：shenwen5225
链接：https://blog.csdn.net/shenwen522519753/article/details/103703642