----------------------------------------------------------------------分割线----------------------------------------------
如图,每个块就是这样的结构,有色部分为盒子,最里面的内容就是我们所显示的内容。
border就是边框,padding就是内边距(边框与内容之间的距离),margin就是外边距(块与块之间的距离)
position是在页面或者窗口的固定位置。
----------------------------------------------------------------------分割线----------------------------------------------
边框:border
样式:
border:1px solid red;-------1px是边框的宽度,solid是边框的线的样式(这里是实线,可以是虚线等),red是边框的颜色。这里是border的简写。
具体可以分为:
border-width: 10px;----线宽
border-style: solid[实线]; dashed[虚线] dotter[点线]-----线形
border-color:red;----------线色
除此之外,还可以单独给某个方向设置(left/right/top/bottom)
border-bottom:1px solid red;
border-bottom-width:1px;
还可以设置圆角:
border-radius:5px;-----5px是圆角半径。
假如盒子为正方形,当半径大于等于盒子的边长的一半时,会变成圆形。如果盒子为长方形,半径大于等于最长边的时候,会变成椭圆形。
圆角也可以单独给某个角设圆角:
border-top-left-radius: 5px;------这里要两个方向一起用。
三角形:
width="100" ;
height="100";
border-width: 10px;
border-color:red;
border-style: solid;
----------------------------------------------------------------------分割线----------------------------------------------
内边距:padding
样式:padding:1px 2px 3px 4px;
4个值分别为上右下左。除了这样设置之外,还可以有多种设置方式:
padding:1px;-------4个方向都是1px
padding:1px 3px;------上下是1px,左右是3px
padding:1px 3px 2px;-----上是1px,左右是3px,下是2px
单独设置时:
padding-(left/right/top/bottom):2px;---选一个方向
边外距:margin
格式跟padding一样
margin:1px 2px 3px 4px;