CSS 的框模型
1、外边距
1.1、语法
margin-top:上外边距
margin-bottom:下外边距
margin-right:右外边距
margin-left:左外边距
取值 | 说明 |
---|---|
5px | 以px为单位的数字 |
10% | 父元素的10%作为外边距 |
-5px | 移动元素时使用 |
auto | 自动,只能对设定宽度的块级元素有效,只对左右外边距有效 |
margin:4个方向的外边距
margin:5px 上下左右外边距都是5px
margin:5px 3px 上下外边距5px,左右外边距3px
margin:0 auto 块级元素居中对齐
margin:1px 2px 3px 上外边距1px,左右外边距2px,下外边距3px
margin:1px 2px 3px 4px 上外边距1px,右边距2px,下外边距3px,左外边距4px(从顶端,顺时针方向)
1.2、页面中有默认外边距的元素
body、p、ol、ul、h1——h6都具备默认外边距,通过css重写的方式,取消默认外边距 body,p,ol,ul,h1,h2,h3,h4,h5,h6{margin:0}
2、内边距
2.1、语法
padding-top:上内边距
padding-bottom:下内边距
padding-right:右内边距
padding-left:左内边距
取值 | 说明 |
---|---|
5px | 以px为单位的数字 |
10% | 父元素的10%作为内边距 |
padding:4个方向的内边距
padding:5px 上下左右内边距都是5px
padding:5px 3px 上下内边距5px,左右内边距3px
padding:1px 2px 3px 上内边距1px,左右内边距2px,下内边距3px
padding:1px 2px 3px 4px 上内边距1px,右内距2px,下内边距3px,左内边距4px(从顶端,顺时针方向)
2.1、页面中有默认内边距的元素
ol,ul,文本框,密码框,按钮都有默认内边距
3、box-sizing 属性
作用:重新指定框模型的计算方式
取值 | 说明 |
---|---|
content-box | 元素的width和height属性只表示内容区域的尺寸,默认值 |
border-box | 元素的width和height属性包含内容区域,边框和内边距的全部尺寸,建议使用 |