盒子四大元素:content(内容),margin(外边距),padding(内填充),border(边框)
1..盒子模型之外边距(margin)
框边界属性
margin-bottom:底边距
margin-left:左边距
margin-right:右边距
margin-top:上边距
---------------------margin(外边距)-------------------------
margin:1数字------上右下左 margin:10px;
2数字------上下 左右 margin:10px 10px;
3数字------上 左右 下 margin:10px 10px 10px;
4数字------上 右 下 左 margin:10px 10px 10px 10px;
这四个属性用来设置元素与其相邻元素间的距离。
margin功能:简写属性, 用于设置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。
2.盒子模型之内填充(padding)
框填充属性
padding-bottom
padding-left
padding-top
padding-right
功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离,用法同margin.
---------------------padding(内边距/内填充)------------------------- padding:缩写与外边距一样;
注意:使用了padding之后,要减去宽高的值;
3.盒子模型之边框(border)
框边框属性
1、border-top
border-bottom
border-right
border-left
功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺少情况下,边框没有样式设置。
包含的数值:共有三个边框属性:border{1px solid red;}
border:宽度 线的样式 颜色;----------属性没写完敲空格;
2、border-color:功能:简写属性,设置四个边框的颜色值。
数值:可以用颜色名或RGB值。
如果指定单个颜色,则四个边框都显示为这个颜色;
如果指定两个颜色,则顺序为上下,左右;
如果指定三种颜色,则顺序为上,左右,下;
如果指定四种颜色,则顺序为上,右,下,左。
3、border-边框的宽度指定长度。
功能:简写属性,可同时设置四个边框的 宽度。
数值:
thin -细边框。
medium -中等线宽。
thick -粗线。
长度 -用相对或绝对单位设置边框宽度
border-top-width
border-bottom-width
border-right-width
border-left-width功能:分别设置各个边框的厚度。
4、border-style:设置用于修饰边框的底纹。可以设置下列样式:
none -不显示边框,为缺省值
dotted -点线
dashed -虛线
solid -实线
double -双线
groove - 3D陷入线
ridge - 3D山脊狀线
inset -使页面有沉入感
outset -使页面有浮出感
5、border-radius:5px; 边框变为弧形