CSS基础 – 盒子模型 – margin,border,padding,content详解编程语言

(1)margin

1.margin:1px [2px] [3px [4px]];

四个宽度分别代表：上外边距，右外边距，下外边距，左外边距

指定三个和四个，从前往后一次上，右，下，左

指定两个，第一个代表上下，第二个代表右左

2.margin:auto

由浏览器自动计算外边距

.main {
margin:auto;//实现水平居中；
position:relative;
margin-top:10%;//覆盖margin=auto 定义的 margin-top:auto
border-style:dashed;
border-color:red;
border-width:3px;
height:300px;
width:800px;
}

3.margin-top,margin-left,margin-bottom为负数

在css盒子模型中，border，padding，height，width均不能为负值，margin为负值时，元素将相对于原来位置向指定方向移动一定距离之后布局

(2) border

1.border: 5px solid red;

四个边框的样式均为width:5px ,border-style:solid,border-color:red

2.可单独定义指定边的border属性:border-[bottom,right,top,left]-[style,width,color]

3.border-style

dotted,dashed,solid,double,outset,hidden,none

border-style:dashed,solid,double,outset 分别指定上，右，下，左边框style

4.border-radius:3px

(3)padding

1.padding:1px [2px] [3px [4px]];

四个宽度分别代表：上内边距，右内边距，下内边距，左内边距

指定三个和四个，从前往后一次上，右，下，左

指定两个，第一个代表上下，第二个代表右左

2.padding:auto css中auto不是padding的一个合法值

3.可用padding-left,padding-right,padding-bottom,padding-top 单独制定对应边的内边距