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 单独制定对应边的内边距